VChart is re-exported from Vue ECharts. The usage is exactly the same as the original Vue ECharts component.echarts.init's opts parameter. Injection key: INIT_OPTIONS_KEY.setOption method. Read more here →.update-options is not specified, notMerge: false will be specified by default when the setOption method is called if the option object is modified directly and the reference remains unchanged; otherwise, if a new reference is bound to option, notMerge: true will be specified.echartsInstance.setOption's opts parameter. Injection key: UPDATE_OPTIONS_KEY.echartsInstance.group.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.false - Whether the chart is in loading state.echartsInstance.showLoading's opts parameter. Injection key: LOADING_OPTIONS_KEY.false - For performance critical scenarios (having a large dataset) we'd better bypass Vue's reactivity system for option prop. By specifying manual-update prop with true and not providing option prop, the dataset won't be watched any more. After doing so, you need to retrieve the component instance with ref and manually call setOption method to update the chart.You can bind events with Vue's v-on directive.
<template>
<VChart :option="option" @highlight="handleHighlight" />
</template>
.once event modifier is supported as other modifiers are tightly coupled with the DOM event system.highlightdownplayselectchangedlegendselectchangedlegendselectedlegendunselectedlegendselectalllegendinverseselectlegendscrolldatazoomdatarangeselectedtimelinechangedtimelineplaychangedrestoredataviewchangedmagictypechangedgeoselectchangedgeoselectedgeounselectedaxisareaselectedbrushbrushEndbrushselectedglobalcursortakenrenderedfinishedzr:clickzr:mousedownzr:mouseupzr:mousewheelzr:dblclickzr:contextmenuAs <VChart> binds events to the ECharts instance by default; there is a caveat when using native DOM events. You need to prefix the event name with native: to bind native DOM events.
<template>
<v-chart @native:click="handleClick" />
</template>
setOptiongetWidthgetHeightgetDomgetOptionresizedispatchActionconvertToPixelconvertFromPixelcontainPixelgetDataURLgetConnectedDataURLcleardisposeshowLoading / hideLoading: use the loading and loading-options props instead.setTheme: use the theme prop instead.<VChart> allows you to define ECharts option's tooltip.formatter and toolbox.feature.dataView.optionToContent callbacks via Vue slots instead of defining them in your option object. This simplifies custom HTMLElement rendering using familiar Vue templating.
Slot Naming Convention
tooltip/dataView, followed by hyphen-separated path segments to the target.option property name or an array index (for arrays, use the numeric index).Example mappings:
tooltip → option.tooltip.formattertooltip-baseOption → option.baseOption.tooltip.formattertooltip-xAxis-1 → option.xAxis[1].tooltip.formattertooltip-series-2-data-4 → option.series[2].data[4].tooltip.formatterdataView → option.toolbox.feature.dataView.optionToContentdataView-media-1-option → option.media[1].option.toolbox.feature.dataView.optionToContent<template>
<v-chart :option="chartOptions">
<!-- Global `tooltip.formatter` -->
<template #tooltip="params">
<div v-for="(param, i) in params" :key="i">
<span v-html="param.marker" />
<span>{{ param.seriesName }}</span>
<span>{{ param.value[0] }}</span>
</div>
</template>
<!-- Tooltip on xAxis -->
<template #tooltip-xAxis="params">
<div>X-Axis : {{ params.value }}</div>
</template>
<!-- Data View Content -->
<template #dataView="option">
<table>
<thead>
<tr>
<th v-for="(t, i) in option.dataset[0].source[0]" :key="i">
{{ t }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, i) in option.dataset[0].source.slice(1)" :key="i">
<th>{{ row[0] }}</th>
<td v-for="(v, i) in row.slice(1)" :key="i">{{ v }}</td>
</tr>
</tbody>
</table>
</template>
</v-chart>
</template>
props.option.