To configure the echarts module and customize its behavior, you can use the echarts property in your nuxt.config:
export default defineNuxtConfig({
modules: ['nuxt-echarts'],
echarts: {
// Options
}
})
Nuxt ECharts module configs provide you with a tree-shakeable interface to bundle the required components and get a minimal bundle.
echarts.rendererDefault: canvas
Register the renderer used by <VChart>. You can also import both.
export default defineNuxtConfig({
echarts: {
renderer: ['svg', 'canvas']
}
})
<VChartIsland>, <VChartServer> and <VChartLight>) will always be rendered as SVG.chartsRegister the charts used by <VChart>.
export default defineNuxtConfig({
echarts: {
charts: ['BarChart', 'LineChart', 'PieChart']
}
})
componentsRegister the components used by <VChart>.
export default defineNuxtConfig({
echarts: {
components: ['DatasetComponent', 'GridComponent', 'TooltipComponent']
}
})
featuresRegister the features used by <VChart>.
export default defineNuxtConfig({
echarts: {
features: ['LabelLayout', 'UniversalTransition']
}
})
Nuxt ECharts generate a virtual module based on your config. For example, the following config
export default defineNuxtConfig({
modules: ['nuxt-echarts'],
echarts: {
renderer: 'svg',
charts: ['BarChart'],
components: ['DatasetComponent', 'GridComponent', 'TooltipComponent'],
},
})
will create the following module imported by <VChart>:
import { use } from 'echarts/core'
import { SVGRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
import {
DatasetComponent,
GridComponent,
TooltipComponent,
} from 'echarts/components'
use([
CanvasRenderer,
SVGRenderer,
BarChart,
DatasetComponent,
GridComponent,
TooltipComponent,
])
renderer, charts and components configs will only be included in the bundle if <VChart> is used. Otherwise, they will be tree-shaked.