Echarts 使用getZr()事件獲取柱狀圖當前點擊列的數(shù)據(jù)

如圖所示：希望點擊柱狀條，可以使其他地方的數(shù)據(jù)跟著改變，這里只需要獲取到當前點擊條目的名稱即可，可根據(jù)需要獲取想要的數(shù)據(jù)。
image.png
點擊 縱向坐標軸 的柱形(如上圖柱形)
 charts.getZr().off('click') //防止觸發(fā)兩次點擊事件
      charts.getZr().on('click', function (params) {
        console.log('Echarts 點擊這一系列 ')
        let op = charts.getOption()
        let pointInPixel = [params.offsetX, params.offsetY]
        if (charts.containPixel('grid', pointInPixel)) {
          const xIndex = charts.convertFromPixel({ seriesIndex: 0 }, pointInPixel)[1]
          let handleIndex = Number(xIndex)
          //獲得圖表中點擊的列
          var name = op.yAxis[0].data[handleIndex]  // 當前點擊的 Y軸 的名稱
          console.log(name)
        }
      })
點擊橫向 坐標軸的柱形 只需要修改
const xIndex = charts.convertFromPixel({ seriesIndex: 0 }, pointInPixel)[0]
當前點擊的 X 軸坐標的名稱
op.xAxis[0].data[xIndex]
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容