重磅算法：通信设备虚拟仿真-波形根据频率、带宽变化算法（Vue3+typescript）结尾附vue2+JavaScript

 以下为Vue3+typescript

const pointSpacing = ref(0);
const updateInterval = ref(undefined);
// 更新图表数据的函数
const UpdateChartTest = (centerFrequnency: number, bandwidth: number, baseFreq = 800, baseBW = 100) => {
  if (updateInterval.value) {
    clearInterval(updateInterval.value);
  }
  //以下为带宽逻辑 也就是当前带宽要显示多少个点
  let numPoints = chartData.value.length;  // 使用数据的实际长度(因为是算基础值，所以不需要更新)
  const pointSpacingValue = parseInt((numPoints / baseBW).toString()); // 如果100MB的情况就是1MB代表19个点
  pointSpacing.value = pointSpacingValue;
  console.log("每MHz代表几个点" + pointSpacing.value);
  const pointCount = pointSpacing.value * bandwidth; // 当前带宽显示多少个点
  console.log("当前带宽要显示点的个数" + pointCount);
  // 确定需要扩展的倍数 就是如果带宽太宽 扩展数据
  let multiplier = Math.ceil(bandwidth / baseBW);
  if (multiplier < 1) multiplier = 1;
  // 扩展 chartData
  let extendedChartData: number[][] = [];
  for (let i = 0; i < multiplier; i++) {
    extendedChartData.push(...chartData.value);
  }
  // 重新编号 extendedChartData，从索引 0 开始
  extendedChartData = extendedChartData.map((item, index) => [index, item[1]]);
  console.log("当前的点数个数：" + extendedChartData.length);
  console.log(extendedChartData);
  //上述为带宽逻辑 也就是当前带宽要显示多少个点

  //以下为中心频率逻辑 也就是当前中心频率从哪开
  const defaultCenterIndex = Math.floor(numPoints / 2);
  const centerIndexOffset = Math.round((centerFrequnency - baseFreq) * pointSpacing.value);
  let actualCenterIndex = defaultCenterIndex + centerIndexOffset;
  actualCenterIndex %= numPoints;
  if (actualCenterIndex < 0) {
    actualCenterIndex += numPoints;
  }
  console.log("当前中心频率下的实际中心点索引：" + actualCenterIndex);
  //以上为中心频率逻辑 也就是当前中心频率从哪开始

  //以下为计算显示索引逻辑 也就是当前索引由多少到多少
  const displayPoints = 600; // 初始化显示的点数
  const step = Math.max(1, Math.floor(pointCount / displayPoints)); // 计算取点间距

  let indexMin = (actualCenterIndex - Math.floor(pointCount / 2) + extendedChartData.length) % extendedChartData.length;
  let indexMax = (actualCenterIndex + Math.floor(pointCount / 2)) % extendedChartData.length;

  currentChatData.value = [];
  let currentIndex = indexMin;
  while (currentChatData.value.length < displayPoints) {
    currentChatData.value.push([currentChatData.value.length, extendedChartData[currentIndex][1]]);
    currentIndex = (currentIndex + step) % extendedChartData.length;

    // 如果索引跨越了max点，重新计算索引
    if (indexMin < indexMax && currentIndex > indexMax) break;
    if (indexMin > indexMax && currentIndex > indexMax && currentIndex < indexMin) break;
  }
  console.log("indexMin: " + indexMin);
  console.log("indexMax: " + indexMax);
  console.log("取点总数：" + currentChatData.value.length);
  //以上为计算显示索引逻辑 也就是当前索引由多少到多少

  generateDataSets();
  updateInterval.value = setInterval(updateData, 130);
  console.log("当前波形的数据集");
  console.log(currentChatData.value);
};

以下为配套的跳动特效 

//**************频谱绘制模块————跳动特效***************//
// 数据集和当前数据
const dataSets = ref([]);
// 生成数据集
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(0);
// 更新数据
const updateData = () => {
  // 切换到下一个数据集
  updatecurrentIndex.value = (updatecurrentIndex.value + 1) % dataSets.value.length;
  currentChatData.value = dataSets.value[updatecurrentIndex.value];
  // 重新绘制图表
  initHighCharts(); // 确保 initHighCharts 在 setup 中可用
};

 

