dispatchAction trigger for all actions
All ECharts actions are triggered through the dispatchAction method on the ECharts instance. Each action has a type property identifying the action, followed by action-specific parameters.
instance methods & api
20 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
setOption signature and parameters
setOption accepts an option object and optional parameters. Signature: (option: Object, notMerge?: boolean, lazyUpdate?: boolean) or (option: Object, opts?: {notMerge?: boolean; replaceMerge?: string | string[]; lazyUpdate?: boolean; silent?: boolean}). The notMerge parameter (default false) controls whether to merge with previous options or replace all components. The lazyUpdate parameter (default false) controls whether to update immediately or in the next animation frame. The replaceMerge parameter specifies component types to perform replacement merge. The silent parameter (default false) controls whether to suppress events.
Component merge modes: notMerge behavior
When setOption is called with notMerge=true, all old components are completely removed and new components are created from the option. When notMerge=false (default), component merging behavior depends on replaceMerge setting.
Normal merge strategy in setOption
In normal merge mode (notMerge=false and no replaceMerge specified): first, each component description with id or name in the new option is matched to existing components by id or name and merged. Then remaining unmatched component descriptions are matched sequentially to remaining existing components. Finally, any remaining component descriptions create new components at the end of the component list. This never deletes existing components and never changes component indices.
Replacement merge strategy in setOption
In replacement merge mode (when replaceMerge specifies component types): only component descriptions with specified id that match existing component ids are merged. All other existing components of that type are deleted, and new components are created from remaining option descriptions, filling deletion gaps or appending to the end. This allows component deletion while preserving indices of merged components.
getWidth and getHeight methods
getWidth() returns the width in pixels of the ECharts instance container as a number. getHeight() returns the height in pixels of the ECharts instance container as a number.
getDom method
getDom() returns the DOM node (HTMLCanvasElement or HTMLDivElement) of the ECharts instance container.
getOption method behavior
getOption() returns the current option object maintained by the instance, which includes the result of all user setOption calls merged together, plus recorded user interaction state like legend toggles and data zoom selections. All component properties in the returned option are unified as arrays, even if setOption received single component objects. For example, the result is {title: [{...}], legend: [{...}], grid: [{...}]} regardless of input format.
setTheme signature and parameters
setTheme(theme: string | Object, opts?: {silent?: boolean}) => void. When theme is a string, it refers to a theme previously registered with echarts.registerTheme. When theme is an Object, it is an anonymous theme applied directly. The opts.silent parameter (default false) controls whether to suppress events.
setTheme merge mode limitation
The current implementation does not support calling setTheme after using merge mode (notMerge=false) setOption calls. When setTheme is called after merge mode setOptions, previous merged options are discarded. Solution: use notMerge=true for all setOption calls to ensure full option information is retained before calling setTheme.
resize method signature and parameters
resize(opts?: {width?: number|string, height?: number|string, silent?: boolean, animation?: {duration?: number, easing?: string}}) => ECharts. The width and height can be explicitly specified in pixels, or set to null/undefined/'auto' to auto-detect from container. The silent parameter (default false) controls whether to suppress events. The animation parameter optionally enables transition animation with duration (default 0, no animation) and easing function.
renderToSVGString method
renderToSVGString(opts?: {useViewBox?: boolean}) => string renders the chart to an SVG string. Only works when renderer is set to 'svg'. The useViewBox parameter controls whether to include the viewBox attribute in the generated SVG string. Available from version 5.3.0.
dispatchAction method
dispatchAction(payload: Object) triggers chart behaviors such as legend toggling, data zoom, showing tooltips, etc. The payload parameter can include a batch property to trigger multiple actions simultaneously. Each action has a corresponding event.
showLoading method signature and parameters
showLoading(type?: string, opts?: Object) displays a loading animation. The type parameter is optional and currently only 'default' is supported. The opts parameter configures the animation appearance and is type-dependent.
showLoading default configuration options
Default showLoading options: text='loading', color='#c23531', textColor='#000', maskColor='rgba(255, 255, 255, 0.8)', zlevel=0, fontSize=12 (v4.8.0+), showSpinner=true (v4.8.0+), spinnerRadius=10 (v4.8.0+), lineWidth=5 (v4.8.0+), fontWeight='normal' (v5.0.1+), fontStyle='normal' (v5.0.1+), fontFamily='sans-serif' (v5.0.1+).
hideLoading method
hideLoading() hides the loading animation effect displayed by showLoading().
clear method
clear() empties the current instance and removes all components and charts.
isDisposed method
isDisposed() => boolean returns true if the current instance has been disposed/released.
group property
The group property (string|number) groups the chart for linking/connection via echarts.connect().
dispose method
dispose() destroys the instance and it cannot be used afterward.