简体中文 | English

ECharts For Vue  

📊📈 ECharts wrapper component for Vue 3, 2 and TypeScript

Features

1. Support for Vue 3 and 2;
2. Support auto resize;
3. Conform to the habits of Vue and ECharts users;
4. Provide pure function API, no side effects;
5. Lightweight encapsulation, easy to use;

Install

npm i -S echarts-for-vue

Usage

1. Vue 3

import { createApp, h } from 'vue';
import { plugin } from 'echarts-for-vue';
import * as echarts from 'echarts';

const app = createApp({ /*...*/ });
app.use(plugin, { echarts, h });                        // use as a plugin

<template>
    <ECharts ref="chart" :option="option" />
</template>

<script>
    import { createComponent } from 'echarts-for-vue';
    import * as echarts from 'echarts';
    import { h } from 'vue';

    export default {
        components: {
            ECharts: createComponent({ echarts, h }),   // use as a component
        },
        data: () => ({
            option: { /*...*/ },
        }),
        methods: {
            doSomething() {
                this.$refs.chart.inst.getWidth();       // call the method of ECharts instance
            },
        },
    }
</script>

2. Vue 2

import Vue from 'vue';
import { plugin } from 'echarts-for-vue';
import * as echarts from 'echarts';

Vue.use(plugin, { echarts });                           // use as a plugin

<template>
    <ECharts ref="chart" :option="option" />
</template>

<script>
    import { createComponent } from 'echarts-for-vue';
    import * as echarts from 'echarts';

    export default {
        components: {
            ECharts: createComponent({ echarts }),      // use as a component
        },
        data: () => ({
            option: { /*...*/ },
        }),
        methods: {
            doSomething() {
                this.$refs.chart.inst.getWidth();       // call the method of ECharts instance
            },
        },
    }
</script>

3. More examples
4. Online demo

Global API

|Definition|Return|Description| |-|-|-| |createComponent(options: Options): object|Component definition object|Create a component| |plugin(app: Vue, options: Options): void||The installation method of plugin|

Options

|Property|Type|Default|Optional|Description| |-|-|-|-|-| |echarts|typeof echarts|||The global object of ECharts library| |h|Function||✔|The method createElement of Vue (Required for Vue 3)| |ResizeObserver|typeof ResizeObserver|window.ResizeObserver|✔|When the global ResizeObserver doesn't exist, the polyfill provides support| |name|string|"ECharts"|✔|The registered name of the component| |deepWatchOption|boolean|true|✔|deep watch prop "option"|

Instance Properties

|Name|Type|ReadOnly|Description| |-|-|-|-| |inst|ECharts|✔|ECharts instance|

props

|Name|Type|Default|Reactive|Description| |-|-|-|-|-| |initTheme|object | string||✔|The parameter theme of echarts.init method, see| |initOpts|object||✔|The parameter opts of echarts.init method, see| |loading|boolean|false|✔|Shows loading animation| |loadingType|string|"default"||The parameter type of ECharts instance method showLoading, see| |loadingOpts|EChartsLoadingOption|||The parameter opts of ECharts instance method showLoading, see| |option|EChartOption||✔|The parameter option of ECharts instance method setOption, see| |optionOpts|EChartsOptionConfig|||The parameter opts of ECharts instance method setOption, see| |events|Arguments[]|||An array element is the arguments of ECharts instance method on, see| |autoResize|boolean|true|✔|Auto resize|

Beyond the props above, the remaining properties are passed to the root element of the component, such as style, class or onclick

Events

|Name|Description| |-|-| |resize|Trigger when chart is resized|

methods

|Definition|Description| |-|-| |setOption(option: EChartOption, opts?: EChartsOptionConfig): void|Call the method setOption of ECharts instance, see| |resize(): void|Resize chart (Based on the size of root element)| |addResizeListener(): void|Add "resize" listener| |removeResizeListener(): void|Remove "resize" listener|

Contact

1. WeChat: cai_fanwei
2. QQ: 854521460
3. QQ Group: 663286147
4. E-mail: ambit_tsai@qq.com