利用Echarts 展示兩條動態資料曲線，每1秒重新整理一下資料，在echart官網例子基礎上修改，修改了模擬資料的生成方式、生成數量，曲線數量，最總效果圖如下：
詳細程式碼如下：
遇到的主要問題點，
1，在生成模擬資料時，資料來源格式很重要，格式不正確，無法正常顯示。
new Date(parseInt(sttimestamp+i*1000)).toLocaleString('chinese',{hour12:false});
上述語句 toLocaleString()，顯示的結果 2021/8/21 下午4:07:40，若要顯示為24小時制，需要新增引數 'chinese',{hour12:false}。
2，資料橫軸顯示格式，預設會把毫秒顯示出來，且不統一：
在橫軸的樣式裡增加格式限制，即可按要求顯示：
axisLabel:{
formatter:'{HH}:{mm}:{ss}'
//顯示24小時制，兩位分鐘，兩位秒
}
完整程式碼如下：
var data = [];
var data2= []; var curtimestamp = Date.parse(new Date());
var sttimestamp = curtimestamp - 100*1000 ;
var temptime;
var tm = Date.now()
// 生成初始資料100條
for (var i = 0; i < 100; i++) {
temptime = new Date(parseInt(sttimestamp+i*1000)).toLocaleString('chinese',{hour12:false});
data.push({name:temptime,value:[temptime,Math.random()*10+150]});
data2.push({name:temptime,value:[temptime,Math.random()*10+100]});
}
// 顯示設定
option = {
title: {
text: '實時資料展示',
left:'5%'
},
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
}
},
xAxis: {
type: 'time',
splitLine: {
show: false
},
minInterval: 5,
axisLabel:{
formatter:'{HH}:{mm}:{ss}'
}
},
yAxis: {
axisLine:{
show:true
},
type: 'value',
boundaryGap: [0, '100%'],
splitLine: {
show: false
}
},
series: [{
name: 'LineA',
type: 'line',
showSymbol: false,
hoverAnimation: false,
data: data
},{
name: 'LineB',
type: 'line',
color:'#2f4f4f',
showSymbol: false,
hoverAnimation: false,
data: data2
}]
}; setInterval(function () { // for (var i = 0; i < 5; i++) {
curtimestamp = Date.parse(new Date());
temptime = new Date(parseInt(curtimestamp)).toLocaleString('chinese',{hour12:false});
data.shift();
data.push({name:temptime,value:[temptime,Math.random()*10+150]}); data2.shift();
data2.push({name:temptime,value:[temptime,Math.random()*10+120]});
// } myChart.setOption({
series: [{
data: data
},{
data: data2
}
]
});
}, 1000);