Nuxt ECharts v1.0.1
Components

VChartIsland

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

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

Ref

refresh()
() => Promise<void>
Force refetch the server component by refetching it.

Events

error
(error: unknown) => void
Emitted when when NuxtIsland fails to fetch the new island.

VChartFull

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

VChartServer

Rendering ECharts on server and allow client-side injection.