ECharts事件处理并和对返回params对象的内部参数分析

ECharts 通过 on 方法来监听用户的行为，例如监控用户的点击行为。

一、用户鼠标点击如’click’、‘dblclick’、‘mousedown’、‘mousemove’、‘mouseup’、‘mouseover’、‘mouseout’、‘globalout’、‘contextmenu’ 事件。

二、用户在使用可以交互的组件后触发的行为事件，例如在切换图例开关时触发的 ‘legendselectchanged’ 事件），数据区域缩放时触发的 ‘datazoom’ 事件等等。

所有的鼠标事件包含参数 params，这是一个包含点击图形的数据信息的对象，我们用一张简单的折线图，给它添加点击事件，通过控制台输出看看params参数的内部到底是什么样。

myChart.on('click', function (params) {
    alert(params.name);
});

这是一个官方的折线图实例（代码在ECharts就能找到），我们给它添加了点击事件，现在点击最上面曲线的第三个点，我们看看到输出的 params的内部包含了很多参数，我们一个一个往下看。

1. $$vars对象数组：$标识这个是jQuery对象，为方便后续直接用jQuery方法（不确定）
2. borderColor：组件的边框颜色
3. componentIndex：曲线数据传入series中的index（下标从0开始）
4. componentSubType：曲线的类型
5. componentType：当前点击的图形元素所属的组件名称，其值如 ‘series’、‘markLine’、‘markPoint’、‘timeLine’ 等。
6. data：曲线点击该点对应Y轴的值（传入的原始数据项）
7. dataIndex：点击曲线上的点对应X轴的序号，数据在传入的 data 数组中的 index（下标从0开始）
8. dataType：（不确定）
9. dimensionNames：（不确定）
10. encode：（不确定）
11. event.type：触发事件的类型；（其余参数不确定）
12. marker：点击曲线对应的CSS属性
13. name：曲线点击该点对应X轴的值
14. seriesId：点击曲线对应的曲线名称
15. seriesIndex：曲线数据在series中的顺序/编号（下标从0开始）
16. seriesName：点击曲线对应的系列名称。当 componentType 为 ‘series’ 时有意义。
17. seriesType：点击曲线对应的系列类型。值可能为：‘line’、‘bar’、‘pie’ 等。当 componentType 为 ‘series’ 时有意义。
18. type：触发事件的类型
19. value：曲线点击该点对应Y轴的值

柱状图、折线图、饼状图中params对应的参数应该大同小异，就先分析这一个，日后遇到问题在继续更新上述数据。

如何区分鼠标点击到了哪里：（结合上述讲解，你一定看得懂以下代码）

myChart.on('click', function (params) {
    if (params.componentType === 'markPoint') {
        // 点击到了 markPoint 上
        if (params.seriesIndex === 5) {
            // 点击到了 index 为 5 的 series 的 markPoint 上。
        }
    }
    else if (params.componentType === 'series') {
        if (params.seriesType === 'graph') {
            if (params.dataType === 'edge') {
                // 点击到了 graph 的 edge（边）上。
            }
            else {
                // 点击到了 graph 的 node（节点）上。
            }
        }
    }
});

使用 query 只对指定的组件的图形元素的触发回调：

chart.on(eventName, query, handler);

在 ECharts 中基本上所有的组件交互行为都会触发相应的事件，常用的事件和事件对应参数在 events 文档中有列出。

今天就到这里，有很多地方还没有去升入研究，接触echarts没多久，希望能一起进步。也有很多地方还不确定，如果有大佬们知道答案的，或者发现文章有错误之处的，欢迎评论批评指正~