elib0/echarts-for-vue

📊📈 ECharts wrapper component for Vue 3 and 2

简体中文 | English

ECharts For Vue  

📊📈 ECharts wrapper component for Vue 3 and 2

Features

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

Install

npm i -S echarts-for-vue

Usage

1. Vue 3

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

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

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

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

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

2. Vue 2

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

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

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

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

    export default {
        components: {
            ECharts: createComponent({ echarts }),      // use as a component
        },
        data() {
            return {
                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(initialOptions: object): object	Component definition object	Create a component
plugin(app: Vue, initialOptions: object): void		The installation method of plugin

initialOptions

Property	Type	Default	Optional	Description
echarts	object			The global object of ECharts library
h	function		✔	The method createElement of Vue (Required for Vue 3)
ResizeObserver	function	window.ResizeObserver	✔	When the global ResizeObserver doesn't exist, the polyfill provides support
name	string	"ECharts"	✔	The registered name of the component

Instance Properties

Name	Type	ReadOnly	Description
inst	object	✔	ECharts instance

props

Name	Type	Default	Reactive	Description
initTheme	object | string			The parameter theme of echarts.init method, see
initOpts	string			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	object			The parameter opts of ECharts instance method showLoading, see
option	object		✔	The parameter option of ECharts instance method setOption, see
setOptionOpts	object			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 (Based on ResizeObserver, forward compatibility via polyfill)

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

methods

Definition	Description
setOption(option: object, opts: object): 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: ambit_tsai
2. QQ Group: 663286147
3. E-mail: ambit_tsai@qq.com