Vue.js (v2/v3) component for Apache ECharts™ (v5).
Important
We have released an import code generator that can generate precise import code by pasting the option code.
If you are migrating from vue-echarts ≤ 5, you should read the Migration to v6 section before you update to v6.
Not ready yet? Read documentation for older versions here →
npm i echarts vue-echartsTo make vue-echarts work for Vue 2 (<2.7.0), you need to have @vue/composition-api installed (@vue/runtime-core for TypeScript support):
npm i @vue/composition-api
npm i @vue/runtime-core # for TypeScript supportIf you are using NuxtJS on top of Vue 2, you'll need @nuxtjs/composition-api:
npm i @nuxtjs/composition-apiAnd then add '@nuxtjs/composition-api/module' in the buildModules option in your nuxt.config.js.
Vue 3 Demo →
<template>
<v-chart class="chart" :option="option" />
</template>
<script setup>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import {
TitleComponent,
TooltipComponent,
LegendComponent
} from "echarts/components";
import VChart, { THEME_KEY } from "vue-echarts";
import { ref, provide } from "vue";
use([
CanvasRenderer,
PieChart,
TitleComponent,
TooltipComponent,
LegendComponent
]);
provide(THEME_KEY, "dark");
const option = ref({
title: {
text: "Traffic Sources",
left: "center"
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: "vertical",
left: "left",
data: ["Direct", "Email", "Ad Networks", "Video Ads", "Search Engines"]
},
series: [
{
name: "Traffic Sources",
type: "pie",
radius: "55%",
center: ["50%", "60%"],
data: [
{ value: 335, name: "Direct" },
{ value: 310, name: "Email" },
{ value: 234, name: "Ad Networks" },
{ value: 135, name: "Video Ads" },
{ value: 1548, name: "Search Engines" }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
}
}
]
});
</script>
<style scoped>
.chart {
height: 400px;
}
</style>Vue 2 Demo →
<template>
<v-chart class="chart" :option="option" />
</template>
<script>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import {
TitleComponent,
TooltipComponent,
LegendComponent
} from "echarts/components";
import VChart, { THEME_KEY } from "vue-echarts";
use([
CanvasRenderer,
PieChart,
TitleComponent,
TooltipComponent,
LegendComponent
]);
export default {
name: "HelloWorld",
components: {
VChart
},
provide: {
[THEME_KEY]: "dark"
},
data() {
return {
option: {
title: {
text: "Traffic Sources",
left: "center"
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: "vertical",
left: "left",
data: [
"Direct",
"Email",
"Ad Networks",
"Video Ads",
"Search Engines"
]
},
series: [
{
name: "Traffic Sources",
type: "pie",
radius: "55%",
center: ["50%", "60%"],
data: [
{ value: 335, name: "Direct" },
{ value: 310, name: "Email" },
{ value: 234, name: "Ad Networks" },
{ value: 135, name: "Video Ads" },
{ value: 1548, name: "Search Engines" }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
}
}
]
}
};
}
};
</script>
<style scoped>
.chart {
height: 400px;
}
</style>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 option code 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";Drop <script> inside your HTML file and access the component via window.VueECharts.
Vue 3 Demo →
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>const app = Vue.createApp(...)
// register globally (or you can do it locally)
app.component('v-chart', VueECharts)Vue 2 Demo →
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>// register globally (or you can do it locally)
Vue.component("v-chart", VueECharts);See more examples here.
-
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: truewill 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.
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
import { THEME_KEY } from 'vue-echarts'
import { provide } from 'vue'
// composition API
provide(THEME_KEY, 'dark')
// options API
{
provide: {
[THEME_KEY]: 'dark'
}
}Vue 2
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.
// in component options { data () { return { theme: { value: 'dark' } } }, provide () { return { [THEME_KEY]: this.theme } } }
setOption→getWidth→getHeight→getDom→getOption→resize→dispatchAction→convertToPixel→convertFromPixel→containPixel→showLoading→hideLoading→getDataURL→getConnectedDataURL→clear→dispose→
Static methods can be accessed from echarts itself.
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 →
If you are applying a CSP to prevent inline <style> injection, you need to use files from dist/csp directory and include dist/csp/style.css into your app manually.
💡 Please make sure to read the migration guide for ECharts 5 as well.
The following breaking changes are introduced in vue-echarts@6:
- If you are using version prior to
[email protected],@vue/composition-apiis required to be installed to use Vue-ECharts with Vue 2 (and also@vue/runtime-corefor TypeScript support).
optionsis renamed tooptionto align with ECharts itself.- Updating
optionwill respectupdate-optionsconfigs instead of checking reference change. watch-shallowis removed. Usemanual-updatefor performance critical scenarios.
mergeOptionsis renamed tosetOptionto align with ECharts itself.showLoadingandhideLoadingis removed. Use theloadingandloading-optionsprops instead.appendDatais removed. (Due to ECharts 5's breaking change.)- All static methods are removed from
vue-echarts. Use those methods fromechartsdirectly.
- Computed getters (
width,height,isDisposedandcomputedOptions) are removed. Use thegetWidth,getHeight,isDisposedandgetOptionmethods instead.
- Now the root element of the component have
100%×100%size by default, instead of600×400.
pnpm i
pnpm serveOpen http://localhost:8080 to see the demo.
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.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent