echarts 圖點擊事件

有三種方式，介紹一下，你們學習哈

一、利用tooltip記錄信息，使用zr 監聽事件，進行事件處理。

這種方法是利用showTip方法或者tooltip的formatter函數記錄選中的數據信息，並在zr監聽到的事件中以記錄的信息來處理點擊事件，彌補zr攜帶的信息不便使用的缺陷，具體實現可參照這裏。

這種方法能夠實現想要的效果，可是須要不斷的記錄、更新信息，影響性能。

二、利用tooltip觸發時選中區域的axisPointer的formatter拋出選中數據的相關信息，並在回調函數中進行數據處理。實現以下：

 

 

 

三、 利用echarts提供的新API convertFromPixel完美解決。

這種方法藉助於convertFromPixel和zr來實現須要的效果，實現方法以下：

this.echart.getZr().on('click',params=>{
    const pointInPixel= [params.offsetX, params.offsetY];
    if (this.echart.containPixel('grid',pointInPixel)) {
        let xIndex=this.echart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
        /*事件處理代碼書寫位置*/

}
});

實現的代碼解釋以下：

使用getZr添加圖表的整個canvas區域的點擊事件，並獲取params攜帶的信息：

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

獲取到鼠標點擊位置：

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

使用containPixel API判斷點擊位置是否在顯示圖形區域，下面的例子過濾了繪製圖形的網格外的點擊事件，好比X、Y軸lable、空白位置等的點擊事件。

if (this.echart.containPixel('grid',pointInPixel)) {}

使用API convertFromPixel獲取點擊位置對應的x軸數據的索引值，個人實現是藉助於索引值的，固然能夠獲取到其它的信息，詳細請查看文檔。

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

其實在上一步驟中能夠獲取到豐富的諸如軸線、索引、ID等信息，能夠在本身的事件處理代碼中方便的使用。

這種方法僅響應圖表區域的響應事件，經過convertFromPixel獲取到可能須要的一些信息，能夠很好的實現需求，而且不會有其它的性能影響，完美實現瞭如題的需求。

我就是用的第三種方式，此文源於網絡摘抄，感謝大神們的回答