ECharts action 交互

上一节通过我们对事件的了解和学习,我们应该以及可以应对用户的大部分操作了,但是除了用户的交互外,我们有时也需要在程序中调用方法来触发图表的行为,来完成所需的效果。下面我们就一起看一下 ECharts 中的交互系统能为我们带来哪些不一样的效果吧。

1. 简介

官方解释:

ECharts 中支持的图表行为,通过 dispatchAction 触发。

慕课解释

action 交互系统允许开发者通过编程方式向 ECharts 实例传递行为消息,实例中的组件会对接收到的消息做出响应,按照消息参数更新组件的视觉状态。action 系统与事件系统都被设计为消息的传播机制,不同的是事件是从实例组件向应用层,自下而上传递消息,描述用户在组件发生的交互行为;action 消息方向相反,从应用层到组件自上而下传递,描述开发者希望如何改变组件的状态。

Tips

action 通常会触发对应类型的事件,例如 legend.legendSelect 对应 legendselected 事件;dataZoom.dataZoom 对应 dataZoom 事件;visualMap.selectDataRange 对应 datarangeselected 事件。

2. 用法

action 通过 echartInstance.dispatchAction 接口分发,接口签名:

(payload: object) => void

payload 参数是对 action 的描述,包含 type 属性用于声明行为类型,及其他随机属性用于声明行为参数,例如:

echartInstance.dispatchAction({
	// 激活提示框 tooltip
	type: 'showTip',
	// 指定提示框所在序列下标
	seriesIndex: 0,
	// 指定提示框所在数据下标
	dataIndex: 1,
	// 指定提示框位置
	position: 'top',
});

ECharts 支持的完整行为列表可参考 官网,下面准备了一个动态切换图表高亮态的样例,以展示 action 的常规用法。

3. 图表高亮示例

默认地,当鼠标悬停在图表上时,相应的数据项会切换进一种所谓的“高亮”状态,通过变换数据项的颜色、文本、边框、透明度等效果,形成视觉上的突出效果。ECharts 提供了 highlight 行为用以触发图表的高亮效果;提供了 downplay 行为用以取消高亮效果。两者接受相同参数:

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

示例:

实例演示
预览 复制