以下为vue2+JavaScript

    UpdateChartTest(centerFrequnency,bandwidth,baseFreq=800,baseBW=100){
      clearInterval(this.updateInterval);
      //************************以下为带宽逻辑 也就是当前带宽要显示多少个点************************//
      //大于25MB进行扩展数据 1913个点 如果100MB的情况就是1MB代表19个点
      //目前默认为100MB=1913个点 然后基础带宽假设为30MB
      let numPoints = this.chartData.length;  // 使用数据的实际长度(因为是算基础值，所以不需要更新)
      const pointSpacing =parseInt(numPoints/baseBW) //如果100MB的情况就是1MB代表19个点
      this.pointSpacing=pointSpacing
      console.log("每MHz代表几个点"+pointSpacing)
      const pointCount = pointSpacing*bandwidth//当前带宽显示多少个点
      console.log("当前带宽要显示点的个数"+pointCount)
      // 确定需要扩展的倍数 就是如果带宽太宽 扩展数据
      let multiplier = Math.ceil(bandwidth / baseBW);
      if (multiplier < 1) multiplier = 1;
      // 扩展 chartData
      let extendedChartData = [];
      for (let i = 0; i < multiplier; i++) {
        extendedChartData.push(...this.chartData);
      }
      // 重新编号 extendedChartData，从索引 0 开始
      extendedChartData = extendedChartData.map((item, index) => [index, item[1]]);
      console.log("当前的点数个数：" + extendedChartData.length);
      console.log(extendedChartData)
      //************************上述为带宽逻辑 也就是当前带宽要显示多少个点************************//



      //************************以下为中心频率逻辑 也就是当前中心频率从哪开始************************//
      //假设中心频率默认为800MHz
      // 默认中心频率下的中心点索引
      const defaultCenterIndex = Math.floor(numPoints / 2);
      //算出当前频率和中心频率偏移的点数 用差多少MHz*每MHz代表的点数（当前1MB19个点）
      const centerIndexOffset = Math.round((centerFrequnency - baseFreq) * pointSpacing);
      // 计算当前中心频率下的实际中心点索引
      let actualCenterIndex = defaultCenterIndex + centerIndexOffset;
      // 确保中心索引在0到totalPoints-1之间环绕   保证中心索引不超出!!!!!就是比如带宽100MHz只有1914个点，通过计算它就会在1914中循环
      actualCenterIndex %= numPoints;
      if (actualCenterIndex < 0) {
        actualCenterIndex += numPoints;
      }
      console.log("当前中心频率下的实际中心点索引：" + actualCenterIndex);
      //************************以上为中心频率逻辑 也就是当前中心频率从哪开始************************//




      //************************以下为计算显示索引逻辑 也就是当前索引由多少到多少************************//
      // 如果带宽大于600个点，将数据点数量限制为600，并计算取点间距
      const displayPoints = 600; // 初始化显示的点数
      const step = Math.max(1, Math.floor(pointCount / displayPoints)); // 计算取点间距

      // 计算实际显示的索引范围
      let indexMin = (actualCenterIndex - Math.floor(pointCount / 2) + extendedChartData.length) % extendedChartData.length;
      let indexMax = (actualCenterIndex + Math.floor(pointCount / 2)) % extendedChartData.length;

      this.currentChatData = [];
      let currentIndex = indexMin;
      while (this.currentChatData.length < displayPoints) {
        this.currentChatData.push([this.currentChatData.length, extendedChartData[currentIndex][1]]);
        currentIndex = (currentIndex + step) % extendedChartData.length;
        // 如果索引跨越了max点，重新计算索引
        if (indexMin < indexMax && currentIndex > indexMax) break;
        if (indexMin > indexMax && currentIndex > indexMax && currentIndex < indexMin) break;
      }
      console.log("indexMin: " + indexMin);
      console.log("indexMax: " + indexMax);
      console.log("取点总数：" + this.currentChatData.length);
      //************************以上为计算显示索引逻辑 也就是当前索引由多少到多少************************//

      this.generateDataSets()
      this.updateInterval = setInterval(this.updateData, 130);
      console.log("当前波形的数据集")
      console.log(this.currentChatData)
    },