在實際的項目開發(fā)中，我們通常會用到Echarts來對數(shù)據(jù)進行展示，有時候需要用到Echarts的點擊事件，增加系統(tǒng)的交互性，一般是點擊Echarts圖像的具體項來跳轉(zhuǎn)路由并攜帶參數(shù)，當然也可以根據(jù)具體需求來做其他的業(yè)務(wù)邏輯。下面就Echarts圖表的點擊事件進行實現(xiàn)，文章省略了Echarts圖的html代碼，構(gòu)建過程，option，適用的表格有餅圖、柱狀圖、折線圖。如果在實現(xiàn)過程中，遇到困難或者有更好的建議，歡迎留言。

餅圖點擊事件

mounted() {
     //餅狀圖點擊事件
     myChart.on('click', (param) =>{  //這里使用箭頭函數(shù)代替function，this指向VueComponent
        let index;
        //當前扇區(qū)的dataIndex
        index = param.dataIndex; 
        //自己的操作，這里是點擊跳轉(zhuǎn)路由，并攜帶參數(shù)
        if (index !== undefined) {
          //myChartYData為餅圖數(shù)據(jù)
          if (this.myChartYData[index].value!=0){
            /*跳轉(zhuǎn)路由*/
            this.$router.push({
              path: '/project/list',
              query: {
                status: index+1,
              }
            })
          }
      }
    });
}

柱狀圖點擊事件（折線圖也可使用）

我們可以通過?myChart.getZr().on('click', ...)?來檢測整個圖表的點擊事件，并且通過回調(diào)函數(shù)的參數(shù)來判斷點擊的區(qū)域，

參數(shù)params如下：

?

• ? 通過參數(shù)對象中的target屬性和topTarget屬性進行定位位置
• ? 當點擊某個圖形元素：target對象中有dataIndex，seriesIndex屬性，即可知道點擊那個圖形元素。
• ? 當點擊grid內(nèi)的空白位置：target對象為undefined，topTarget不為undefined。
• ? 當點擊坐標軸標簽：topTarget對象的anid值為"label_xx"， xx為坐標值。
• ? 當點擊坐標軸外的空白位置：target對象和topTarget多為undefined。

    //柱狀圖點擊事件
	myChart.getZr().on('click', (params) => {
      //echartsData為柱狀圖數(shù)據(jù)
      if (this.echartsData.deviceCode.length > 0) {
        const pointInPixel = [params.offsetX, params.offsetY];
        //點擊第幾個柱子
        let index;
        if (myChart.containPixel('grid', pointInPixel)) {
          index = myChart.convertFromPixel({seriesIndex: 0}, [params.offsetX, params.offsetY])[0];
        }
        if (index !== undefined) {
          /*事件處理代碼書寫位置*/
          var deviceMac = this.echartsData.deviceMac[index];
      		/*跳轉(zhuǎn)路由*/
          this.$router.push({
            name: 'Statistics',
            params: {
              mac: deviceMac,
            }
          })
        }
      }
    });

1、使用getZr添加圖表的整個canvas區(qū)域的點擊事件，并獲取params攜帶的信息：

????????myChart.getZr().on('click',?(params)?=>?{}

2、獲取到鼠標點擊位置：

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

3、使用containPixel?API判斷點擊位置是否在顯示圖形區(qū)域，下面的例子過濾了繪制圖形的網(wǎng)格外的點擊事件，比如X、Y軸lable、空白位置等的點擊事件。

if?(myChart.containPixel('grid',?pointInPixel))?{}

4、使用API?convertFromPixel獲取點擊位置對應(yīng)的x軸數(shù)據(jù)的索引值index，我的實現(xiàn)是借助于索引值獲取數(shù)據(jù)，當然可以獲取到其它的信息，詳細請查看文檔。

let?index?=?myChart.convertFromPixel({seriesIndex:?0},?[params.offsetX,?params.offsetY])[0];

其實在上一步驟中可以獲取到豐富的諸如軸線、索引、ID等信息，可以在自己的事件處理代碼中方便的使用。文章來源地址http://www.zghlxwxcb.cn/news/detail-458403.html

到了這里，關(guān)于vue-echarts餅圖/柱狀圖點擊事件的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！