Guides
Provide / Inject
Configure contextual options via Nuxt ECharts injection keys.
Nuxt ECharts provides provide/inject API for theme, init-options, update-options and loading-options to help configuring contextual options for <VChart>, <VChartServer> and <VChartLight>.
<template setup lang="ts">
import { provide } from 'vue'
import type { InitOptions } from 'nuxt-echarts/runtime/types'
/* Injection keys like `THEME_KEY` are auto-imported */
// provide theme
provide(THEME_KEY, 'dark')
// provide init-options
const renderer = ref('svg')
const initOptions = computed<InitOptions>(() => ({
height: 300,
width: 600,
renderer: renderer.value,
}))
provide(INIT_OPTIONS_KEY, initOptions)
// provide update-options
provide(UPDATE_OPTIONS_KEY, {})
// provide update-options
provide(LOADING_OPTIONS_KEY, {})
</template>
UPDATE_OPTIONS_KEY and LOADING_OPTIONS_KEY only work for <VChart>, Server-rendering ECharts (<VChartIsland>, <VChartServer> and <VChartLight>) do not have these two props.