Vue3+TypeScript频谱跳动算法（附vue2+JavaScript）

 以下为Vue3+TypeScript频谱跳动算法

只需要调用下列方法即可实现，并且设置定时器。（最好每次先清楚，否则可能耗内存）

  if (updateInterval.value) {
    clearInterval(updateInterval.value);
  }

const updateInterval = ref<number | undefined>(undefined);
  generateDataSets();
  updateInterval.value = setInterval(updateData, 130);

// 数据集和当前数据
const dataSets = ref<any[][]>([]);
// 生成数据集
const generateDataSets = () => {
  // 清空现有的数据集
  dataSets.value = [];
  // 基于 currentChatData 生成两个相似的数据集
  for (let i = 0; i < 4; i++) {
    let dataSet = generateSimilarData();
    dataSets.value.push(dataSet);
  }
};
// 生成相似的数据集
const generateSimilarData = (): number[][] => {
  // 基于 currentChatData 生成一个相似的数据集，y 轴数据在 -10 到 10 范围内波动
  let data = currentChatData.value.map(point => {
    let newY = point[1] + (Math.random() * 16 - 12); // 生成 -10 到 10 之间的随机数
    return [point[0], newY];
  });
  return data;
};
const updatecurrentIndex = ref<number>(0);
// 更新数据
const updateData = () => {
  // 切换到下一个数据集
  updatecurrentIndex.value = (updatecurrentIndex.value + 1) % dataSets.value.length;
  currentChatData.value = dataSets.value[updatecurrentIndex.value];
  // 重新绘制图表
  initHighCharts(); // 确保 initHighCharts 在 setup 中可用
};

import type { Options } from 'highcharts';
const currentChatData = ref<number[][]>([
  [0, 316], [1, 320]
]);
const initHighCharts = () => {
  const options: Options = {
    accessibility: {
      enabled: false
    },
    tooltip: {
      enabled: false
    },
    chart: {
      // zoomType: 'x',
      backgroundColor: 'rgba(0,0,0,0)',
      animation: false,
    },
    plotOptions: {
      series: {
        animation: false
      }
    },
    title: {
      text: undefined
    },
    xAxis: {
      min: currentChatData.value[0][0],
      max: currentChatData.value[currentChatData.value.length - 1][0],
      labels: {
        enabled: false
      },
      visible: false, // 如果有问题，可以改为 enabled: false
    },
    yAxis: {
      title: {
        text: null
      },
      labels: {
        enabled: false
      },
      visible: false, // 如果有问题，可以改为 enabled: false
    },
    credits: {
      enabled: false
    },
    legend: {
      enabled: false
    },
    series: [{
      type: 'line',
      color: 'red', // 使用 color 代替 lineColor
      data: currentChatData.value,
      lineWidth: 1,
      marker: {
        symbol: 'triangle',
        radius: 2,
      },
    }]
  };
  Highcharts.chart('container', options);
}

以下为vue2+JavaScript频谱跳动算法（省略参数定义）

    generateDataSets() {
      // 清空现有的数据集
      this.dataSets = [];
      // 第一个数据集保持不变，直接使用 this.currentChatData
      // this.dataSets.push(this.currentChatData);

      // 基于 currentChatData 生成两个相似的数据集
      for (let i = 0; i < 4; i++) {
        let dataSet = this.generateSimilarData();
        this.dataSets.push(dataSet);
      }
    },
    generateSimilarData() {
      // 基于 currentChatData 生成一个相似的数据集，y 轴数据在 -10 到 10 范围内波动
      let data = this.currentChatData.map(point => {
        let newY = point[1] + (Math.random() * 16 - 12); // 生成 -10 到 10 之间的随机数
        return [point[0], newY];
      });
      return data;
    },

    updateData() {
      // 切换到下一个数据集
      this.updatecurrentIndex = (this.updatecurrentIndex + 1) % this.dataSets.length;
      this.currentChatData = this.dataSets[this.updatecurrentIndex];
      // 重新绘制图表
      this.initHighCharts();
    },