Nuxt ECharts v1.0.0
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 →.
When 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.
update-options
object
Options for updating chart option. 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
Default to 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.

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 some 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 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.