vue-echarts
Vue-ECharts
Vue.js component for Apache ECharts™.
Still using v6? Read v6 docs here →
Installation & Usage
npm
npm add echarts vue-echarts
Example
Vue 3 Demo →
```vue <v-chart class="chart" :option="option" /> ```Vue 2 Demo →
```vue <v-chart class="chart" :option="option" /> ```[!IMPORTANT] We encourage manually importing components and charts from ECharts for smaller bundle size. We’ve built an import code generator to help you with that. You can just paste in your
optioncode and we’ll generate the precise import code for you.
But if you really want to import the whole ECharts bundle without having to import modules manually, just add this in your code:
import "echarts";
CDN
Drop <script> inside your HTML file and access the component via window.VueECharts.
Vue 3 Demo →
```html ``` ```js const app = Vue.createApp(...) // register globally (or you can do it locally) app.component('v-chart', VueECharts) ```Vue 2 Demo →
```html ``` ```js // register globally (or you can do it locally) Vue.component("v-chart", VueECharts); ```See more examples here.
Props
-
init-options: objectOptional chart init configurations. See
echarts.init’soptsparameter here →Injection key:
INIT_OPTIONS_KEY. -
theme: string | objectTheme to be applied. See
echarts.init’sthemeparameter here →Injection key:
THEME_KEY. -
option: objectECharts’ universal interface. Modifying this prop will trigger ECharts’
setOptionmethod. Read more here →💡 When
update-optionsis not specified,notMerge: falsewill be specified by default when thesetOptionmethod is called if theoptionobject is modified directly and the reference remains unchanged; otherwise, if a new reference is bound tooption, ` notMerge: true` will be specified. -
update-options: objectOptions for updating chart option. See
echartsInstance.setOption’soptsparameter here →Injection key:
UPDATE_OPTIONS_KEY. -
group: stringGroup name to be used in chart connection. See
echartsInstance.grouphere → -
autoresize: boolean | { throttle?: number, onResize?: () => void }(default:false)Whether the chart should be resized automatically whenever its root is resized. Use the options object to specify a custom throttle delay (in milliseconds) and/or an extra resize callback function.
-
loading: boolean(default:false)Whether the chart is in loading state.
-
loading-options: objectConfiguration item of loading animation. See
echartsInstance.showLoading’soptsparameter here →Injection key:
LOADING_OPTIONS_KEY. -
manual-update: boolean(default:false)For performance critical scenarios (having a large dataset) we’d better bypass Vue’s reactivity system for
optionprop. By specifyingmanual-updateprop withtrueand not providingoptionprop, the dataset won’t be watched any more. After doing so, you need to retrieve the component instance withrefand manually callsetOptionmethod to update the chart.
Events
You can bind events with Vue’s v-on directive.
<template>
<v-chart :option="option" @highlight="handleHighlight" />
</template>
Note
Only the
.onceevent modifier is supported as other modifiers are tightly coupled with the DOM event system.
Vue-ECharts support the following events:
highlight→downplay→selectchanged→legendselectchanged→legendselected→legendunselected→legendselectall→legendinverseselect→legendscroll→datazoom→datarangeselected→timelinechanged→timelineplaychanged→restore→dataviewchanged→magictypechanged→geoselectchanged→geoselected→geounselected→axisareaselected→brush→brushEnd→brushselected→globalcursortaken→rendered→finished→- Mouse events
- ZRender events
zr:clickzr:mousedownzr:mouseupzr:mousewheelzr:dblclickzr:contextmenu
See supported events here →
Native DOM Events
As Vue-ECharts binds events to the ECharts instance by default, there is some caveat when using native DOM events. You need to prefix the event name with native: to bind native DOM events (or you can use the .native modifier in Vue 2, which is dropped in Vue 3).
<template>
<v-chart @native:click="handleClick" />
</template>
Provide / Inject
Vue-ECharts provides provide/inject API for theme, init-options, update-options and loading-options to help configuring contextual options. eg. for init-options you can use the provide API like this:
Vue 3
```js import { THEME_KEY } from 'vue-echarts' import { provide } from 'vue' // composition API provide(THEME_KEY, 'dark') // options API { provide: { [THEME_KEY]: 'dark' } } ```Vue 2
```js import { THEME_KEY } from 'vue-echarts' // in component options { provide: { [THEME_KEY]: 'dark' } } ``` > **Note** > > You need to provide an object for Vue 2 if you want to change it dynamically. > > ```js > // in component options > { > data () { > return { > theme: { value: 'dark' } > } > }, > provide () { > return { > [THEME_KEY]: this.theme > } > } > } > ```Methods
setOption→getWidth→getHeight→getDom→getOption→resize→dispatchAction→convertToPixel→convertFromPixel→containPixel→showLoading→hideLoading→getDataURL→getConnectedDataURL→clear→dispose→
Static Methods
Static methods can be accessed from echarts itself.
CSP: style-src or style-src-elem
If you are applying a CSP to prevent inline <style> injection, you need to use vue-echarts/csp instead of vue-echarts and include vue-echarts/csp/style.css manually.
Migration to v7
Read the breaking changes document in the release log and the migration shoud be straightforward.
Local development
pnpm i
pnpm serve
Open http://localhost:8080 to see the demo.
Notice
The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.