首页 前端知识 echarts获取折线点击数据,并解决重复发起请求的问题

echarts获取折线点击数据,并解决重复发起请求的问题

2024-01-28 12:01:12 前端知识 前端哥 739 247 我要收藏

echarts官方中,只能在折线的拐点获取数据,如果想查询这一条折线对应的所有相关数据就拿不到条件。采用了以下方法解决这个问题:

   this.myChart.getZr().on('click', (params) => {
        const {target} = params;
        // 判断点击的点在  点击在折线的拐点 || 折线上
        if (target && target.z === 3) {
          const parent = params.target.parent.parent;
          let seriesIndex = parent.__ecComponentInfo ? parent.__ecComponentInfo.index : parent.parent.__ecComponentInfo.index
          console.log(seriesIndex);
         // 获取数据,进行操作
        }
      })

通过getZr()方法获取到点击时的数据,然后通过判断找到点击的线的索引。
!!!重点:
清除绑定事件要这样写,否则每一次图表重新渲染,点击事件就会多重复发起一次。

clearChart() {
      this.myChart && this.myChart.getZr().off("click") && this.myChart.clear();
      window.removeEventListener('resize', this.resizeChart)
    },
转载请注明出处或者链接地址:https://www.qianduange.cn//article/664.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!