简体中文 | 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