vue实现echarts饼图/柱状图点击事件实例

mounted() {
     //饼状图点击事件
     myChart.on('click', (param) =>{  //这里使用箭头函数代替function，this指向VueComponent
        let index;
        //当前扇区的dataIndex
        index = param.dataIndex; 
        //自己的操作，这里是点击跳转路由，并携带参数
        if (index !== undefined) {
          //myChartYData为饼图数据
          if (this.myChartYData[index].value!=0){
            /*跳转路由*/
            this.$router.push({
              path: '/project/list',
              query: {
                status: index+1,
              }
            })
          }
      }
    });
}

    //柱状图点击事件
	myChart.getZr().on('click', (params) => {
      //echartsData为柱状图数据
      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];
      		/*跳转路由*/
          this.$router.push({
            name: 'Statistics',
            params: {
              mac: deviceMac,
            }
          })
        }
      }
    });

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

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

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

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

 <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 = ""; //当前点击的柱状图横坐标名称
      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,//上边那个数也可以写成这样
              },
              150,
              80,
              70,
              110,
              {
                value: 130,
                itemStyle: {
                  color: "#FFAB60",//给最后一根柱子添加默认颜色，不想要可以直接删了
                },
              },
            ],
            type: "bar",
            //重点
            itemStyle: {
              color: function (params) {
                if (checkName === params.name) {
                  return "#FFAB60"; //点击的柱子颜色发生改变
                } 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); //柱状图数据重组
      });
    },
  }
}
</script>