Echarts 折线图让axisPointer的y轴固定在折线上

Question

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,
        },
}

axisPointer设置大致如上。

期望axisPointer的y轴在红色折线上，而不是鼠标位置。

大佬们有什么解决思路吗？

Answer 1

自己尝试了一个解决方法，
用axisPointer解决不了，用了series-line. markLine属性。
通过鼠标监听事件，设置markLine的data，从而改变markLine的位置。

方法如下：
①设置原本的axisPointer的type为"line"（只显示竖线）

tooltip: {
        trigger: "axis",
        triggerOn: "mousemove",
        position: [-5, 0],
        axisPointer: {
          type: "line",
          label: {
            show: false,
          },
        },
    }

②设置markLine,初始data为空，即不展示markLine

 series: [
        {
          name: "收益率",
          type: "line",
          lineStyle: {
            width: 1,
          },
          itemStyle: {
            normal: {
              color: "#FF674D",
            },
          },
          symbol: "none",
          data: yData,
          // 下面的markLine才是相关代码
          markLine: {
            symbol: "none", //去掉箭头
            animation: false,
            label: {
              show: false,
            },
            lineStyle: {
              color: "black",
              type: "dashed",
              width: 1, // 正常时的折线宽度
            },
            emphasis: {
              label: {
                show: false,
              },
              lineStyle: {
                color: "black",
                type: "dashed",
                width: 1, // hover时的折线宽度
              },
            },
            data: [],
          }
        },
    ],

③Echarts添加监听事件

this.lineEchart.getZr().on("mousemove", (params) => {
          // 获取点击位置的坐标
          let pointInPixel = [params.offsetX, params.offsetY];
          // containPixel为true则点击位置在坐标轴内
          if (this.lineEchart.containPixel("grid", pointInPixel)) {
            // 传入鼠标位置坐标进行转化
            // convertFromPixel返回[x, y],x对应鼠标点击处数据的下标,y对应鼠标点击处的数值
            const x = this.lineEchart.convertFromPixel({ seriesIndex: 0 }, pointInPixel)[0];
            // series[0].data[x]是第一条折线上的数据
            const markLineValue = lineChartOptions.series[0].data[x];
            let series = lineChartOptions.series;
            // 修改markLine的值
            series[0].markLine.data = [{ yAxis: markLineValue }];
            // 重新setOption
            this.lineEchart.setOption({ series }, { lazyUpdate: true });
          } else {
            // 不在坐标轴内不展示markLine
            let series = lineChartOptions.series;
            series[0].markLine.data = [];
            this.lineEchart.setOption(
              {
                series,
              },
              { lazyUpdate: true }
            );
          }
});

注释都写在代码里了，感觉不需要再解释啥了0.0

④监听mousemove每次都重新setOption，会导致Echarts很卡，经同事指导，在setOption时使用lazyUpdate有所缓解（第③步已有添加）

Answer 2

看了一下文档配置，好像无法实现