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 }
});
},
);
}

 

————————————————
版权声明：本文为CSDN博主「Michealkz」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_43081842/article/details/92839446