vue echarts 柱状图表，点击柱子，路由代参数（X轴坐标）跳转

懵魅的程序猿

已于 2024-07-22 08:36:26 修改

阅读量903

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript 前端开发语言 vue.js

于 2024-07-18 15:15:36 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44229734/article/details/140523787

一,echarts 点击事件监控

myChart.on('click', (params) => {
                     if (params.componentType === 'series' && params.dataIndex !== undefined) {
                           const months = this.month_htqd[params.dataIndex]; // 获取点击柱状图的 X 轴坐标值
                          alert(`点击了柱状图，值为: ${months}`);
                         // 根据点击的柱状图数据索引，处理跳转逻辑
                          this.$router.push( {
                            path: `/tzmanager/yueding`,
                            query: {
                                yuedTime: months
                              }
                            });
                      }
                  });

二，跳转到的vue组件，接收参数

data () {
      return {
        queryParam: {
          yuedTime: '' // 初始化为空，接收选择的月份值
        },
     }，
   
}

三、watch监听router变化，具体参数根据你自己的功能实现去写

 mounted() {
        
        if(this.$route.query.yuedTime!=null){
           const yuedTime =this.$route.query.yuedTime;
           let dateObj = new Date(yuedTime);
          this.queryParam.yuedTime =dateObj;
          
          this.searchQuery();
          
          this.handleUpdateClick();
        }
       
    },
    watch: {
      '$route'(to, from) {
        // 监听路由参数变化
         if(this.$route.query.yuedTime!=null){
            const yuedTime =this.$route.query.yuedTime;
            let dateObj = new Date(yuedTime);
            this.queryParam.yuedTime = dateObj;
            // 在这里可以执行刷新组件的其他操作
            this.searchQuery();
         }
      
      }
    },