Vue.js component for Apache ECharts.
Uses Apache ECharts 5 and works for both Vue.js 2/3.
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 install echarts vue-echarts
To make vue-echarts
work for Vue 2, you need to have @vue/composition-api
installed:
npm i -D @vue/composition-api
Vue 3
import { createApp } from 'vue'
import ECharts from 'vue-echarts'
import { use } from "echarts/core"
// import ECharts modules manually to reduce bundle size
import {
CanvasRenderer
} from 'echarts/renderers'
import {
BarChart
} from 'echarts/charts'
import {
GridComponent,
TooltipComponent
} from 'echarts/components'
use([
CanvasRenderer,
BarChart,
GridComponent,
TooltipComponent
])
const app = createApp(...)
// register globally (or you can do it locally)
app.component('v-chart', ECharts)
app.mount(...)
Vue 2
import Vue from 'vue'
import ECharts from 'vue-echarts'
import { use } from 'echarts/core'
// import ECharts modules manually to reduce bundle size
import {
CanvasRenderer
} from 'echarts/renderers'
import {
BarChart
} from 'echarts/charts'
import {
GridComponent,
TooltipComponent
} from 'echarts/components'
use([
CanvasRenderer,
BarChart,
GridComponent,
TooltipComponent
]);
// register globally (or you can do it locally)
Vue.component('v-chart', ECharts)
new Vue(...)
We encourage manually importing components and charts from ECharts for smaller bundle size. See all supported renderers/charts/components here β
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";
Vue 3
<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";
import { ref, defineComponent } from "vue";
use([
CanvasRenderer,
PieChart,
TitleComponent,
TooltipComponent,
LegendComponent
]);
export default defineComponent({
name: "HelloWorld",
components: {
VChart
},
provide: {
[THEME_KEY]: "dark"
},
setup: () => {
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)"
}
}
}
]
});
return { option };
}
});
</script>
<style scoped>
.chart {
height: 400px;
}
</style>
Vue 2
<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>
Drop <script>
inside your HTML file and access the component via window.VueECharts
.
Vue 3
<script src="https://cdn.jsdelivr.net/npm/vue@3.0.9"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.0.0-rc.4"></script>
const app = Vue.createApp(...)
// register globally (or you can do it locally)
app.component('v-chart', VueECharts)
Vue 2
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script src="https://cdn.jsdelivr.net/npm/@vue/composition-api@1.0.0-rc.3"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.0.0-rc.4"></script>
// register globally (or you can do it locally)
Vue.component("v-chart", VueECharts);
See more examples here.
-
init-options: object
Optional chart init configurations. See
echarts.init
'sopts
parameter here βInjection key:
INIT_OPTIONS_KEY
. -
theme: string | object
Theme to be applied. See
echarts.init
'stheme
parameter here βInjection key:
THEME_KEY
. -
option: object
ECharts' universal interface. Modifying this prop will trigger ECharts'
setOption
method. Read more here β -
update-options: object
Options for updating chart option. See
echartsInstance.setOption
'sopts
parameter here βInjection key:
UPDATE_OPTIONS_KEY
. -
group: string
Group name to be used in chart connection. See
echartsInstance.group
here β -
autoresize: boolean
(default:false
)Whether the chart should be resized automatically whenever its root is resized.
-
loading: boolean
(default:false
)Whether the chart is in loading state.
-
loading-options: object
Configuration item of loading animation. See
echartsInstance.showLoading
'sopts
parameter 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
option
prop. By specifyingmanual-update
prop withtrue
and not providingoption
prop, the dataset won't be watched any more. After doing so, you need to retrieve the component instance withref
and manually callsetOption
method 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 { INIT_OPTIONS_KEY } from 'vue-echarts'
import { provide } from 'vue'
// composition API
provide(INIT_OPTIONS_KEY, ...)
// options API
{
provide: {
[INIT_OPTIONS_KEY]: { ... }
}
}
Vue 2
import { INIT_OPTIONS_KEY } from 'vue-echarts'
// in component options
{
provide: {
[INIT_OPTIONS_KEY]: { ... }
}
}
setOption
βgetWidth
βgetHeight
βgetDom
βgetOption
βresize
βdispatchAction
βconvertToPixel
βconvertFromPixel
βcontainPixel
βshowLoading
βhideLoading
βcontainPixel
βgetDataURL
βgetConnectedDataURL
βclear
βdispose
β
Static methods can be accessed from echarts
itself.
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:click
zr:mousedown
zr:mouseup
zr:mousewheel
zr:dblclick
zr:contextmenu
See supported events here β
π‘ Please make sure to read the migration guide for ECharts 5 as well.
The following breaking changes are introduced in vue-echarts@6
:
- Now
@vue/composition-api
is required to be installed to use Vue-ECharts with Vue 2.
options
is renamed tooption
to align with ECharts itself.- Updating
option
will respectupdate-options
configs instead of checking reference change. watch-shallow
is removed. Usemanual-update
for performance critical scenarios.
mergeOptions
is renamed tosetOption
to align with ECharts itself.showLoading
andhideLoading
is removed. Use theloading
andloading-options
props instead.appendData
is removed. (Due to ECharts 5's breaking change.)- All static methods are removed from
vue-echarts
. Use those methods fromecharts
directly.
- Computed getters (
width
,height
,isDisposed
andcomputedOptions
) are removed. Use thegetWidth
,getHeight
,isDisposed
andgetOption
methods instead.
- Now the root element of the component have
100%Γ100%
size by default, instead of600Γ400
.
$ npm i
$ npm run serve
Open http://localhost:8080
to see the demo.