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

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

Echarts实现以秒为单位的动态三条折线图显示_第1张图片

横轴细节图:

在这里插入图片描述

直接贴完整代码:(同志们可以按照需要修改自己想要的折线条数和其他附加功能,本人在这里就保证单独下面这个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/[email protected]/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(tt

你可能感兴趣的:(Ecahrts,echarts,javascript,ecmascript)