在工作中，大家是否曾遇到过这样一种需求呢？需获取设备最近 10 分钟的历史数据。设备实时数据每 2 秒推送一次，且要把历史数据曲线变成动态变化的状态。倘若设备最近 10 分钟的历史数据为 20 个点，那么现在每 2 秒就要将最前面的点删除，同时推送最新的数据。一旦数据发生变化，便加载历史曲线函数，从而达成动态效果。
template
<template>
<a-card shadow="none" style="margin:20px 0 0 20px" title="">
<div class="item" ref="chartContainer6"></div>
</a-card>
</template>
script
<script setup>
import * as echarts from 'echarts'
import { ref, onMounted, onUnmounted } from 'vue'
let chartContainer6 = ref(null)
//假设这是最近 10 分钟的历史数据，实际项目中请求接口
const data1 = ref([20, 25, 24, 21, 30, 26, 35, 30, 31, 36, 28, 25, 31, 36, 19, 22, 50, 40, 25, 30]);
const data2 = ref([40, 56, 42, 65, 45, 48, 42, 52, 45, 50, 48, 45, 51, 56, 49, 52, 50, 60, 49, 51]);
const time = ref(['17:00:00', '17:00:02', '17:00:04', '17:00:06', '17:00:08', '17:00:10', '17:00:12', '17:00:14', '17:00:16', '17:00:18',
'17:00:20', '17:00:22', '17:00:24', '17:00:26', '17:00:28', '17:00:30', '17:00:32', '17:00:34', '17:00:36', '17:00:38'
]);
//当前时间：时分秒
function getCurrentTime() {
const now = new Date();
let hours = now.getHours();
let minutes = now.getMinutes();
let seconds = now.getSeconds();
hours = hours < 10 ? '0' + hours : hours;
minutes = minutes < 10 ? '0' + minutes : minutes;
seconds = seconds < 10 ? '0' + seconds : seconds;
return `${hours}:${minutes}:${seconds}`;
}
function getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;
}
// 生成随机数并推入数组
function pushRandomData() {
// 删除数组的第一个元素
if (data1.value.length > 0) data1.value.shift();
if (data2.value.length > 0) data2.value.shift();
if (time.value.length > 0) time.value.shift();
// 添加新的随机数值
const randomValue1 = Math.floor(getRandomArbitrary(20, 40));
const randomValue2 = Math.floor(getRandomArbitrary(40, 60));
data1.value.push(randomValue1);
data2.value.push(randomValue2);
time.value.push(getCurrentTime());
}
function realtimeCurve() {
const chart = echarts.init(chartContainer6.value);
const options = {
tooltip: {
show: true,
trigger: 'axis'
},
legend: {
show: true,
type: "scroll",
bottom: 0,
textStyle: {
color: '#fff'
}
},
grid: {
top: '10%',
left: '5%',
right: '2%',
bottom: '15%',
containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: true,
axisLabel: {
textStyle: {
color: '#11EEE1',
padding: 6,
fontSize: 10
},
formatter: function (data) {
return data
}
},
splitLine: {
show: false,
lineStyle: {
color: "#11EEE1"
},
},
axisLine: {
show: true,
textStyle: {
color: '#11EEE1',
},
},
axisTick: {
show: true,
textStyle: {
color: '#11EEE1',
},
},
data: time.value
}],
yAxis: [{
name: '',
splitLine: {
show: false,
lineStyle: {
color: "#11EEE1"
},
},
axisLine: {
show: true,
textStyle: {
color: '#11EEE1',
},
},
axisTick: {
show: true,
textStyle: {
color: '#11EEE1',
},
},
axisLabel: {
show: true,
textStyle: {
color: '#11EEE1',
padding: 6,
},
formatter: function (value) {
if (value === 0) {
return value
}
return value
}
},
}],
series: [{
name: 'High Press',
type: 'line',
symbol: 'circle',
showAllSymbol: true,
symbolSize: 0,
smooth: true,
lineStyle: {
normal: {
width: 2,
color: "rgba(33,150,243, 1)",
}
},
itemStyle: {
color: "rgba(33,150,243, 1)",
borderWidth: 2
},
tooltip: {
show: true
},
data: data1.value
}, {
name: 'Low Press 1',
type: 'line',
symbol: 'circle',
showAllSymbol: true,
symbolSize: 0,
smooth: true,
lineStyle: {
normal: {
width: 2,
color: "rgba(76,175,80, 1)",
}
},
itemStyle: {
color: "rgba(76,175,80, 1)",
borderWidth: 2
},
tooltip: {
show: true
},
data: data2.value
}]
}
chart.setOption(options);
}
// 设置定时器，每2秒执行一次
intervalId = setInterval(() => {
pushRandomData(); // 当前时间
realtimeCurve(); // 历史曲线
}, 2000);
onMounted(() => {
realtimeCurve()
});
onUnmounted(() => {
if (intervalId) {
clearInterval(intervalId);
}
});
</script>
