以下为Vue3+typescript
const pointSpacing = ref<number>(0);
const updateInterval = ref<number | undefined>(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<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 中可用
};
以下为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)
},