Echarts 展示两条动态数据曲线
利用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);
Echarts 展示两条动态数据曲线的更多相关文章
- Echarts通过Ajax实现动态数据加载
Echarts(3.x版)官网实例的数据都是静态的,实际使用中往往会要求从服务器端取数据进行动态显示,官网教程里给出的异步数据加载很粗略,下面就以官网最简单的实例为例子,详细演示如下过程:1.客户端通 ...
- 利用Hive实现求两条相邻数据时间差
1.Hive row_number() 函数的高级用法 row_num 按照某个字段分区显示第几条数据 select imei,ts,fuel_instant,gps_longitude,gps_la ...
- MYSQL 当有两条重复数据时 保留一条
delete from test where id in (select id from (select max(id) as id,count(text) as count from test ...
- 详细介绍如何计算两条折线的交点并使用Echarts展示以及图表优化
1.背景 前段时间公司有个需求,需要在一个图表中展示两条折线,并且绘制出两条线的交点.为了满足需求大哥的需求,我也是着实想了有一会.下面我就把具体的实现过程给大家展示一下. 1.1.ECharts 简 ...
- Echarts基于动态数据初步使用 及问题 代码记录.
ECHARTS 插件 基本的动态数据展示(横向图) 下载 echarts.commn.min.js文件 在页面中进行引用, 并为Echarts图形准备一个div盒子 <!-- 引入插件 --&g ...
- mysql 数据库查询最后两条数据
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/u011925175/article/details/24186917 有一个mysql数据库的 ...
- echarts实现多条可拖动节点的折现图
这篇博文主要是利用echarts实现两条以及多条可拖动节点的曲线,demo脱胎于官方demo,在官方demo的基础上添加了另一条曲线.因为之前写过一篇在vue中使用echarts实现可拖动节点的折线图 ...
- for循环每次展示固定条数的数据的写法。
第一种是一组json数据实现分页的效果,也就是每一次展示5条数据.第二种场景是每一秒展示4条数据,直到全部显示完.两种思路都做个笔记记录下. var nums = 5; //每页出现的数量 var p ...
- ViewPager使用记录2——展示动态数据
ViewPager是v4支持库中的一个控件,相信几乎所有接触Android开发的人都对它不陌生.之所以还要在这里翻旧账,是因为我在最近的项目中有多个需求用到了它,觉得自己对它的认识不够深刻.我计划从最 ...
随机推荐
- CentOS6.5 mini安装到VirtualBox虚拟机中
下载Oracle VM VirtualBox 下载下来安装 下载镜像 http://archive.kernel.org/centos-vault/6.5/isos/i386/CentOS-6.5-i ...
- ctf实验吧逻辑问题
ctf5.shiyanbar.com/web/5/index.php 绕开. php题,习惯先看源码,F12,结果发现了 url输入了一看 告诉了我们后台逻辑.分析一下,发现只要使得$row[&quo ...
- 解决ionic5多个模态关闭一个其他不显示的问题
ionic5 modal使用过程中,在模态窗中打开另外一个模态窗,浏览器中显示正常,但是andorid8系统真机调试时,关闭最上层模态窗,上级模态窗DOM中存在,但是不显示. 原因是android版本 ...
- Java | 字符串的使用 & 分析
字符串 字符串广泛应用 在 Java 编程中,在 Java 中字符串属于对象,在程序中所有的双引号字符串,都是String类的对象. 字符串的特点 1.字符串的内容永不可变. 2.正在是因为字符串的不 ...
- 访问其他人的vue项目
本地git拉取项目 git clone git@git路径 项目clone到本地后 1.工具命令行切换到此项目路径下 cd 路径名称 2.首先要下载项目所需要的资源包 npm install 这里会 ...
- 浅淡fhq_Treap
浅淡 \(fhq\_Treap\) 前言 fhq_Treap \(yyds\)! \(sto\ FHQ\ orz\) 机房大佬们都打的 \(Splay\) 只有蒟蒻打的 \(fhq\) (防火墙)(范 ...
- 夏壹队——nabcd
我们团队项目名称是TD校园通,无课表查询你作为主要功能,是一个亮眼的功能. 我们的无课表查询功能主要解决大家平时上自习还要到教学楼拍照,教室课程情况也有断更的时候,而这个功能就解决大家的这个功能,能够 ...
- 北京大公司二面:了解Redis持久化机制吗?
今日总结 Redis持久化机制:RDB和AOF RDB持久化:定时任务,BGSAVE命令 fork一个子进程生成RDB文件(二进制) AOF持久化:根据配置将写命令存储至日志文件中,顺序写&& ...
- P4334 [COI2007] Policija
P4334 [COI2007] Policija 题意 一个无重边的无向图,每次询问删掉一条边或删掉一个点后两个点是否联通. 思路 连通性问题,我们可以考虑使用广义圆方树解决. 对于删掉一个点的情况: ...
- 【排序+模拟】谁拿了最多奖学金 luogu-1051
题目描述 某校的惯例是在每学期的期末考试之后发放奖学金.发放的奖学金共有五种,获取的条件各自不同: 院士奖学金,每人$ 8000 $元,期末平均成绩高于\(80\)分(\(>80\)),并且在本 ...