Getting Started
Configuration
Nuxt ECharts can be configured to provide better DX.
To configure the echarts module and customize its behavior, you can use the echarts property in your nuxt.config:
nuxt.config.ts
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.
See How to Import ECharts in official documentation. You can also leave the module config empty and use the way mentioned in the ECharts offcial docs to import
echarts.renderer
Default: canvas
Register the renderer used by <VChart>. You can also import both.
nuxt.config.ts
export default defineNuxtConfig({
echarts: {
renderer: ['svg', 'canvas']
}
})
Currently Server-side ECharts (
<VChartIsland>, <VChartServer> and <VChartLight>) will always be rendered as SVG.charts
Register the charts used by <VChart>.
nuxt.config.ts
export default defineNuxtConfig({
echarts: {
charts: ['BarChart', 'LineChart', 'PieChart']
}
})
components
Register the components used by <VChart>.
nuxt.config.ts
export default defineNuxtConfig({
echarts: {
components: ['DatasetComponent', 'GridComponent', 'TooltipComponent']
}
})
features
Register the features used by <VChart>.
nuxt.config.ts
export default defineNuxtConfig({
echarts: {
features: ['LabelLayout', 'UniversalTransition']
}
})
How It Works
Nuxt ECharts generate a virtual module based on your config. For example, the following config
nuxt.config.ts
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,
])
All the imported ECharts functionality via
renderer, charts and components configs will only be included in the bundle if <VChart> is used. Otherwise, they will be tree-shaked.ssr
Default: false
This option indicates if <VChart> should also render on server. By default, it only render on client.