echarts柱狀圖點擊事件實現方式（支持陰影區域點擊獲取數據信息）

echarts柱狀圖點擊事件實現方式

1. 柱子上的點擊事件（只針對柱子綁定事件）

myChart.setOption(this.option);
    myChart.off().on("click", params => {
        ...根據params可獲取點擊柱子信息進行操做
      }
    });
複製代碼

2. cavans的點擊事件（針對整個canvas綁定事件，點擊柱子陰影區域也能夠獲取對應的數據信息）

myChart.setOption(this.option);
    myChart.getZr().off("click");
    myChart.getZr().on("click", params => {
      // 獲取點擊位置
      const pointInPixel = [params.offsetX, params.offsetY];
      // 判斷是否在座標系內
      if (myChart.containPixel("grid", pointInPixel)) {
        // 獲取點擊位置的座標系[x，y]
        const yIndex = myChart.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[1];
        ...根據[x，y]可獲取點擊柱子信息進行操做
      }
    });
複製代碼

containPixel，convertFromPixel 官網連接