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 →.Smart update
update-options (via prop or injection), Vue ECharts forwards it directly to setOption and skips the planner.setOption calls (only available when manual-update is true) behave like native ECharts, honouring only the per-call override you pass in and are not carried across re-initializations.null, removed arrays become [] with replaceMerge, ID/anonymous deletions trigger replaceMerge, and risky changes fall back to notMerge: true.<VChart> forwards it directly to setOption, skipping the smart update. See 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.loading is true. Defaults to default; custom effects can be added with echarts.registerLoading and selected by name. Effect-specific fields go in loading-options.echartsInstance.showLoading's opts parameter. Injection key: LOADING_OPTIONS_KEY.true, Vue only uses the option prop for the initial render; later prop changes do nothing and you must drive updates via setOption on a template ref. If the chart re-initializes (for example due to init-options changes, flipping manual-update, or a remount), the manual state is discarded and the chart is rendered again from the current option value.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.@brush-end becomes onBrushEnd and @zr:mouse-move becomes onZr:mouseMove, so kebab-case and camelCase both work. ECharts itself only normalizes case, so @datazoom and @dataZoom register the same handler.A kebab-case key written outside a template (a render function or JSX, e.g. onBrush-end) is not camelized by Vue, and ECharts would register the literal brush-end that never fires — use onBrushEnd there.ZRender events use the zr: prefix, e.g. @zr:mouseMove.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>
setOptiongetWidthgetHeightgetDomgetZrgetIdisSSRgetDevicePixelRatiogetOptionresizemakeActionFromEventdispatchActionupdateLabelLayoutconvertToPixelconvertToLayoutconvertFromPixelcontainPixelgetVisualrenderToCanvasrenderToSVGStringgetSvgDataURLgetDataURLgetConnectedDataURLcleardisposeshowLoading / 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.The #graphic slot lets you build the ECharts graphic tree with Vue components instead of the option.graphic array. It replaces option.graphic; supplying both logs a warning. The option prop may be omitted for graphic-only charts.
All graphic element components — GGroup, GRect, GCircle, GEllipse, GText, GImage, GLine, GPolygon, GPolyline, GArc, GBezierCurve, GRing, GSector — are auto-imported from vue-echarts/graphic, no manual import needed.
<script setup lang="ts">
import { ref } from 'vue'
import type { ElementEvent } from 'echarts/core'
const option = {
xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },
yAxis: { type: 'value' },
series: [{ type: 'line', data: [120, 200, 150] }],
}
const overlay = ref({ x: 84, y: 22 })
function onDrag(event: ElementEvent) {
overlay.value.x = event.offsetX - 44
overlay.value.y = event.offsetY - 14
}
</script>
<template>
<VChart :option="option">
<template #graphic>
<GGroup id="drag-handle" :x="overlay.x" :y="overlay.y">
<GRect :width="88" :height="28" :r="6" fill="#5470c6" draggable @drag="onDrag" />
<GText
:x="10"
:y="8"
:text="`x: ${Math.round(overlay.x)} y: ${Math.round(overlay.y)}`"
fill="#fff"
/>
</GGroup>
</template>
</VChart>
</template>
<VChart>, <VChartFull>). Server-side rendering components (<VChartServer>, <VChartLight>, <VChartIsland>) render option.graphic from the static option only.