echarts 时间曲线图_制作按时间每秒实时更新的echarts折线图

有时候我们的图表需要根据后台数据每秒实时更新，那么用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 {

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 {

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: [{

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}'

}

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折线图相关推荐

数据库数据显示在java表中_实现从数据库读取数据显示在前台echarts图表里，图表可根据数据库数据实时更新。效果如图...
实现从数据库读取数据显示在前台echarts图表里,图表可根据数据库数据实时更新.效果如图实现步骤 - 1.创建数据表 - 2.建立Java Web Project - 3.创建Bean对象 - ...
native react 折线图_【详解】纯 React Native 代码自定义折线图组件(译)
本文为 Marno 翻译,转载必须保留出处! 公众号[ Marno ],关注后回复 RN 加入交流群 React Native 优秀开源项目大全:http://www.marno.cn 一.前言在移 ...
mysql根据当前时间删除_从日期时间早于另一项日期时间的Mysql表中删除
我有一些困难,使我的MySQL查询正确.当前状态如下: 我有一个包含Todo的表,其中datetime字段已更改为(在插入/更新时设置为当前datetime) 如果有20个以上的项目的"是否 ...
java时间错误_更改操作系统时间时睡眠（）中的Java错误：任何解决方法？
让我烦恼的错误与this ticket相同.基本上,如果您将OS时钟更改为过去的日期,则更改时正在休眠的所有线程都不会被唤醒. 我正在开发的应用程序意味着24/24运行,我们希望能够在不停止的情况下更 ...
熔断器熔断时间标准_保险丝熔断时间标准保险丝熔断标准
n-4524 am 250-110612-11w 4a 250v 熔断保险丝韩国牌子 2018年12月1日保险丝的中部热,当这一点的温度超过其熔点时,保险丝就被熔断,电流终止. 事实上,对主要的短 ...
计算机右下角时间格式,电脑右下角时间格式_电脑右下角时间不准
2016-12-10 14:32:21 你好,据我所知,WIN7系统设置电脑时间无法显示秒数.即使在时间设置格式中加入了秒SS,电脑右下角托盘中还是只显示到分.且没有必要显示到秒,若要暂时显示到秒,可 ...
mysql库存自动更新_秒杀库存需不需要实时更新到mysql？
秒杀系统, 小库存场景,瞬间抢购完成的case,譬如iphone 11 上亿人抢一个,可通过使用事务的悲观锁的实现(为了降低并发冲突,可对于事务内要读取且后续要基于此做更新的select语句 + f ...
ios pusher使用_如何使用JavaScript和Pusher实时更新用户状态
ios pusher使用 by Rahat Khanna 通过拉哈特·汉娜如何使用JavaScript和Pusher实时更新用户状态 (How to update a User's Status i ...
php 实时更新内容_亿级视频内容如何实时更新？优酷视频背后的技术揭秘
简介: 优酷视频内容数据天然呈现巨大的网络结构,各类数据实体连接形成了数十亿顶点和百亿条边的数据量,面对巨大的数据量,传统关系型数据库往往难以处理和管理,图数据结构更加贴合优酷的业务场景,图组织使用包 ...

echarts 时间曲线图_制作按时间每秒实时更新的echarts折线图

echarts 时间曲线图_制作按时间每秒实时更新的echarts折线图相关推荐

最新文章

热门文章