快捷導(dǎo)航

vue實現(xiàn)echarts餅圖/柱狀圖點擊事件實例

更新時間：2023年06月16日 09:39:09 作者：要成為大V的小v

echarts原生提供了相應(yīng)的API,只需要在配置好echarts之后綁定相應(yīng)的事件即可,下面這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)echarts餅圖/柱狀圖點擊事件的相關(guān)資料,需要的朋友可以參考下

前言

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

餅圖點擊事件

mounted() {
     //餅狀圖點擊事件
     myChart.on('click', (param) =>{  //這里使用箭頭函數(shù)代替function，this指向VueComponent
        let index;
        //當(dāng)前扇區(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屬性進行定位位置
? 當(dāng)點擊某個圖形元素：target對象中有dataIndex，seriesIndex屬性，即可知道點擊那個圖形元素。
? 當(dāng)點擊grid內(nèi)的空白位置：target對象為undefined，topTarget不為undefined。
? 當(dāng)點擊坐標軸標簽：topTarget對象的anid值為"label_xx"， xx為坐標值。
? 當(dāng)點擊坐標軸外的空白位置：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ù)，當(dāng)然可以獲取到其它的信息，詳細請查看文檔。

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

其實在上一步驟中可以獲取到豐富的諸如軸線、索引、ID等信息，可以在自己的事件處理代碼中方便的使用。

附：vue echarts柱狀圖點擊柱子變色

默認樣式，點擊柱子切換顏色

 <div
    style="width: auto; height: 300px; margin-top: 20px"
    ref="echart"
  ></div>

<script>
import * as echarts from "echarts";
export default {
   mounted() {
   	this.getEcharts();
  },
  methods: {
  	getEcharts() {
      let myChart = echarts.init(this.$refs.echart);
      let checkName = ""; //當(dāng)前點擊的柱狀圖橫坐標名稱
      var option = {
      tooltip: {//鼠標移入切換背景色
          trigger: "axis",
          showDelay: 0, // 顯示延遲，添加顯示延遲可以避免頻繁切換，單位ms
          axisPointer: {
            type: "shadow",
            shadowStyle: {
              color: "rgba(255,171,96, 0.15)",
              width: "1",
            },
          },
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [
              120,
              {
                value: 200,//上邊那個數(shù)也可以寫成這樣
              },
              150,
              80,
              70,
              110,
              {
                value: 130,
                itemStyle: {
                  color: "#FFAB60",//給最后一根柱子添加默認顏色，不想要可以直接刪了
                },
              },
            ],
            type: "bar",
            //重點
            itemStyle: {
              color: function (params) {
                if (checkName === params.name) {
                  return "#FFAB60"; //點擊的柱子顏色發(fā)生改變
                } else {
                  return "#E9EAEC"; //這里是柱子的默認顏色
                }
              },
              emphasis: {
                color: "#ffe3ca", //鼠標移入時改變柱子的顏色
              },
            },
          },
        ],
      };
      myChart.setOption(option);
      //柱子添加點擊事件
      myChart.on("click", function (params) {
        checkName = params.name;
        delete option
          .series[0].data[option.series[0].data.length - 1].itemStyle; //點擊刪了默認最后一根柱子的顏色
        myChart.setOption(option); //柱狀圖數(shù)據(jù)重組
      });
    },
  }
}
</script>