ckl1227/echarts-for-vue

ECharts wrapper component for Vue 3 and 2

简体中文 | English

ECharts For Vue  

ECharts Wrapper Component For Vue 3 and 2

Install

npm i -S echarts-for-vue

Usage

1. Vue 3

import { createApp, h } from 'vue';
import 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 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 the ECharts instance
            }
        }
    }
</script>

2. Vue 2

import Vue from 'vue';
import 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 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 the ECharts instance
            }
        }
    }
</script>

3. More examples
4. Online demo

Global API

Definition	Return	Explain
Object createComponent(echarts echarts [, Function h])	Component definition object	Create a component. Parameter h isn't required in Vue 2
void plugin(Vue app, Object options)		The installation method of plugin. Parameter options has 3 props (echarts, h, name)

Instance Properties

Name	Type	Explain
inst	Object	ECharts instance

props

Name	Type	Default	Reactive	Explain
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 showLoading method, see
loadingOpts	Object			The parameter opts of ECharts instance showLoading method, see
option	Object		✔	The parameter option of ECharts instance setOption method, see
setOptionOpts	Object			The parameter opts of ECharts instance setOption method, see
events	Array<Arguments>			The array element is an argument of ECharts instance method on, see
autoResize	Boolean	true		Auto resize (Based on ResizeObserver, forward compatibility via polyfill）

methods

Definition	Explain
void setOption(Object option, Object opts)	Call the method setOption of ECharts instance, see
void resize()	Resize (Based on the size of outer div)
void addResizeListener()	Add resize listener
void removeResizeListener()	Remove resize listener

Contact Us

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