Nuxt ECharts v1.0.1
Components

VChart

Source
<VChart> is a simple and powerful ECharts wrapper in Vue.
VChart is re-exported from Vue ECharts. The usage is exactly the same as the original Vue ECharts component.
Example code on GitHub

Props

init-options
object
Optional chart init configurations. See echarts.init's opts parameter. Injection key: INIT_OPTIONS_KEY.
theme
string | object
Theme to be applied. See echarts.init's theme parameter. Injection key: THEME_KEY.
option
object
ECharts' universal interface. Modifying this prop will trigger ECharts' setOption method. Read more here →.

Smart update

  • If you supply update-options (via prop or injection), Vue ECharts forwards it directly to setOption and skips the planner.
  • Manual 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.
  • Otherwise, Vue ECharts analyses the change: removed objects become null, removed arrays become [] with replaceMerge, ID/anonymous deletions trigger replaceMerge, and risky changes fall back to notMerge: true.
update-options
object
Options for updating chart option. If supplied (or injected), <VChart> forwards it directly to setOption, skipping the smart update. See echartsInstance.setOption's opts parameter. Injection key: UPDATE_OPTIONS_KEY.
group
string
Group name to be used in chart connection. See echartsInstance.group.
autoresize
boolean | { throttle?: number, onResize?: () => void }
Default to 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.
loading
boolean
Default to false - Whether the chart is in loading state.
loading-options
object
Configuration item of loading animation. See echartsInstance.showLoading's opts parameter. Injection key: LOADING_OPTIONS_KEY.
manual-update
boolean
Handy for performance-sensitive charts (large or high-frequency updates). When set to 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.

Events

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

<template>
  <VChart :option="option" @highlight="handleHighlight" />
</template>
Only the .once event modifier is supported as other modifiers are tightly coupled with the DOM event system.

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

The following ECharts instance methods aren't exposed because their functionality is already provided by the component props:

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
example.vue
<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>
Slots take precedence over the corresponding callback defined in props.option.

Provide / Inject

Configure contextual options via Nuxt ECharts injection keys.

VChartFull

<VChartFull> brings full ECharts functionality to your Nuxt app with SSR.