废话不多说,直接上代码

 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

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