關於ECharts折線圖非節點的點擊事件

ECharts官網教程

詳情請看官網教程

前言：相信不少人有這種需求，在點擊折線圖非節點的時候不能觸發點擊事件，而官網又沒有這方面的教程，只能本身默默的研究了

解決方案以下:

// 基於準備好的dom，初始化echarts實例
    var mychart = echarts.init(document.getElementById('main'));
     // 指定圖表的配置項和數據
     var option = {
            title: {
                text: 'ECharts 入門示例'
            },
            tooltip: {},
            legend: {
                data:['銷量']
            },
            xAxis: {
                data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
            },
            yAxis: {},
            series: [{
                name: '銷量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

    // 使用剛指定的配置項和數據顯示圖表。
    mychart.setOption(option);
    //綁定點擊事件
    mychart.getZr().on("click", function(params) {
        const pointInPixel = [params.offsetX, params.offsetY];
        if (mychart.containPixel("grid", pointInPixel)) {
          let xIndex = mychart.convertFromPixel({ seriesIndex: 0 }, [
            params.offsetX,
            params.offsetY
          ])[0];
          /*事件處理代碼書寫位置*/
         
        }
      });

實現的代碼解釋以下：

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

mychart.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獲取到可能須要的一些信息，能夠很好的實現需求，而且不會有其它的性能影響，完美實現瞭如題的需求。