Apache ECharts component for Vue.js.
Vue.js component for Apache ECharts.
Uses Apache ECharts 5 and works for both Vue.js 2/3.
If your project is using
vue-echartsβ€ 5, you should read the Migration to v6 section before you update to v6.
$ npm install echarts vue-echarts
To make
vue-echartswork for Vue 2, you need to have
@vue/composition-apiinstalled:
npm i -D @vue/composition-api
import { createApp } from 'vue'
import ECharts from 'vue-echarts'
// import ECharts modules manually to reduce bundle size
import {
CanvasRenderer
} from 'echarts/renderers'
import {
BarChart
} from 'echarts/charts'
import {
GridComponent,
TooltipComponent
} from 'echarts/components'
const app = createApp(...)
// register globally (or you can do it locally)
app.component('v-chart', ECharts)
app.mount(...)
import Vue from 'vue'
import ECharts from 'vue-echarts'
// import ECharts modules manually to reduce bundle size
import {
CanvasRenderer
} from 'echarts/renderers'
import {
BarChart
} from 'echarts/chart'
import {
GridComponent,
TooltipComponent
} from 'echarts/components'
// 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";
Drop
inside your HTML file and access the component viawindow.VueECharts.
<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>
<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)
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/@vue/[email protected]"></script>
<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: object
Optional chart init configurations. See
echarts.init's
optsparameter here β
Injection key:
INIT_OPTIONS_KEY.
theme: string | object
Theme to be applied. See
echarts.init's
themeparameter here β
Injection key:
THEME_KEY.
option: object
ECharts' universal interface. Modifying this prop will trigger ECharts'
setOptionmethod. Read more here β
update-options: object
Options for updating chart option. See
echartsInstance.setOption's
optsparameter here β
Injection key:
UPDATE_OPTIONS_KEY.
group: string
Group name to be used in chart connection. See
echartsInstance.grouphere β
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's
optsparameter 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 specifying
manual-updateprop with
trueand not providing
optionprop, the dataset won't be watched any more. After doing so, you need to retrieve the component instance with
refand manually call
setOptionmethod to update the chart.
Vue-ECharts provides provide/inject API for
theme,
init-options,
update-optionsand
loading-optionsto help configuring contextual options. eg. for
init-optionsyou can use the provide API like this:
import { INIT_OPTIONS_KEY } from 'vue-echarts'
import { provide } from 'vue'
// composition API
provide(INIT_OPTIONS_KEY, ...)
// options API
{
provide: {
[INIT_OPTIONS_KEY]: { ... }
}
}
import { INIT_OPTIONS_KEY } from 'vue-echarts'
// in component options
{
provide: {
[INIT_OPTIONS_KEY]: { ... }
}
}
setOptionβ
getWidthβ
getHeightβ
getDomβ
getOptionβ
resizeβ
dispatchActionβ
convertToPixelβ
convertFromPixelβ
showLoadingβ
hideLoadingβ
containPixelβ
getDataURLβ
getConnectedDataURLβ
clearβ
disposeβ
Static methods can be accessed from
echartsitself.
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β
zr:click
zr:mousedown
zr:mouseup
zr:mousewheel
zr:dblclick
zr:contextmenu
See supported events here β
The following breaking changes are introduced in
[email protected]:
@vue/composition-apiis required to be installed to use Vue-ECharts with Vue 2.
optionsis renamed to
optionto align with ECharts itself.
optionwill respect
update-optionsconfigs instead of checking reference change.
watch-shallowis removed. Use
manual-updatefor performance critical scenarios.
mergeOptionsis renamed to
setOptionto align with ECharts itself.
showLoadingand
hideLoadingis removed. Use the
loadingand
loading-optionsprops instead.
appendDatais removed. (Due to ECharts 5's breaking change.)
vue-echarts. Use those methods from
echartsdirectly.
width,
height,
isDisposedand
computedOptions) are removed. Use the
getWidth,
getHeight,
isDisposedand
getOptionmethods instead.
100%Γ100%size by default, instead of
600Γ400.
$ npm i $ npm run serve
Open
http://localhost:8080to see the demo.