{{ 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
Activate or inactivate dataZoom
buttom in toolbox
.
myChart.dispatchAction({ type: 'takeGlobalCursor', key: 'dataZoomSelect', // Activate or inactivate. dataZoomSelectActive: true });
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.
brush related actions.
This action sets select-boxes (areas) in this chart. For example:
myChart.dispatchAction({ type: 'brush', areas: [ // "areas" means select-boxes. Multi-boxes can be specified. // If "areas" is empty, all of the select-boxes will be deleted. { // The first area. // Indicate that this area is a "coodinate system area", belonging // to a geo coordinate system with getIndex: 0. // We can also use xAxisIndex or yAxisIndex to indicate that // this area belongs to a catesian coodinate system. // If no coordinate system is specified, this area is a // "global area", which does not belong to any coordinate system. // If an area belongs to a coordinate system, this area moves // and scales alone with the coordinate system. geoIndex: 0, // xAxisIndex: 0, // yAxisIndex: 0, // Optional: 'polygon', 'rect', 'lineX', 'lineY' brushType: 'polygon', // Only for "global area", define the area with the pixel coordinates. range: [ ... ], // Only for "coordinate system area", define the area with the // coordinates. coordRange: [ // In this case, the area is in a geo coordinate system, so // this is [longitude, latitude]. [119.72,34.85],[119.68,34.85],[119.5,34.84],[119.19,34.77] ] }, ... // Other areas. ] });
The content of range
and coordRange
can be:
brushType
is ‘rect’: range
and coordRange
is: [[minX, maxX], [minY, maxY]]
brushType
is ‘lineX’ or ‘lineY’: range
and coordRange
is: [min, maxX]brushType
is ‘polygon’: range
and coordRange
is: [[point1X, point1X], [point2X, point2X], ...]The difference between range
and coordRange
is:
range
.geoIndex
or xAxisIndex
or yAxisIndex
is specified), we should use coordRange
.range
is “pixel”, while the unit of coordRange
should be the save as the unit of the coordinate system. For example, in geo coordinate system, coordRange
should be [longitude
, latitude
], and in cartesian, it should be [axis A value
, axis B value
, axis C value
, ...].The switch of the brush. This action can make the mouse enabled/disabled to brush. In fact, the brush buttons in toolbox just use this aciton.
This event corresponding to this action is globalCursorTaken.
api.dispatchAction({ type: 'takeGlobalCursor', // If intending to enable brush, must set. Otherwise, the mouse will be disabled to brush. key: 'brush', brushOption: { // See more info in the `brushType` of "brush component". // If set as `false`, the mouse is disabled to brush. brushType: string, // See more info in the `brushModel` of "brush component". // IF not set, use the `brushMode` of brush component. brushMode: string } });
{{ 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 }} })