echarts 时间曲线图_制作按时间每秒实时更新的echarts折线图

有时候我们的图表需要根据后台数据每秒实时更新，那么用echarts应该如何实现呢？2020.11.27发现篇文章很多人关注，但之前写的不是很清楚，今天更新下，大家有问题可以也留言讨论。这是一个仿win10任务管理器的设备信息监控。

首先看示例：

图中的折线会每秒向右滚动。

思路：

1.首先这是个echarts的折线图，例如显示60s数据，我们需要先初始化一个包含60条数据data数组。

// 每秒更新数据，图标共显示60s数据，所以要第一次渲染初始化60条数据

var data = [];

var now = +new Date();

var oneDay = 1000;

function randomData() {

now = new Date(+now + oneDay);

value = Math.random() * 100;

var valueName = now.getFullYear() + '/' + (now.getMonth() + 1) + '/' + now.getDate() +

' ' + (now.getHours() >= 10 ? now.getHours() : '0' + now.getHours()) + ':' +

(now.getMinutes() >= 10 ? now.getMinutes() : '0' + now.getMinutes()) +

':' + (now.getSeconds() >= 10 ? now.getSeconds() : '0' + now.getSeconds());

return {

name: now.toString(),

value: [

valueName,

Math.round(value)

]

}

}