1. Actions in Echarts
Chart behavior supported in echarts, triggered by dispatchAction.
1.highlight highlights the specified data graphics
dispatchAction({ type: 'highlight', // optional, series index, can be an array to specify multiple series seriesIndex?: number|Array, // optional, series name, can be an array to specify multiple series seriesName? : string|Array, // optional, the index of the data dataIndex?: number, // optional, the name of the data name ?: string })
2.downplay Cancel the highlighted data graphics
dispatchAction({ type: 'downplay', // optional, series index, can be an array to specify multiple series seriesIndex?: number|Array, // optional, series name, can be an array to specify multiple series seriesName? : string|Array, // optional, the index of the data dataIndex?: number, // optional, the name of the data name ?: string })
3. Behaviors related to the legend can only be used after introducing the legend component
1) legendSelect (select legend)
dispatchAction({ type: 'legendSelect', // legend name name: string })
2) legendUnSelect (unselect the legend)
dispatchAction({ type: 'legendUnSelect', // legend name name: string })
3) legendToggleSelect (toggle the selected state of the legend)
dispatchAction({ type: 'legendToggleSelect', // legend name name: string })
4) legendScroll (control the scrolling of the legend), it is valid when legend.type is scroll
dispatchAction({
type: 'legendScroll',
scrollDataIndex: number,
legendId: string
})
4. The related behavior of the tooltip box component must be introduced before the tooltip box component can be referenced
1) showTip (display prompt box)
has two ways to use
A: Specify to display the prompt box at the position relative to the container, if the specified position cannot be displayed, it will be invalid.
dispatchAction({ type:'showTip', //The x coordinate on the screen x: number, //The y coordinate on the screen y: number, //The position where the tooltip is displayed this time only takes effect in this action. The default is Use the tooltip position defined in option position: Array.<number> | String | Function })
B: Specify the data graphics, and display the prompt box according to the configuration items of the tooltip
dispatch({ type: 'showTip', // the index of the series, optional when the trigger of the tooltip is axis. seriesIndex?: number, // the index of the data, if not specified, the dataIndex can also be specified according to the name through the name attribute ?: number, // optional, data name, ignore when there is dataIndex name?: string, // display the position of tooltip this time. It only takes effect in this action. // default is to use the one defined in option tooltip position. position: Array.<number>|string|Function, })
2) hideTip hides the prompt box
dispatchAction({
type:'hideTip'
})
5. Relevant behaviors of data area zoom components, visual mapping components, time axis components, and toolbar components
- The data area zoom component must be introduced before the data area zoom component can be used (dataZoom)
dispatchAction({ type: 'dataZoom', // optional, the index of the dataZoom component, useful for multiple dataZoom components, the default is 0 dataZoomIndex: number, // the percentage of the start position, 0 - 100 start: number, // end The percentage of the position, 0 - 100 end: number, // the value of the start position startValue: number, // the value of the end position endValue: number })
2. Turn off or start the swiping status of dataZoom in the toolbox (takeGlobalCursor)
myChart.dispatchAction({ type: 'takeGlobalCursor', key: 'dataZoomSelect', // enable or disable dataZoomSelectActive: true });
3. The visual mapping component can only be used after the visual mapping component is introduced (visualMap)
to select the value range of the mapping: selectDataRange
dispatchAction({ type: 'selectDataRange', // optional, the index of the visualMap component, useful for multiple visualMap components, the default is 0 visualMapIndex: number, // continuous visualMap is different from discrete visualMap // continuous is An array representing the value range. // The discrete type is an object, and the key value is the index of the category or segment. The value is `true`, `false` selected: Object|Array })
4. The timeline component can only be used after it is introduced in the same way
1) Set the current time point: timelineChange
dispatchAction({ type: 'timelineChange', // index of time point currentIndex: number })
2) Switch the playback state of the timeline: timelinePlayChange
dispatchAction({ type: 'timelinePlayChange', // playback state, true is autoplay playState: boolean })
5. Behaviors related to toolbar components can only be used after being introduced in the same way
Reset option: restore
dispatchAction({
type: 'restore'
})
6. Pie charts, map components, map charts, relationship diagrams, and area selection related behaviors
1) Pie charts
- Select the specified pie slice (pieSelect)
- Unselect the specified pie slice (pieUnSelect)
- Toggle the specified selected pie chart sector state (pieToggleSelect)
dispatchAction({ type: 'pieSelect | pieUnSelect | pieToggleSelect', // optional, series index, can be an array to specify multiple series seriesIndex?: number|Array, // optional, series name, can be an array to specify multiple A series seriesName?: string|Array, // the index of the data, if not specified, the data can also be specified according to the name through the name attribute dataIndex?: number, // optional, the data name, ignore it when there is a dataIndex name ?: string })
2) Map component
- Select the specified map area (geoSelect)
- Unselect the specified map area (geoUnSelect)
- Toggle the selected state of the specified map area (geoToggleSelect)
dispatchAction({ type: 'geoSelect | geoUnSelect | geoToggleSelect', // optional, series index, can be an array to specify multiple series seriesIndex?: number|Array, // optional, series name, can be an array to specify multiple A series seriesName?: string|Array, // the index of the data, if not specified, the data can also be specified according to the name through the name attribute dataIndex?: number, // optional, the data name, ignore it when there is a dataIndex name ?: string })
3) Map chart component
Similar to the map component, it also has three behaviors, as follows:
- Select the specified map area (mapSelect)
- Unselect the specified map area (mapUnSelect)
- Toggle the selected state of the specified map area (mapToggleSelect)
dispatchAction({ type: 'mapToggleSelect', // optional, series index, can be an array to specify multiple series seriesIndex?: number|Array, // optional, series name, can be an array to specify multiple series seriesName? : string|Array, // the index of the data, if not specified, the data can also be specified according to the name through the name attribute dataIndex ?: number, // optional, data name, ignore name when there is dataIndex ?: string })
4) Relational Diagram
The behavior of the relational diagram is used, and the relational diagram must also be introduced
- focusNodeAdjacency highlights the specified node and its surrounding adjacent nodes
- unFocusNodeAdjacency cancels the highlighting of the specified node and its surrounding adjacent nodes
5) Region selection-related behaviors
- brush: Trigger this action to set or delete the checkbox in the chart
- takeGlobalCursor: The switch of swiping mode. Use this Action to change the current mouse into the brushing state
dispatchAction({ type: 'takeGlobalCursor', // If you want to become a "brush selectable state", you must set it. If you don't set it, you will turn off the "brush selectable state". key: 'brush', brushOption: { // see brush The brushType of the component. If it is set to false, the "selectable state" will be turned off. brushType: string, // See the brushMode of the brush component. If not set, take the brushMode setting of the brush component. brushMode: string } });