vue中使用echart绑定点击事件进行路由切换

小编在使用VUE的时候遇到了一个问题TypeError: Cannot read property 'push' of undefined
首先说明一下需求：小编想做的是在vue中使用echarts，然后点击echars图表进行切换路由，在切换路由的时候就报了一个这样的错误。

错误的写法是：

      // 设置表格的点击事件进行路由的切换
      this.chart.on(
        "click",
       function(param) {
          // 可以使用下面的方式进行路由的切换
          alert(param.name);
          this.$router.push({
            path: "/ssss/ssss"
            // query: { params: ddd}
          });
        },
      );

这样写会报错，此时this已经不指向vue实例对象了，所以找不到push，这时候我们可以用箭头函数来进行解决

正确的写法是：

      // 设置表格的点击事件进行路由的切换
      this.chart.on(
        "click",
        (param) => {
          // 可以使用下面的方式进行路由的切换
          alert(param.name);
          this.$router.push({
            path: "/ssss/ssss"
            // query: { params: ddd} 用于传递切换时候的参数
          });
        },
      );

此时运行即可正确的切换路由了

以下就是对表格进行绑定点击事件进行切换路由的代码：

    initChart() {
      this.chart = echarts.init(this.$el, "macarons");
      this.$axios.get("http://127.0.0.1/pp/two").then(response => {
        console.log(response.data.xbsl);
        this.chart.setOption({
          title: {
            text: "ddd"
            // subtext: '数据来自网络'
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            }
          },
          legend: {
            data: ["企业数量", "产品数量"]
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
          },
          xAxis: {
            type: "value",
            boundaryGap: [0, 0.01]
          },
          yAxis: {
            type: "category",
            data: response.data.mc
          },
          series: [
            {
              name: "企业数量",
              type: "bar",
              data: response.data.xbsl
            },
            {
              name: "产品数量",
              type: "bar",
              data: response.data.cpsl
            }
          ]
        });
      });
      // 设置表格的点击事件进行路由的切换
      this.chart.on(
        "click",
        (param) => {
          // 可以使用下面的方式进行路由的切换
          alert(param.name);
          this.$router.push({
            path: "/pdsssr/srhjb"
            // query: { swsmc: danwei }
          });
        },
      );
    }