Nuxt ECharts Docs
Components

<VChart>

Source (client)Source (server)
<VChart> brings full ECharts functionality to your Nuxt app.

If ssr is turned on, <VChart> will render a chart on the server then on the client once mounted in the browser.

Usage of VChart is almost the same as Vue-ECharts. Besides, VChart provides functionality of Server-side Rendering.
When ssr is turned on, the client 'halve' of <VChart> is based on Nuxt client-only component which is rendered only after being mounted. To access the rendered template using onMounted(), add await nextTick() in the callback of the onMounted() hook.
Example code on GitHub

Props

  • init-options: Optional chart init configurations. See echarts.init's opts parameter.
    • type: object
    • Injection key: INIT_OPTIONS_KEY.
If ssr is turned on, we have to specify the height and width property in init-options.
  • theme: Theme to be applied. See echarts.init's theme parameter.
    • type: string or object
    • Injection key: THEME_KEY.
  • option: ECharts' universal interface. Modifying this prop will trigger ECharts' setOption method. Read more here →.
    • type: object
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: Options for updating chart option. See echartsInstance.setOption's opts parameter.
    • type: object
    • Injection key: UPDATE_OPTIONS_KEY.
  • group: Group name to be used in chart connection. See echartsInstance.group.
    • type: string
  • autoresize: 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.
    • type: boolean or { throttle?: number, onResize?: ResizeObserverCallback }
    • default: false
  • loading: Whether the chart is in loading state.
    • type: boolean
    • default: false
  • loading-options: Configuration item of loading animation. See echartsInstance.showLoading's opts parameter.
    • type: object
    • Injection key: LOADING_OPTIONS_KEY.
  • manual-update: 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.
    • type: boolean
    • default: false

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

Provide / Inject

Configure contextual options via Nuxt ECharts injection keys.

<VChartIsland>

Nuxt ECharts provides the <VChartIsland> component to render a non-interactive ECharts SVG without any client JS.