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