VChart

Props

Events

You can bind events with Vue's v-on directive.

<template>
  <VChart :option="option" @highlight="handleHighlight" />
</template>

• 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
  • click
  • dblclick
  • mouseover
  • mouseout
  • mousemove
  • mousedown
  • mouseup
  • globalout
  • contextmenu
• ZRender events
  • zr:click
  • zr:mousedown
  • zr:mouseup
  • zr:mousewheel
  • zr:dblclick
  • zr:contextmenu

Native DOM Events

As <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>

Ref

• setOption
• getWidth
• getHeight
• getDom
• getOption
• resize
• dispatchAction
• convertToPixel
• convertFromPixel
• containPixel
• getDataURL
• getConnectedDataURL
• clear
• dispose

Slots

<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

• Slot names begin with tooltip / dataView , followed by hyphen-separated path segments to the target.
• Each segment corresponds to an option property name or an array index (for arrays, use the numeric index).
• The constructed slot name maps directly to the nested callback it overrides.

Example mappings :

• tooltip → option.tooltip.formatter
• tooltip-baseOption → option.baseOption.tooltip.formatter
• tooltip-xAxis-1 → option.xAxis[1].tooltip.formatter
• tooltip-series-2-data-4 → option.series[2].data[4].tooltip.formatter
• dataView → option.toolbox.feature.dataView.optionToContent
• dataView-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>
            <th v-for="(t, i) in option.dataset[0].source[0]" :key="i">
              {{ t }}
        </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>