触发图表行为,通过dispatchAction触发。例如图例开关legendToggleSelect
, 数据区域缩放dataZoom
,显示提示框showTip
等等。
官网:echarts
(在 ECharts 中主要通过 on 方法添加事件处理函数。)
events:
ECharts 中的事件分为两种,一种是鼠标事件,在鼠标点击某个图形上会触发,还有一种是调用 dispatchAction 后触发的事件。
action:
ECharts 中支持的图表行为,通过 dispatchAction 触发。
dispatchAction({
type: 'highlight',
// 可选,系列 index,可以是一个数组指定多个系列
seriesIndex?: number|Array,
// 可选,系列名称,可以是一个数组指定多个系列
seriesName?: string|Array,
// 可选,数据的 index
dataIndex?: number,
// 可选,数据的 名称
name?: string
})
dispatchAction({
type: 'downplay',
// 可选,系列 index,可以是一个数组指定多个系列
seriesIndex?: number|Array,
// 可选,系列名称,可以是一个数组指定多个系列
seriesName?: string|Array,
// 可选,数据的 index
dataIndex?: number,
// 可选,数据的 名称
name?: string
})
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
})
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'
})
其他相关方法或者属性 可以移步官网。此文借鉴:Echarts 的 dispatchAction