解决echarts的柱状图、折线图点击非图表图形元素不会触发click事件

需求说明：echarts的click事件，只当点击到图形元素是才会触发，对于当一组数据最大值和最小值相差较大时，数值较小的图形元素太小不好点击触发，现在我需要点击事件来获得点击事件的params的data数据，即series中传入的原始数据项data内的某条记录。如何通过点击空白区域也能触发获取到数据。

解决思路：

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

2）获取到鼠标点击位置；

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

3）过滤了绘制图形的网格外的点击事件，比如X、Y轴lable、空白位置等的点击事件，我们只需要图表区域的点击事件；

myChart.containPixel('grid',pointInPixel)

4）获取点击位置对应的x轴数据的索引值，以便我们通过索引值来获得对应的data数据。

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

5）获取myChart的series，并根据索引值获取data;

option.series[0].data[xIndex];//myChart.getOption().series[0].data[xIndex]

完整代码块：

myChart.getZr().on('click',function (params){
                    var pointInPixel= [params.offsetX, params.offsetY];
                    if (myChart.containPixel('grid',pointInPixel)) {
                        var xIndex=myChart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
                        var ds = option.series[0].data[xIndex];//myChart.getOption().series[0].data[xIndex]
                        _this._setRowColor(ds);//需要执行的方法
                    }
                });

以上就是解决柱状图、折线图点击非图表图形元素不会触发click事件的方法，大家有什么其他更好的方法也请不吝赐教！