form的action属性用法（form表单中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. | 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.|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

}

});

可选