{{ target: action-series-query }}// optional; series index; could be an array of multiple series seriesIndex?: number|Array, // optional; series name; could be an array of multiple series seriesName?: string|Array,{{/target}}
{{ target: action-data-query }}// data index; could assign by name attribute when not defined dataIndex?: number, // optional; data name; ignored when dataIndex is defined name?: string{{/target}}
{{ target: action }}
Chart actions supported by ECharts are triggered through dispatchAction.
**Attention: ** The ?:
note in the code shows that this attribute is optional. EVENT: stands for the event that triggers action.
Highlights the given graphic element.
Series is specified through seriesName
or seriesIndex
. If another data needs to be specified, then use dataIndex
or name
.
dispatchAction({ type: 'highlight', {{ use: action-series-query }} // options are index of data dataIndex?: number, // options are data name name?: string })
Cancels highlighting graphic element.
Series is specified through seriesName
or seriesIndex
. If another data needs to be specified, then use dataIndex
or name
.
dispatchAction({ type: 'downplay', {{ use: action-series-query }} // options are index of data dataIndex?: number, // options are data name name?: string })
Actions related to legend component, which should include legend component before use.
Selects legend.
dispatchAction({ type: 'legendSelect', // legend name name: string })
EVENT: legendselected
Unselects the legend.
dispatchAction({ type: 'legendUnSelect', // legend name name: string })
EVENT: legendunselected
Toggles legend selecting state.
dispatchAction({ type: 'legendToggleSelect', // legend name name: string })
EVENT: legendselectchanged
Controll the scrolling of legend. It works when legend.type is 'scroll'
.
dispatchAction({ type: 'legendScroll', scrollDataIndex: number, legendId: string })
EVENT: legendscroll
Actions related to tooltip component, which should include tooltip component before use.
Shows tooltip.
There are two usages as followed.
1 Display tooltip at certain position relative to container. If it cannot be displayed at the specified location, then it is invalid.
dispatchAction({ type: 'showTip', // x coordinate on screen x: number, // y coordinate on screen y: number, // Position of tooltip. Only works in this action. // Use tooltip.position in option by default. position: Array.<number>|string|Function })
2 Specify graphic element, and display tooltip according to the tooltip configuration item.
dispatchAction({ type: 'showTip', // index of series, which is optional when trigger of tooltip is axis seriesIndex?: number, {{ use: action-data-query }}, // Position of tooltip. Only works in this action. // Use tooltip.position in option by default. position: Array.<number>|string|Function })
Parameter position
is the same as tooltip.position.
Hides tooltip.
dispatchAction({ type: 'hideTip' })
Actions related to data region zoom component, which should include data region zoom component before use.
Zoom data region.
dispatchAction({ type: 'dataZoom', // optional; index of dataZoom component; useful for are multiple dataZoom components; 0 by default dataZoomIndex: number, // percentage of starting position; 0 - 100 start: number, // percentage of ending position; 0 - 100 end: number, // data value at starting location startValue: number, // data value at ending location endValue: number })
EVENT: datazoom
Actions related to visual mapping component, which should include visual mapping component before use.
Selects data range of visual mapping.
dispatchAction({ type: 'selectDataRange', // optional; index of visualMap component; useful for are multiple visualMap components; 0 by default visualMapIndex: number, // continuous visualMap is different from discrete one // continuous visualMap is an array representing range of data values. // discrete visualMap is an object, whose key is category or piece index; value is `true` or `false` selected: Object|Array })
? **For example: **
myChart.dispatchAction({ type: 'selectDataRange', // select a value range between 20 and 40 selected: [20, 40], // cancel selecting the second range selected: { 1: false }, // cancel selecting `excellent` category selected: { 'excellent': false } });
EVENT: datarangeselected
Actions related to timeline component, which should include timeline component before use.
Sets the current time point.
dispatchAction({ type: 'timelineChange', // index of time point currentIndex: number })
EVENT: timelinechanged
Toggles playing status of timeline.
dispatchAction({ type: 'timelinePlayChange', // laying status; true for auto-play playState: boolean })
EVENT: timelineplaychanged
Actions related to toolbox component, which should include toolbox component before use.
Resets option.
dispatchAction({ type: 'restore' })
EVENT: restore
Actions related to pie chart, which should include pie chart before use.
{{ use: action-select( componentType=‘pie’, name=‘pie chart’ ) }}
Actions related to map, which should include map before use. {{ use: action-select( componentType=‘map’, name=‘map area’ ) }}
Actions related to graph, which should include graph before use.
Highlight the specified node and all of its adjacent nodes.
dispatchAction({ type: 'focusNodeAdjacency', // Use seriesId or seriesIndex or seriesName to location the series. seriesId: 'xxx', seriesIndex: 0, seriesName: 'nnn', // Use dataIndex to location the node. dataIndex: 12 })
Event focusNodeAdjacency will be thrown finally.
Reverse highlight the specified node and all of its adjacent nodes.
dispatchAction({ type: 'unfocusNodeAdjacency', // Use seriesId or seriesIndex or seriesName to location the series. seriesId: 'xxx', seriesIndex: 0, seriesName: 'nnn' })
Event unfocusNodeAdjacency will be thrown finally.
{{ target: action-select }}
Selects the specified ${name}.
dispatchAction({ type: '${componentType}Select', {{ use: action-series-query }} {{ use: action-data-query }} })
EVENT: ${componentType}selected
Cancels selecting specified ${name}.
dispatchAction({ type: '${componentType}UnSelect', {{ use: action-series-query }} {{ use: action-data-query }} })
EVENT: ${componentType}unselected
Toggles selecting status of specified ${name}.
dispatchAction({ type: '${componentType}ToggleSelect', {{ use: action-series-query }} {{ use: action-data-query }} })