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

export default {
  data() {
    return {
    // 谐波光标
    harmonicCursorVisible: false,
    harmonicCursorPoints: [],
    harmonicCursorSeries: null,
    };
  },
  mounted() {},

  beforeDestroy() {},
  methods: {
    enableHarmonicCursor() {
      this.harmonicCursorVisible = true;
      this.chartInstance.getZr().on("click", this.handleHarmonicCursorClick);
    },

    // 禁用谐波光标
    disableHarmonicCursor() {
      this.harmonicCursorVisible = false;
      this.chartInstance.getZr().off("click", this.handleHarmonicCursorClick);
      this.removeHarmonicCursor();
    },

    handleHarmonicCursorClick(event) {
      if (!this.harmonicCursorVisible) return;

      // 获取点击位置对应的X值
      const pointInGrid = this.chartInstance.convertFromPixel(
        { seriesIndex: 0 },
        [event.offsetX, event.offsetY]
      );
      const baseX = pointInGrid[0];

      // 生成1-6倍频的X坐标
      this.harmonicCursorPoints = [];
      for (let i = 1; i <= 6; i++) {
        const xValue = baseX * i;
        const closestIndex = this.findClosestIndex(xValue);
        this.harmonicCursorPoints.push({
          xAxis: xValue,
          multiple: i,
          yValue: this.envelopeList.y[closestIndex]?.toFixed(2) || "0",
        });
      }

      this.updateHarmonicCursor();
    },

    // 更新谐波光标显示
    updateHarmonicCursor() {
      // 创建谐波光标系列
      this.harmonicCursorSeries = {
        type: "line",
        id: "HARMONIC_CURSOR",
        silent: true,
        markLine: {
          silent: true,
          lineStyle: {
            color: "#FFA500", // 橙色表示谐波光标
            type: "dashed",
            width: 1,
          },
          symbol: ["none", "none"],
          label: {
            show: true,
            position: "start",
            formatter: (params) =>
              `${params.data.multiple}X\n${params.data.yValue}`,
            color: "#FFA500",
            backgroundColor: "rgba(255,255,255,0.8)",
            padding: [2, 4],
            borderRadius: 3,
          },
          data: this.harmonicCursorPoints.map((point) => ({
            xAxis: point.xAxis,
            multiple: point.multiple,
            yValue: point.yValue,
          })),
        },
      };

      // 更新图表
      const option = this.chartInstance.getOption();
      const otherSeries = option.series.filter(
        (s) => s.id !== "HARMONIC_CURSOR"
      );

      this.chartInstance.setOption(
        {
          series: [...otherSeries, this.harmonicCursorSeries],
        },
        {
          replaceMerge: ["series"],
          notMerge: false,
        }
      );
    },

    // 移除谐波光标
    removeHarmonicCursor() {
      const option = this.chartInstance.getOption();
      const series = option.series.filter((s) => s.id !== "HARMONIC_CURSOR");
      this.chartInstance.setOption({ series }, { replaceMerge: ["series"] });
      this.harmonicCursorPoints = [];
    },
  },
};