广东在线网站建设,服务器学生,打开2345网址大全,海口专业做网站公司哪家好有时候我们的图表需要根据后台数据每秒实时更新#xff0c;那么用echarts应该如何实现呢#xff1f;2020.11.27发现篇文章很多人关注#xff0c;但之前写的不是很清楚#xff0c;今天更新下#xff0c;大家有问题可以也留言讨论。这是一个仿win10任务管理器的设备信息监控…有时候我们的图表需要根据后台数据每秒实时更新那么用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;// 初始化echartsvar 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);},这次写了很多注释相信可读性提高了不少哈哈大家可以根据自己需要再按需做调整
