Echarts点击画布任意位置获取当前位置所对应的坐标值

需求:

在这里插入图片描述

工作时遇到的一个需求说:给用户展示图表时,希望用户在图表中选取一块又一块的,拿出来用于后续的数据分析

思路及问题:

既然要选取一段一段的数据,我采取的办法就是用户点一次,我标记此时的x轴,表示起点,用户再点一次,我再记录此时的x轴,表示终点,然后在表中的配置项加个蒙版就是了。
问题:只能点击已经标注的地方,无法点击我想要的任意地方,且就算可以能点击任意地方,也无法获取当前的x坐标的值,只能获取它的偏移值

解决办法:

在这里插入图片描述

const assess_chart = echarts.init(this.$refs.lineChart);

      BASE_CHARE_CONFIG && assess_chart.setOption(BASE_CHARE_CONFIG);


      assess_chart.getZr().on("click", function(params) {
        const pointInPixel = [params.offsetX, params.offsetY];// 获取点击事件里面的坐标轴的偏移值

        if (assess_chart.containPixel({ seriesIndex: 0 }, pointInPixel)) {
          console.log(assess_chart.getOption().xAxis[0].axisPointer);
        }
 });

打印结果: 虽然一点但偏差,但不影响
在这里插入图片描述

需要注意的地方:

  • 一般是直接 assess_chart.on( 'click', function(){} ) 就是注册当前实例的点击事件,可是这个只能点击标注的地方,不能点画布其他的地方,所以要在前面加个 getZr(),即assess_chart.getZr().on( 'click', function(){} )

  • 实例对象.containPixel( finder, point ),这个containPixel()函数它的第一个参数就是你要通过的什么条件去寻找你当前的实例对象,比如我这里是{ seriesIndex: 0 },配置项里的visualMap里的seriesIndex类型下表,代表着哪种类型,不知道我理解的对不对,有大佬看到帮忙解说一下,感激不尽!其实这个参数也可以直接写成"grid",具体看官方文档

在这里插入图片描述

  • 4
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 8
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值