有时候我们的图表需要根据后台数据每秒实时更新，那么用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)

]

}

}

var value = Math.random() * 1000;

for (var i = 0; i < 60; i++) {

data.push(randomData());

}

// 模拟数据完毕

2.折线图每秒更新，我们要实现这个效果需要每秒刷新一次数据和折线图

理清楚思路就简单了。

上代码：

function initEchars() {

console.log("初始化执行-initEchars");

var self = this;

// 初始化echarts

var myChart1 = echarts.init(document.getElementById("chart1"));

// 模拟数据开始

// 每秒更新数据，图标共显示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)

]

}

}

var value = Math.random() * 1000;

for (var i = 0; i < 60; i++) {

data.push(randomData());

}

// 模拟数据完毕

// 使用定时器每秒更新数据

self.intervalId = setInterval(function() {

//模拟获取数据异步请求，模拟数据更新

let item = randomData()

if (data.length < 60) {

data.push(item);

} else {

data.shift();

data.push(item);

}

console.log(data)

// 更新数据后push进data数据

let option1 = {

tooltip: {

trigger: 'axis',

formatter: function(params) {

params = params[0];

var date = new Date(params.name);

return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];

},

axisPointer: {

animation: false

}

},

grid: {

x: 35,

y: 35,

x2: 35,

y2: 35

},

xAxis: {

type: 'time',

splitNumber: 30,

axisLine: {

show: false

},

axisTick: {

show: false

},

axisLabel: {

show: true

},

splitLine: {

lineStyle: {

color: '#d9eaf4'

}

},

minorSplitLine: {

show: true,

lineStyle: {

color: '#117dbb'

}

},

triggerEvent: true

},

yAxis: {

type: 'value',

boundaryGap: [0, '100%'],

// max:100,

axisLine: {

show: false

},

axisTick: {

show: false

},

axisLabel: {

show: true

},

splitLine: {

lineStyle: {

color: '#d9eaf4'

}

},

minorSplitLine: {

show: true,

lineStyle: {

color: '#117dbb'

}

}

},

series: [{

name: '模拟数据',

type: 'line',

showSymbol: false,

hoverAnimation: false,

areaStyle: {

normal: {

//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上

color: "#f1f6fa" //背景渐变色

// lineStyle: { // 系列级个性化折线样式

// width: 3,

// type: 'solid',

// color: "#0edef7"

// }

}

},

itemStyle: {

normal: {

color: "#4a9ccb", //折线点的颜色

lineStyle: {

color: "#4a9ccb", //折线的颜色

width: 1,

}

}

},

markPoint: {

data: [

[{

symbol: 'none',

x: '95%',

yAxis: data[data.length - 1].value[1]

}, {

symbol: 'circle',

label: {

normal: {

position: 'start',

formatter: '实时数据\n{c}'

}

},

name: '实时数据',

value: data[data.length - 1].value[1],

xAxis: data[data.length - 1].value[0],

yAxis: data[data.length - 1].value[1]

}]

]

},

data: data

}]

};

// 更新echarts图表

myChart1.setOption(option1, true);

}, 1000);

},

这次写了很多注释😄相信可读性提高了不少哈哈

大家可以根据自己需要，再按需做调整！