以下为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();
},