echarts 时间曲线图_制作按时间每秒实时更新的echarts折线图
有時(shí)候我們的圖表需要根據(jù)后臺(tái)數(shù)據(jù)每秒實(shí)時(shí)更新，那么用echarts應(yīng)該如何實(shí)現(xiàn)呢？2020.11.27發(fā)現(xiàn)篇文章很多人關(guān)注，但之前寫(xiě)的不是很清楚，今天更新下，大家有問(wèn)題可以也留言討論。這是一個(gè)仿win10任務(wù)管理器的設(shè)備信息監(jiān)控。
首先看示例：
圖中的折線(xiàn)會(huì)每秒向右滾動(dòng)。
思路：
1.首先這是個(gè)echarts的折線(xiàn)圖，例如顯示60s數(shù)據(jù)，我們需要先初始化一個(gè)包含60條數(shù)據(jù)data數(shù)組。
// 每秒更新數(shù)據(jù)，圖標(biāo)共顯示60s數(shù)據(jù)，所以要第一次渲染初始化60條數(shù)據(jù)
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());
}
// 模擬數(shù)據(jù)完畢
2.折線(xiàn)圖每秒更新，我們要實(shí)現(xiàn)這個(gè)效果需要每秒刷新一次數(shù)據(jù)和折線(xiàn)圖
理清楚思路就簡(jiǎn)單了。
上代碼：
function initEchars() {
console.log("初始化執(zhí)行-initEchars");
var self = this;
// 初始化echarts
var myChart1 = echarts.init(document.getElementById("chart1"));
// 模擬數(shù)據(jù)開(kāi)始
// 每秒更新數(shù)據(jù)，圖標(biāo)共顯示60s數(shù)據(jù)，所以要第一次渲染初始化60條數(shù)據(jù)
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());
}
// 模擬數(shù)據(jù)完畢
// 使用定時(shí)器每秒更新數(shù)據(jù)
self.intervalId = setInterval(function() {
//模擬獲取數(shù)據(jù)異步請(qǐng)求，模擬數(shù)據(jù)更新
let item = randomData()
if (data.length < 60) {
data.push(item);
} else {
data.shift();
data.push(item);
}
console.log(data)
// 更新數(shù)據(jù)后push進(jìn)data數(shù)據(jù)
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: '模擬數(shù)據(jù)',
type: 'line',
showSymbol: false,
hoverAnimation: false,
areaStyle: {
normal: {
//顏色漸變函數(shù) 前四個(gè)參數(shù)分別表示四個(gè)位置依次為左、下、右、上
color: "#f1f6fa" //背景漸變色
// lineStyle: { // 系列級(jí)個(gè)性化折線(xiàn)樣式
// width: 3,
// type: 'solid',
// color: "#0edef7"
// }
}
},
itemStyle: {
normal: {
color: "#4a9ccb", //折線(xiàn)點(diǎn)的顏色
lineStyle: {
color: "#4a9ccb", //折線(xiàn)的顏色
width: 1,
}
}
},
markPoint: {
data: [
[{
symbol: 'none',
x: '95%',
yAxis: data[data.length - 1].value[1]
}, {
symbol: 'circle',
label: {
normal: {
position: 'start',
formatter: '實(shí)時(shí)數(shù)據(jù)\n{c}'
}
},
name: '實(shí)時(shí)數(shù)據(jù)',
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);
},
這次寫(xiě)了很多注釋😄相信可讀性提高了不少哈哈
大家可以根據(jù)自己需要，再按需做調(diào)整！
總結(jié)
以上是生活随笔為你收集整理的echarts 时间曲线图_制作按时间每秒实时更新的echarts折线图的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 骁龙8小屏旗舰？小米12X正式确认：王腾
- 下一篇： unity重定向_unity3D游戏开发