echarts 折线图随时间动态添加（能跳动）

最新推荐文章于 2024-07-09 17:41:07 发布

原创最新推荐文章于 2024-07-09 17:41:07 发布 · 3.7k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#echarts

本文介绍了如何使用Echarts实现动态数据更新，同时根据用户选择的间隔来增加X轴的点。通过WebSocket获取每两秒返回的数据，并结合用户设置的更新频率（如5秒、15秒等）决定是否增加图表上的点。关键代码展示了如何在满足特定条件时进行原点跳动或正常增加点，并更新X轴。

文章目录

前言
具体代码

前言

这是记录一下echarts的特殊的使用方法。需求是用户需要看到每次数据的更新，且x轴也是根据用户的选择显示
数据是使用websocket去获取的，因为数据是两秒一次的返回，但是点的增加是根据用户的选择来增加的，如五秒一增加、十五秒一增加。
在这里插入图片描述

具体代码

这是判断是否需要增加点，意思是x轴增加数据

/*
perviousTime用户打开的时间段；
currentTime现在跳动的时间段；
oSen是当前时间的秒；
op是图表的数据
*/
let op = this.myChart.series;
// 如果用户打开的时间段和现在的时间段相等就原点跳动，反之则正常跳动
/* 原理是如果用户打开是1秒（即oSen是1），要求是5秒一跳动（意味着逢五进一）；
无论是用户打开的还是现在的都设为5是终点（也就是初始值currentTime = perviousTime ），意思是到第五秒才增加；
现在的是oSen是3，则5为终点（currentTime），则this.perviousTime == this.currentTime为true，原点跳动；
如果现在时间是7，则10为终点（currentTime），则this.perviousTime == this.currentTime为false，正常跳动，且currentTime = perviousTime；
同理，如果是9，原点跳动，如果是13，正常跳动。。。
*/
if (perviousTime == currentTime && oSen < 60) {
          op.map(j => {
          // 这是有多条线；原点跳动
                let t = j.xData[j.xData.length - 1] // x轴不变
                let v = 11   // 这是y轴数据
                j.removePoint(-1)   // 这是删除线上的最后一个点
                j.addPoint([t, v], true)
            })
        } else {
          console.log('zeng')
            op.map(j => {
            // 这是有多条线；x轴增加
                let t = i.ts  // 新的x的点
                let v = 22  // y轴数据
                j.addPoint([t, v], true)
            })
          perviousTime = currentTime
        }