performance-test/src/views/health/components/envelopecharts/Tjgb.js

export default {
  data() {
    return {
      // 添加光标
      cursorPoints: [], // 存储参考点数据
    };
  },
  mounted() {},

  beforeDestroy() {},
  methods: {
    handleDoubleClick(event) {
      if (!this.checkedGB.includes("添加光标")) return;
      if (!this.chartInstance) return;

      const xData = this.spectrumList?.x || this.timeList?.x;
      const yData = this.spectrumList?.y || this.timeList?.y;

      if (!xData || !yData) return;

      const pointInGrid = this.chartInstance.convertFromPixel(
        { seriesIndex: 0 },
        [event.offsetX, event.offsetY],
      );

      const xValue = pointInGrid?.[0];
      if (xValue == null) return;

      const closestIndex = this.findClosestIndex(xValue, xData);
      const yValue = yData[closestIndex];

      this.cursorPoints.push({
        xAxis: xData[closestIndex],
        yAxis: Number(yValue).toFixed(2),
        val: Number(yValue).toFixed(2),
      });

      this.updateCursorElements();
    },
    // 找到最接近的X轴索引
    findClosestIndex(xValue) {
      if (!this.envelopeList.x) return 0;

      let minDiff = Infinity;
      let closestIndex = 0;

      this.envelopeList.x.forEach((x, index) => {
        const diff = Math.abs(x - xValue);
        if (diff < minDiff) {
          minDiff = diff;
          closestIndex = index;
        }
      });

      return closestIndex;
    },

    updateCursorElements() {
      if (!this.chartInstance) return;

      // 获取当前图表选项
      const currentOption = this.chartInstance.getOption();

      // 主数据系列
      const mainSeries = currentOption.series[0];

      // 特征值系列（过滤掉已有的光标系列）
      const featureSeries = currentOption.series.filter(
        (s) => s.markLine && !s.id?.startsWith("CURSOR_"),
      );

      // 参考线配置（垂直线）
      const cursorLineSeries = {
        id: "CURSOR_LINE_SERIES",
        type: "line",
        markLine: {
          silent: true,
          lineStyle: {
            color: "#FF0000",
            type: "dashed",
            width: 1,
          },
          symbol: ["none", "none"],
          label: {
            show: true,
            formatter: (params) => params.data.val || "",
          },
          data: this.cursorPoints.map((point) => ({
            xAxis: point.xAxis,
            val: point.val,
          })),
        },
      };

      // 参考点配置（实际数据点位置）
      const cursorPointSeries = {
        id: "CURSOR_POINT_SERIES",
        type: "scatter",
        symbol: "circle",
        symbolSize: 8,
        itemStyle: { color: "#FF0000" },
        data: this.cursorPoints.map((point) => ({
          value: [point.xAxis, point.yAxis],
          name: point.val,
        })),
        label: {
          show: true,
          formatter: "{@[1]}",
          position: "top",
          color: "#FF0000",
          fontSize: 12,
          backgroundColor: "rgba(255,255,255,0.7)",
          padding: [2, 4],
          borderRadius: 3,
        },
      };

      // 设置新选项
      this.chartInstance.setOption(
        {
          series: [
            mainSeries,
            ...featureSeries,
            {
              id: "CURSOR_LINE_SERIES",
              ...cursorLineSeries,
            },
            {
              id: "CURSOR_POINT_SERIES",
              ...cursorPointSeries,
            },
          ],
        },
        { replaceMerge: ["series"] },
      );
    },
  },
};