Echarts-for-vue NPM

ECharts For Vue

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

Features

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

Install

npm i -S echarts-for-vue

Usage

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>

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>

More examples
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