有時候我們的圖表需要根據后臺數據每秒實時更新，那么用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);

},

這次寫了很多注釋😄相信可讀性提高了不少哈哈

大家可以根據自己需要，再按需做調整！

總結

以上是生活随笔為你收集整理的echarts 时间曲线图_制作按时间每秒实时更新的echarts折线图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。