zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    Net设计模式实例之简单工厂模式(Simple Factory Pattern)
    Net设计模式实例系列文章总结
    2019年工作总结
    在Asp.Net Core中集成Kafka(中)
    如何将生产环境的服务Docker镜像拉取到本地进行调试
    记一次EFCore类型转换错误及解决方案
    Asp.Net Core中创建多DbContext并迁移到数据库
    ABP中的AutoMapper
    EFCore中的导航属性
    Asp.Net Core 调用第三方Open API查询物流数据
  • 原文地址:https://www.cnblogs.com/Ao-min/p/14850514.html
Copyright © 2011-2022 走看看