Echarts实现以秒为单位的动态三条折线图显示

最新推荐文章于 2024-06-22 17:46:34 发布

CQUST-XMY

最新推荐文章于 2024-06-22 17:46:34 发布

阅读量1.2k

点赞数

分类专栏： Ecahrts 文章标签： echarts javascript ecmascript

本文链接：https://blog.youkuaiyun.com/XMY_UPUPUP/article/details/126252445

版权

本文介绍了如何使用Echarts库创建一个动态更新且以秒为单位的折线图，同时提供了详细的代码示例，允许用户通过滑动条调整显示的数据范围。展示了横轴细节图和完整的HTML实现，方便开发者直接应用或进行自定义扩展。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先贴一下效果图（是动态显示数据，并且下面的拉动条可以缩小数据显示的范围）

在这里插入图片描述

横轴细节图：

在这里插入图片描述

直接贴完整代码：（同志们可以按照需要修改自己想要的折线条数和其他附加功能，本人在这里就保证单独下面这个html文件就可以运行起来）

<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
<meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0">

<div style="height: 100%;">
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="container" style="height:50%;"></div>
    <div id="container1" style="height:50%;"></div>
    <!-- <div id="container2" style="height:300px;"></div> -->
</div>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>

<script>
let dom = document.getElementById("container");
    let myChart = echarts.init(dom);
    let app = {
   };
 
    let option;
 
    let base = new Date();
    let now = new Date(base);
    
    let date = [];
    let data_yellowGreen_first = [];
    let data_purple = [];
    let data_blue=[];//蓝色光
 
    let yellowGreen=140;
    let purple=0;
    let blue=540;//蓝色光

 
    function addData(shift) {
   
        let time = new Date();
        now = [time.getHours(), time.getMinutes(), time.getSeconds()].join(':');
        date.push(now);

        getData();
        data_yellowGreen_first.push(yellowGreen);
        data_purple.push(purple);
        data_blue.push(blue)
 
        if (shift) {
   
            date.shift();
            data_yellowGreen_first.shift();
            data_purple.shift();
            data_blue.shift()
        }
        now = new Date(+new Date(now) + 1000);
    }
 
    function getData() {
   
        // axios.get("/show.cgi?type=103").then((res) => {
   
        //     CPU = res.data.data.CPU;
        //     Memory = res.data.data.Memory;
        // });
        // CPU=Math.random() * 21+10;
        // Memory=Math.random()*30+5;
        let randomNumber_yellowGreen=Math.random() * 60;
        let t;
        let tt=Math.random();
        if(</

最低0.47元/天解锁文章