【Echarts 实战指南】解锁动态历史曲线之谜

在工作中，大家是否曾遇到过这样一种需求呢？需获取设备最近 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>