快捷導(dǎo)航

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

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

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

前言

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

餅圖點(diǎn)擊事件

mounted() {
     //餅狀圖點(diǎn)擊事件
     myChart.on('click', (param) =>{  //這里使用箭頭函數(shù)代替function，this指向VueComponent
        let index;
        //當(dāng)前扇區(qū)的dataIndex
        index = param.dataIndex; 
        //自己的操作，這里是點(diǎn)擊跳轉(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,
              }
            })
          }
      }
    });
}

柱狀圖點(diǎn)擊事件（折線圖也可使用）

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

參數(shù)params如下：

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

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

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

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

2、獲取到鼠標(biāo)點(diǎn)擊位置：

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

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

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

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

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

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

附：vue echarts柱狀圖點(diǎn)擊柱子變色

默認(rèn)樣式，點(diǎn)擊柱子切換顏色

 <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)前點(diǎn)擊的柱狀圖橫坐標(biāo)名稱
      var option = {
      tooltip: {//鼠標(biāo)移入切換背景色
          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,//上邊那個(gè)數(shù)也可以寫(xiě)成這樣
              },
              150,
              80,
              70,
              110,
              {
                value: 130,
                itemStyle: {
                  color: "#FFAB60",//給最后一根柱子添加默認(rèn)顏色，不想要可以直接刪了
                },
              },
            ],
            type: "bar",
            //重點(diǎn)
            itemStyle: {
              color: function (params) {
                if (checkName === params.name) {
                  return "#FFAB60"; //點(diǎn)擊的柱子顏色發(fā)生改變
                } else {
                  return "#E9EAEC"; //這里是柱子的默認(rèn)顏色
                }
              },
              emphasis: {
                color: "#ffe3ca", //鼠標(biāo)移入時(shí)改變柱子的顏色
              },
            },
          },
        ],
      };
      myChart.setOption(option);
      //柱子添加點(diǎn)擊事件
      myChart.on("click", function (params) {
        checkName = params.name;
        delete option
          .series[0].data[option.series[0].data.length - 1].itemStyle; //點(diǎn)擊刪了默認(rèn)最后一根柱子的顏色
        myChart.setOption(option); //柱狀圖數(shù)據(jù)重組
      });
    },
  }
}
</script>

總結(jié)

到此這篇關(guān)于vue實(shí)現(xiàn)echarts餅圖/柱狀圖點(diǎn)擊事件的文章就介紹到這了,更多相關(guān)echarts圖表點(diǎn)擊事件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: