vue中使用echart绑定点击事件进行路由切换
小编在使用VUE的时候遇到了一个问题TypeError: Cannot read property 'push' of undefined首先说明一下需求:小编想做的是在vue中使用echarts,然后点击echars图表进行切换路由,在切换路由的时候就报了一个这样的错误。错误的写法是:// 设置表格的点击事件进行路由的切换this.chart.on(...
·
小编在使用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 }
});
},
);
}
更多推荐
已为社区贡献10条内容
所有评论(0)