Echarts 指示器十字焦点固定在折线（数据）上

最新推荐文章于 2025-03-26 14:58:39 发布

雾不知

最新推荐文章于 2025-03-26 14:58:39 发布

阅读量5.2k

点赞数 9

文章标签： echarts reactjs

本文链接：https://blog.csdn.net/m0_59354754/article/details/118549034

版权

本文介绍了如何在Echarts中将指示器axisPointer的焦点固定在折线上，通过修改axisPointer类型为'line'，结合mousemove和mousedown事件监听，动态调整markLine的位置。关键步骤包括：1) 设置axisPointer类型；2) 配置初始markLine，隐藏箭头并设为虚线；3) 添加Echarts事件监听，根据鼠标位置更新markLine。利用containPixel、convertFromPixel和setOption方法实现，注意在频繁更新时设置lazyUpdate以优化性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一开始设置Echarts的指示器axisPointer，
焦点是跟着鼠标点击的位置，但是期望的焦点是在红色折线上，如下图所示
在这里插入图片描述

axisPointer设置的关键代码：

tooltip: {
   
        trigger: "axis",
        triggerOn: "mousemove",
        position: [-5, 0],
        axisPointer: {
   
          type: "cross",
          snap: true,
          label: {
   
            show: false,
          },
        },
        transitionDuration: 0,
        backgroundColor: "#FFFFFF",
        textStyle: {
   
          color: "#3C3C3C", // 设置文字颜色
          fontSize: 12,
          lineHeight: 20,
        },
}