首页 前端知识 echarts点击柱状图跳转到指定页面

echarts点击柱状图跳转到指定页面

2024-06-24 02:06:15 前端知识 前端哥 992 182 我要收藏

废话不多说,直接上代码

 myChart.getZr().off('click'),
      myChart.getZr().on('mousemove', param => { // 这是鼠标滑过事件
        var pointInPixel = [param.offsetX, param.offsetY]
        if (myChart.containPixel('grid', pointInPixel)) {
          // 若鼠标滑过区域位置在当前图表范围内 鼠标设置为小手
          myChart.getZr().setCursorStyle('pointer')
        } else {
          myChart.getZr().setCursorStyle('default')
        }
      }),
      myChart.getZr().on('click', params => { // 阴影点击事件
        var pointInPixel = [params.offsetX, params.offsetY]
        // 判断给定的点是否在指定的坐标系
        if (myChart.containPixel('grid', pointInPixel)) {
          const xIndex = myChart.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[0]
          const option = myChart.getOption()
          const xAxis = option.xAxis
          const name = xAxis[0].data[xIndex]
          
          if (name !== undefined || name === '') { // 非空校验,防止没数据点击空白图表跳转
            this.$router.push({ // 路由跳转传参
              name: 'CustomerList',
              // params: {
              //   month: name || '',
              //   level: that.args1.shippingLevel,
              //   shippingCompanyCode: that.args1.collectCompanyCode
              // }
            })
          }
        }
      })

参考文章https://blog.csdn.net/qq_45094682/article/details/125486451

转载请注明出处或者链接地址:https://www.qianduange.cn//article/13435.html
标签
评论
发布的文章

爱心

2024-06-27 17:06:24

表白代码

2024-06-27 16:06:42

html5 css3 前端基础认识。

2024-06-26 23:06:18

CFT Show 信息收集篇

2024-06-26 23:06:28

html插入视频的方法

2024-06-20 00:06:46

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!