有时候我们的图表需要根据后台数据每秒实时更新，那么用echarts应该如何实现呢？.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);
},
这次写了很多注释😄相信可读性提高了不少哈哈
大家可以根据自己需要，再按需做调整！
