echart折线图点击事件包括任意位置

一、常规点击事件

在echarts中可以使用on 为图形添加点击事件，但是这种方式添加的点击事件，只有点击在图形元素上才会触发事件处理函数。

myChart.on('click',params=>{ 
// 可以设置点击的类型与响应的系列
if (params.seriesType === 'line') {
	if (params.seriesIndex === 1) {
	}
}

需要注意的是，如果是动态改变的每一次setOptions之后都添加事件会造成事件重复响应，所以可以先删掉事件再添加。

myChart.off('click')

缺点：

​ 在折线图与柱状图中都具有很多不可触发的区域，特别是折线图中，只有点击在拐点上才会触发。在数据差别很大的图形中，想准确点击数据较小甚至为0的图形是非常困难的，这就使得一些交互体验不是很好。

二、响应图形任意位置的点击事件

这种方法借助于convertFromPixel和zr来实现需要的效果，实现方法如下：

myChart.getZr().on('click',params=>{
    const pointInPixel= [params.offsetX, params.offsetY];
    if (myCharts.containPixel('grid',pointInPixel)) {
        let xIndex=myCharts.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
	}
});

实现的代码解释如下：

myCharts.getZr().on('click',params=>{})

使用getZr添加图表的整个canvas区域的点击事件，并获取params携带的信息

const pointInPixel= [params.offsetX, params.offsetY];

获取到鼠标点击位置

if (myCharts.containPixel('grid',pointInPixel)) {}

使用containPixel API判断点击位置是否在显示图形区域，下面的例子过滤了绘制图形的网格外的点击事件，比如X、Y轴lable、空白位置等的点击事件。

let xIndex=myCharts.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];

使用API convertFromPixel获取点击位置对应的x轴数据的索引值，

上一步骤中可以获取到丰富的诸如轴线、索引、ID等信息，可以在自己的事件处理代码中方便的使用。

这种方法仅响应图表区域的响应事件，通过convertFromPixel获取到可能需要的一些信息，可以很好的实现需求，并且不会有其它的性能影响，完美实现了如题的需求。