Tree-shaking with echarts/core
To reduce bundle size, import the core module with: import * as echarts from 'echarts/core'; then selectively import only required chart types and components.
tree-shaking
10 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Chart types use Chart suffix
When importing specific chart types for tree-shaking, they are suffixed with 'Chart'. For example, import BarChart from 'echarts/charts'.
Components use Component suffix
When importing specific components for tree-shaking, they are suffixed with 'Component'. For example, import TitleComponent, TooltipComponent, GridComponent from 'echarts/components'.
Renderer is required and not provided by default
When using tree-shaking, you must explicitly import and register either CanvasRenderer or SVGRenderer, as ECharts does not provide any renderer by default to minimize bundle size.
Register components with echarts.use()
After importing required chart types, components, and renderer, register them with echarts.use([...]) before initializing the chart instance.
Tree-shaking example with BarChart
Example of tree-shakeable code: import echarts/core, BarChart from echarts/charts, TitleComponent and TooltipComponent and GridComponent from echarts/components, and CanvasRenderer from echarts/renderers. Then call echarts.use([TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer]) before setting options.
SVG renderer advantage in tree-shaking
The benefit of choosing to import only SVGRenderer instead of CanvasRenderer is that the CanvasRenderer module will not be included in the bundle, reducing its size.
TypeScript series option types have SeriesOption suffix
When using TypeScript with tree-shaking, series option types are suffixed with 'SeriesOption'. For example, BarSeriesOption and LineSeriesOption.
TypeScript component option types have ComponentOption suffix
When using TypeScript with tree-shaking, component option types are suffixed with 'ComponentOption'. For example, TitleComponentOption and GridComponentOption.
ComposeOption combines minimal TypeScript types
Use echarts.ComposeOption to combine only the required series and component option types into a single ECOption type for stricter TypeScript checking, for example: type ECOption = echarts.ComposeOption<BarSeriesOption | LineSeriesOption | TitleComponentOption | GridComponentOption>;