Nuxt ECharts Docs
Components

<VChartIsland>

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

<VChartIsland>s use <NuxtIsland> under the hood. When rendering an island component, the content of the island component is static, thus no JS is downloaded client-side. Since there is no JS, Provide / Inject does not work for <VChartIsland>, you need to use <VChartServer> which wraps <VChartIsland>.

Changing the island component props triggers a refetch of the island component to re-render ECharts again.

<VChartIsland> is used by VChart, VChartServer and VChartLight for Server-side Rendering.
Example code on GitHub

Props

  • init-options: Optional chart init configurations. See echarts.init's opts parameter.
    • type: object
    • Injection key: INIT_OPTIONS_KEY.
We have to specify the height and width property in init-options for SSR.
  • 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

Ref

  • refresh()
    • type: () => Promise<void>
    • description: force refetch the server component by refetching it.

Events

  • error
    • parameters:
      • error:
        • type: unknown
    • description: emitted when when NuxtIsland fails to fetch the new island.

<VChart>

<VChart> brings full ECharts functionality to your Nuxt app.

<VChartServer>

Rendering ECharts on server and allow client-side injection.