{{ target: action-series-query }}// Find ${componentType} by index or id or name. // Can be an array to find multiple components. seriesIndex?: number | number[], seriesId?: string | string[], seriesName?: string | string[],{{/target}}
{{ target: action-data-query-multiple }}// data index; could assign by name attribute when not defined dataIndex?: number | number[], // optional; data name; ignored when dataIndex is defined name?: string | string[],{{/target}}
{{ target: action-data-query-single }}// 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-component-query }}// Find ${componentType} by index or id or name. // Can be an array to find multiple components. ${componentType}Index?: number | number[], ${componentType}Id?: string | string[], ${componentType}Name?: string | string[],{{/target}}
{{ target: action-component-item-query-multiple }}// ${componentItemDesc} in ${componentType} component. // Can be an array to specify multiple names. name?: string | string[],{{/target}}
{{ target: action-component-item-query-single }}// ${componentItemDesc} name in ${componentType} component. 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 specified data graphics.
// If highlight series: dispatchAction({ type: 'highlight', {{ use: action-series-query }} {{ use: action-data-query-multiple }} }); // If highlight geo component: dispatchAction({ type: 'highlight', {{ use: action-component-query(componentType = 'geo') }} {{ use: action-component-item-query-multiple(componentType = 'geo', componentItemDesc = 'region') }} });
Downplay specified data graphics.
// If downplay series: dispatchAction({ type: 'downplay', {{ use: action-series-query }} {{ use: action-data-query-multiple }} }); // If downplay geo component: dispatchAction({ type: 'downplay', {{ use: action-component-query(componentType = 'geo') }} {{ use: action-component-item-query-multiple(componentType = 'geo', componentItemDesc = 'region') }} });
Select specified data. Selected data will apply the style of select.
dispatchAction({ type: 'select', {{ use: action-series-query }} {{ use: action-data-query-multiple }} })
Unselect specified data.
dispatchAction({ type: 'unselect', {{ use: action-series-query }} {{ use: action-data-query-multiple }} })
Toggle selected status of specified data.
dispatchAction({ type: 'toggleSelected', {{ use: action-series-query }} {{ use: action-data-query-multiple }} })
Actions related to legend component, legend component should be imported 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
Selects all legends.
dispatchAction({ type: 'legendAllSelect' })
EVENT: legendselectall
Inverses all legends.
dispatchAction({ type: 'legendInverseSelect' })
EVENT: legendinverseselect
Control 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, tooltip component should be imported before use.
Shows tooltip.
There are several 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 in series, and display tooltip according to the tooltip configuration.
dispatchAction({ type: 'showTip', // index of series, which is optional when trigger of tooltip is axis seriesIndex?: number, {{ use: action-data-query-single }}, // Position of tooltip. Only works in this action. // Use tooltip.position in option by default. position: Array.<number>|string|Function })
3 Specify graphic element in geo component, and display tooltip according to the tooltip configuration.
dispatchAction({ type: 'showTip', {{ use: action-component-query(componentType = 'geo') }} {{ use: action-component-item-query-single(componentType = 'geo', componentItemDesc = 'region') }} // Position of tooltip. Only works in this action. // Use tooltip.position in option by default. position: number[] | string | Function })
Parameter position
is the same as tooltip.position.
Hides tooltip.
dispatchAction({ type: 'hideTip' })
Actions related to data region zoom component, data region zoom component should be imported 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, visual mapping component should be imported 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, timeline component should be imported 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, toolbox component should be imported before use.
Resets option.
dispatchAction({ type: 'restore' })
EVENT: restore
Actions related to geo component, geo should be imported before use.
{{ use: action-select( componentType=‘geo’, name=‘geo region’ ) }}
brush related actions.
This action is dispatched when the “brush” behavior is performing. It 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
, ...].{{ use: partial-version(version = “4.5.0”) }} This action is dispatched when the “brush” behavior finished. The parameters are the same as action brush.
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-component-query(componentType = 'geo') }} {{ use: action-component-item-query-multiple(componentType = 'geo', componentItemDesc = 'region') }} })
EVENT: ${componentType}selected
Cancels selecting specified ${name}.
dispatchAction({ type: '${componentType}UnSelect', {{ use: action-component-query(componentType = 'geo') }} {{ use: action-component-item-query-multiple(componentType = 'geo', componentItemDesc = 'region') }} })
EVENT: ${componentType}unselected
Toggles selecting status of specified ${name}.
dispatchAction({ type: '${componentType}ToggleSelect', {{ use: action-component-query(componentType = 'geo') }} {{ use: action-component-item-query-multiple(componentType = 'geo', componentItemDesc = 'region') }} })