【环球时快讯】form的action属性用法 Echarts中的action都表示什么有什么作用

一、Echarts中的action

echarts中支持的图表行为，通过dispatchAction触发。

1.highlight 高亮指定的数据图形

dispatchAction({    type: "highlight",    // 可选，系列 index，可以是一个数组指定多个系列    seriesIndex?: number|Array,    // 可选，系列名称，可以是一个数组指定多个系列    seriesName?: string|Array,    // 可选，数据的 index    dataIndex?: number,    // 可选，数据的 名称    name?: string})

2.downplay 取消高亮指定的数据图形

dispatchAction({    type: "downplay",    // 可选，系列 index，可以是一个数组指定多个系列    seriesIndex?: number|Array,    // 可选，系列名称，可以是一个数组指定多个系列    seriesName?: string|Array,    // 可选，数据的 index    dataIndex?: number,    // 可选，数据的 名称    name?: string})

3.图例相关的行为，必须引入图例组件之后才能使用

1）legendSelect（选中图例）

(资料图)

dispatchAction({    type: "legendSelect",    // 图例名称    name: string})

2）legendUnSelect（取消选中图例）

dispatchAction({    type: "legendUnSelect",    // 图例名称    name: string})

3）legendToggleSelect（切换图例的选中状态）

dispatchAction({    type: "legendToggleSelect",    // 图例名称    name: string})

4）legendScroll（控制图例的滚动），当legend.type是scroll的时候有效

dispatchAction({    type: "legendScroll",    scrollDataIndex: number,    legendId: string})

4. 提示框组件相关行为，必须引入提示框组件之后才能引用

1）showTip（显示提示框）有两种使用方式A：指定在相对容器的位置处显示提示框，如果指定的位置无法显示则无效。

dispatchAction({    type:"showTip",    //屏幕上的x坐标    x: number,    //屏幕上的y坐标    y: number,    //本次显示tooltip的位置，只在本次action生效。缺省则使用option中定义的tooltip位置    position: Array.<number> | String | Function})

B: 指定数据图形，根据tooltip的配置项进行显示提示框

dispatch({    type: "showTip",    // 系列的 index，在 tooltip 的 trigger 为 axis 的时候可选。    seriesIndex?: number,    // 数据的 index，如果不指定也可以通过 name 属性根据名称指定数据    dataIndex?: number,    // 可选，数据名称，在有 dataIndex 的时候忽略    name?: string,    // 本次显示 tooltip 的位置。只在本次 action 中生效。    // 缺省则使用 option 中定义的 tooltip 位置。    position: Array.<number>|string|Function,})

2）hideTip 隐藏提示框

dispatchAction({    type:"hideTip"})

5.数据区域缩放组件、视觉映射组件、时间轴组件、工具栏组件相关行为数据区域缩放组件,必须引入数据区域缩放组件之后才能使用（dataZoom）

dispatchAction({    type: "dataZoom",    // 可选，dataZoom 组件的 index，多个 dataZoom 组件时有用，默认为 0    dataZoomIndex: number,    // 开始位置的百分比，0 - 100    start: number,    // 结束位置的百分比，0 - 100    end: number,    // 开始位置的数值    startValue: number,    // 结束位置的数值    endValue: number})

2.关闭或启动toolbox中的dataZoom的刷选状态（takeGlobalCursor）

myChart.dispatchAction({    type: "takeGlobalCursor",    key: "dataZoomSelect",    // 启动或关闭    dataZoomSelectActive: true});

3.视觉映射组件，只能在引入视觉映射组件之后才能使用（visualMap）选取映射的数值范围：selectDataRange

dispatchAction({    type: "selectDataRange",    // 可选，visualMap 组件的 index，多个 visualMap 组件时有用，默认为 0    visualMapIndex: number,    // 连续型 visualMap 和 离散型 visualMap 不一样    // 连续型的是一个表示数值范围的数组。    // 离散型的是一个对象，键值是类目或者分段的索引。值是 `true`, `false`    selected: Object|Array})

4.时间轴组件，同理引入之后才能使用1）设置当前的时间点：timelineChange

dispatchAction({    type: "timelineChange",    // 时间点的 index    currentIndex: number})

2)切换时间轴的播放状态：timelinePlayChange

dispatchAction({    type: "timelinePlayChange",    // 播放状态，true 为自动播放    playState: boolean})

5.工具栏组件相关行为，同理引入之后才能使用重置option：restore

dispatchAction({    type: "restore"})

6.饼图、地图组件、地图图表、关系图、区域选择相关行为1）饼图

选中指定的饼图扇形（pieSelect）取消选中指定的饼图扇形（pieUnSelect）切换指定的选中的饼图扇形状态（pieToggleSelect）

dispatchAction({    type: "pieSelect | pieUnSelect | pieToggleSelect",    // 可选，系列 index，可以是一个数组指定多个系列    seriesIndex?: number|Array,    // 可选，系列名称，可以是一个数组指定多个系列    seriesName?: string|Array,    // 数据的 index，如果不指定也可以通过 name 属性根据名称指定数据    dataIndex?: number,    // 可选，数据名称，在有 dataIndex 的时候忽略    name?: string})

2)地图组件

选中指定的地图区域（geoSelect）取消选中的指定地图区域（geoUnSelect）切换指定的地图区域的选中状态（geoToggleSelect）

dispatchAction({    type: "geoSelect | geoUnSelect | geoToggleSelect",    // 可选，系列 index，可以是一个数组指定多个系列    seriesIndex?: number|Array,    // 可选，系列名称，可以是一个数组指定多个系列    seriesName?: string|Array,    // 数据的 index，如果不指定也可以通过 name 属性根据名称指定数据    dataIndex?: number,    // 可选，数据名称，在有 dataIndex 的时候忽略    name?: string})

3)地图图表组件同地图组件类似，也有三个行为，如下：

选中指定的地图区域（mapSelect）取消选中的指定地图区域（mapUnSelect）切换指定的地图区域的选中状态（mapToggleSelect）

dispatchAction({    type: "mapToggleSelect",    // 可选，系列 index，可以是一个数组指定多个系列    seriesIndex?: number|Array,    // 可选，系列名称，可以是一个数组指定多个系列    seriesName?: string|Array,    // 数据的 index，如果不指定也可以通过 name 属性根据名称指定数据    dataIndex?: number,    // 可选，数据名称，在有 dataIndex 的时候忽略    name?: string})

4)关系图关系图行为使用，也得引入关系图

focusNodeAdjacency 将指定的节点以及其周边相邻的节点高亮unFocusNodeAdjacency 将指定的节点以及其周边相邻的节点取消高亮

5）区域选择相关的行为

brush：触发此action可设置或删除chart中的选框takeGlobalCursor：刷选模式的开关。使用此Action可将当前鼠标变为刷选状态

dispatchAction({    type: "takeGlobalCursor",    // 如果想变为“可刷选状态”，必须设置。不设置则会关闭“可刷选状态”。    key: "brush",    brushOption: {        // 参见 brush 组件的 brushType。如果设置为 false 则关闭“可刷选状态”。        brushType: string,        // 参见 brush 组件的 brushMode。如果不设置，则取 brush 组件的 brushMode 设置。        brushMode: string    }});