看了一些原有的時間軸設定,有些不太符合自己的需求,根據自己的需求對官方的折線時間軸進行了一些改變;
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var data = [];
var time = []
var starTime = 30 * 60 * 1000 // 這個是當前時間向前取值,我在這裏設置的是半個小時
var times = new Date((+new Date() - starTime)) //X軸開始的時間,可以自行設置
function initDate(value){ //時間格式化
if(value < 9){
return '0' + value
}else{
return value
}
}
for(var i = 0 ; i < 7 ; i++){ //X軸上顯示多少個刻度
time.push(initDate(times.getMonth() + 1) + '/' + initDate(times.getDate()) + ' ' + initDate(times.getHours()) + ':' + initDate((times.getMinutes() + (i * 5))));
data.push(Math.round(Math.random() * 30 + 10))
}
option = {
title: {
text: '動態數據 + 時間座標軸'
},
tooltip: {
trigger: 'axis',
formatter: function (params) {
params = params[0];
return params.name + ':' + params.value;
},
axisPointer: {
animation: false
}
},
xAxis: {
type: 'category',
splitLine: {
show: false
},
data:time
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
splitLine: {
show: false
}
},
series: [{
name: '模擬數據',
type: 'line',
showSymbol: false,
hoverAnimation: false,
data: data
}]
};
// 設置定時器
setInterval(function () {
var now = new Date()
//這裏就是先刪除第一個,然後把當前時間放上去,可以根據需求進行改變
time.shift()
time.push(initDate(now.getMonth() + 1) + '/' + initDate(now.getDate()) + ' ' + initDate(now.getHours()) + ':' + initDate( now.getMinutes() ) )
data.shift()
data.push(Math.round(Math.random() * 30 + 10))
//最後就是重新繪製echarts
myChart.setOption({
series:{
data:data,
},
xAxis:{data:time}
})
}, 3000);