首页 前端知识 echart折线图扩大点击区域并获取当前点的索引及数据

echart折线图扩大点击区域并获取当前点的索引及数据

2024-08-10 22:08:13 前端知识 前端哥 438 135 我要收藏

通常对echats做点击事件的时候

myChart.on("click", params=>{})

问题:
折线图的情况
只有用户点击到点(对就是那个小小折线节点)的时候才能拿到返回数据或者进行下一步操作!

我们期望在鼠标随便点击的情况下,可以自动找到最近节点的数据,做一些事情,而不是去费力费眼的去找那个小小的折线节点点击

1、获取到当前节点的一些数据

tooltip: {
    trigger: 'axis',
    ...
    formatter: (params) => {
    	//tooltip的一系列操作
      ...
      // 保留数据
      this.chartsCurrentData = params[0]
    }
  },

2、在点击事件中获取索引去做一些事情

	  // 鼠标滑过时变成小手
      this.echarts.getZr().on('mousemove', param => {
          var pointInPixel= [param.offsetX, param.offsetY];
            if (this.echarts.containPixel('grid',pointInPixel)) {//若鼠标滑过区域位置在当前图表范围内 鼠标设置为小手
                this.echarts.getZr().setCursorStyle('pointer')
            }else{
              this.echarts.getZr().setCursorStyle('default')
            }
      })
      // 点击区域增大
      this.echarts.getZr().on('click',params=>{
        const pointInPixel= [params.offsetX, params.offsetY];
        if (this.echarts.containPixel('grid',pointInPixel)) {
          const { dataIndex} = this.chartsCurrentData;
          // 点击的逻辑
        }
      })
转载请注明出处或者链接地址:https://www.qianduange.cn//article/15254.html
标签
评论
发布的文章

Jquery (第三章笔记)

2024-08-18 00:08:37

jquery实现tab切换简单好用

2024-08-18 00:08:35

jQuery Cookie 插件使用教程

2024-08-14 22:08:01

jQuery的DOM操作

2024-08-18 00:08:21

echarts显示中国地图

2024-08-18 00:08:11

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