Nuxt ECharts v0.4.0
Components

VChart

Source
<VChart> is a simple and powerful ECharts wrapper in Vue.
Usage of VChart is the same as Vue-ECharts. We will depend on Vue-ECharts once v8 is released.
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:

Provide / Inject

Configure contextual options via Nuxt ECharts injection keys.

VChartFull

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