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

lyning 發布于2019-08-23 18:15 / 2309人閱讀

摘要：這種方法僅響應圖表區域的響應事件，通過獲取到可能需要的一些信息，可以很好的實現需求，并且不會有其它的性能影響，完美實現了如題的需求。

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

云服務器 GPU云服務器折線圖繪制折線圖 jfreechart折線圖 jsp 折線圖

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104907.html

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

摘要：這種方法僅響應圖表區域的響應事件，通過獲取到可能需要的一些信息，可以很好的實現需求，并且不會有其它的性能影響，完美實現了如題的需求。 ECharts官網教程詳情請看官網教程前言：相信很多人有這種需求，在點擊折線圖非節點的時候不能觸發點擊事件，而官網又沒有這方面的教程，只能自己默默的研究了解決方案如下: // 基于準備好的dom，初始化echarts實例 var ...

_ipo 2019-08-02 15:22 評論0 收藏0
關于ECharts折線圖非節點的點擊事件

摘要：這種方法僅響應圖表區域的響應事件，通過獲取到可能需要的一些信息，可以很好的實現需求，并且不會有其它的性能影響，完美實現了如題的需求。 ECharts官網教程詳情請看官網教程前言：相信很多人有這種需求，在點擊折線圖非節點的時候不能觸發點擊事件，而官網又沒有這方面的教程，只能自己默默的研究了解決方案如下: // 基于準備好的dom，初始化echarts實例 var ...

Steve_Wang_ 2019-08-30 11:14 評論0 收藏0
echarts3的折線圖怎么分段顯示不同的顏色

摘要：原來的格式修改為現在的格式篇幅所限，我這里沒有詳細列出來詳細請訪問我的的折線圖怎么分段顯示不同的顏色再次刷新，是不是兩條斷線連上了呢。一.場景在使用echarts3做圖表的時候，可能會遇到一些特殊的需求：星期一到星期四這幾個點的折線顯示一個顏色，周五到周日這幾個點的折線顯示另外一個顏色，來起到強調區別的作用。二.效果圖先看一下效果圖，你會有一個更清晰的認識: showImg(...

J4ck_Chan 2019-08-21 10:52 評論0 收藏0
echarts3的折線圖怎么分段顯示不同的顏色

摘要：原來的格式修改為現在的格式篇幅所限，我這里沒有詳細列出來詳細請訪問我的的折線圖怎么分段顯示不同的顏色再次刷新，是不是兩條斷線連上了呢。一.場景在使用echarts3做圖表的時候，可能會遇到一些特殊的需求：星期一到星期四這幾個點的折線顯示一個顏色，周五到周日這幾個點的折線顯示另外一個顏色，來起到強調區別的作用。二.效果圖先看一下效果圖，你會有一個更清晰的認識: showImg(...

mumumu 2019-06-27 13:50 評論0 收藏0