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
})

示例：

示例效果：

图片描述

Tips ：

所有图表都支持高亮状态，高亮时的样式效果通常使用 emphasis 项进行配置，例如 series-bar.emphasis；series-radar.emphasis；series-tree.emphasis。

4. 与事件系统联动

事件系统与行为系统有千丝万缕的内在关系，两者组合使用可实现多图表联动效果，例如实例：

实例定义了一个柱状图、一个饼图，两者通过 action 与事件系统实现联动交互效果。交互之一是通过监听鼠标 hover 事件，分发对应图表的高亮 action，核心代码：

// 监听鼠标hover事件
myChart.on('mouseover', 'series', (event) => {
    const { seriesType, name } = event;
    if (seriesType === 'pie') {
        // 鼠标停留在饼图上时，触发柱状图对应数据项的高亮效果
        myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, name });
    } else if (seriesType === 'bar') {
        // 鼠标停留在柱状图上时，触发饼图对应数据项的选中效果
        myChart.dispatchAction({ type: 'pieSelect', seriesIndex: 1, name });
    }
});

示例效果：

图片描述

另一个交互效果，是鼠标点击柱状图时，展开数据项的详情数据，核心代码：

// 在柱状图上监听鼠标click事件
myChart.on('click', 'series.bar', (event) => {
    const { name } = event;
    // 柱状图上发生点击事件时，图表聚焦到数据项对应的细节数据上
    const serie = data.find((serie) => serie.name === name);
    myChart.setOption({
        xAxis: {
            data: weeks,
        },
        series: [{ data: serie.data }, { data: serie.data.map((value, index) => ({ name: weeks[index], value })) }],
    });
});

示例效果：

图片描述

Tips ：

灵活使用行为系统与事件系统，能够在组件的基础能力之外实现更多更丰富的交互功能，这是高阶开发者必备技能之一。

5. 小结

图片描述
本节主要介绍 Echarts 行为系统的作用于使用方法，包括如何使用 dispatchAction 接口分发行为信号；Echarts 默认提供的action 类型。