performance-test/src/views/health/components/spectrogramcharts/Bdgb.js

export default {
  data() {
    return {
      // 边带光标
      sidebandCursorVisible: false,
      sidebandCursorPoints: [],
      sidebandCursorSeries: null,
    };
  },
  mounted() {},

  beforeDestroy() {},
  methods: {
    // 边带光标
    enableSidebandCursor() {
      this.sidebandCursorVisible = true;
      // 添加鼠标移动事件监听
      this.chartInstance.getZr().on("mousemove", this.handleSidebandCursorMove);
    },

    disableSidebandCursor() {
      this.sidebandCursorVisible = false;
      // 移除鼠标移动事件监听
      this.chartInstance
        .getZr()
        .off("mousemove", this.handleSidebandCursorMove);
      // 移除边带光标
      this.removeSidebandCursor();
    },

    handleSidebandCursorMove(event) {
      if (!this.sidebandCursorVisible) return;

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

      // 生成3个光标点（中心、左、右）
      this.sidebandCursorPoints = [
        { xAxis: xValue - 5, val: (xValue - 5).toFixed(2) }, // 左边带
        { xAxis: xValue, val: xValue.toFixed(2) }, // 中心
        { xAxis: xValue + 5, val: (xValue + 5).toFixed(2) }, // 右边带
      ];

      this.updateSidebandCursor();
    },
    updateSidebandCursor() {
      if (this.sidebandCursorPoints.length < 3) return;

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

      // 创建新的系列配置
      this.sidebandCursorSeries = {
        type: "line",
        id: "SIDEBAND_CURSOR",
        silent: true, // 禁止系列响应事件
        markLine: {
          silent: true,
          lineStyle: {
            color: "red",
            type: "dashed",
            width: 1,
          },
          symbol: ["none", "none"],
          label: {
            show: true,
            position: "start",
            formatter: (params) => params.data.val,
            color: "red",
          },
          data: this.sidebandCursorPoints.map((point) => ({
            xAxis: point.xAxis,
            val: point.val,
          })),
        },
        markArea: {
          silent: true,
          itemStyle: {
            color: "rgba(255, 0, 0, 0.2)", // 红色半透明背景
          },
          data: [
            // 左侧区域（左线到中线）
            [
              {
                xAxis: this.sidebandCursorPoints[0].xAxis,
                yAxis: "min", // 从Y轴最小值开始
              },
              {
                xAxis: this.sidebandCursorPoints[1].xAxis,
                yAxis: "max", // 到Y轴最大值结束
              },
            ],
            // 右侧区域（中线到右线）
            [
              {
                xAxis: this.sidebandCursorPoints[1].xAxis,
                yAxis: "min",
              },
              {
                xAxis: this.sidebandCursorPoints[2].xAxis,
                yAxis: "max",
              },
            ],
          ],
        },
      };

      // 更新图表（保留原有系列）
      const otherSeries = option.series.filter(
        (s) => s.id !== "SIDEBAND_CURSOR"
      );
      this.chartInstance.setOption(
        {
          series: [...otherSeries, this.sidebandCursorSeries],
        },
        {
          replaceMerge: ["series"], // 关键配置：只替换series
          notMerge: false,
        }
      );
    },

    removeSidebandCursor() {
      // 获取当前选项
      const option = this.chartInstance.getOption();

      // 过滤掉边带光标系列
      const series = option.series.filter((s) => s.id !== "SIDEBAND_CURSOR");

      // 更新图表
      this.chartInstance.setOption(
        {
          series: series,
        },
        { replaceMerge: "series" }
      );

      this.sidebandCursorPoints = [];
    },
  },
};