利用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 展示两条动态数据曲线的更多相关文章

  1. Echarts通过Ajax实现动态数据加载

    Echarts(3.x版)官网实例的数据都是静态的,实际使用中往往会要求从服务器端取数据进行动态显示,官网教程里给出的异步数据加载很粗略,下面就以官网最简单的实例为例子,详细演示如下过程:1.客户端通 ...

  2. 利用Hive实现求两条相邻数据时间差

    1.Hive row_number() 函数的高级用法 row_num 按照某个字段分区显示第几条数据 select imei,ts,fuel_instant,gps_longitude,gps_la ...

  3. MYSQL 当有两条重复数据时 保留一条

    delete from test  where id in (select id from (select  max(id) as id,count(text) as count from test ...

  4. 详细介绍如何计算两条折线的交点并使用Echarts展示以及图表优化

    1.背景 前段时间公司有个需求,需要在一个图表中展示两条折线,并且绘制出两条线的交点.为了满足需求大哥的需求,我也是着实想了有一会.下面我就把具体的实现过程给大家展示一下. 1.1.ECharts 简 ...

  5. Echarts基于动态数据初步使用 及问题 代码记录.

    ECHARTS 插件 基本的动态数据展示(横向图) 下载 echarts.commn.min.js文件 在页面中进行引用, 并为Echarts图形准备一个div盒子 <!-- 引入插件 --&g ...

  6. mysql 数据库查询最后两条数据

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/u011925175/article/details/24186917  有一个mysql数据库的 ...

  7. echarts实现多条可拖动节点的折现图

    这篇博文主要是利用echarts实现两条以及多条可拖动节点的曲线,demo脱胎于官方demo,在官方demo的基础上添加了另一条曲线.因为之前写过一篇在vue中使用echarts实现可拖动节点的折线图 ...

  8. for循环每次展示固定条数的数据的写法。

    第一种是一组json数据实现分页的效果,也就是每一次展示5条数据.第二种场景是每一秒展示4条数据,直到全部显示完.两种思路都做个笔记记录下. var nums = 5; //每页出现的数量 var p ...

  9. ViewPager使用记录2——展示动态数据

    ViewPager是v4支持库中的一个控件,相信几乎所有接触Android开发的人都对它不陌生.之所以还要在这里翻旧账,是因为我在最近的项目中有多个需求用到了它,觉得自己对它的认识不够深刻.我计划从最 ...

随机推荐

  1. ubuntu16.04上编译android的可执行文件并调用本地so库

    前言: 找了蛮多资料的,发现目前实现的编译方式大致就两种,一种是直接使用android源码中的编译工具链,另一种就是使用独立的交叉编译工具链,第二种我还在实现中,配置步骤挺多的 ,第一种实现方式挺方便 ...

  2. bugku本地包含

    重点:eval()函数有执行漏洞 函数本身作用,把字符串当成php代码计算. 所以自然想到,可以把我们的写好的php代码写入进去. 题目又暗示在本地,想到flag.php了,所以想办法把文件里面的内容 ...

  3. 关于 IPv6 国家有大动作啦!快来瞅瞅行动计划都说了什么~

    随着进入三伏天开始,杭州就像突然被丢上了炭火炉,没有空调的高温厕所,彻底断绝了二狗子带薪摸鱼的快乐.深感绝望的二狗子只能痛苦地把自己的摸鱼地点改成了空调大开的零食角."哎,真的很不喜欢零食角 ...

  4. 得力e+考勤机更新网络连接

    1.进入APP,"企业信息"最下面"设备" 2.显示对应的设备的在线或离线 3.点击 >>>,点击"离线",连接蓝牙(手机 ...

  5. File类与常用IO流第九章——转换流

    第九章.转换流 字节编码和字符集 编码:按照某种规则将字符以二进制存储到计算机中. 解码:将存储在计算机中的二进制数按照某种规则解析显示出来. 字符编码:Character Encoding ,就是一 ...

  6. 微信小程序云开发-数据库-删除数据

    一.js文件使用.remove()删除单条数据 在js文件中写updategood函数,在函数中使用.doc()指定要删除的数据id,调用.remove()方法删除数据. 二.wxml文件添加[删除] ...

  7. ArcGis API JS 4.X本地化部署与地图的基础使用

    准备工作 首先下载ArcGIS API for JavaScript4.x,这里下载的是4.19. 官方下载地址:https://developers.arcgis.com/downloads/ ar ...

  8. NOI Online 提高组 题解

    来补坑了-- 个人认为三道题难度差不多-- 还有要说一嘴,为啥我在其他网站代码都好好的,复制到 cnblogs 上 Tab 就成 8 空格了?不过也懒得改了. T1 序列 首先,遇到这种加一减一还带附 ...

  9. 【并查集模板】并查集模板 luogu-3367

    题目描述 简单的并查集模板 输入描述 第一行包含两个整数N.M,表示共有N个元素和M个操作. 接下来M行,每行包含三个整数Zi.Xi.Yi 当Zi=1时,将Xi与Yi所在的集合合并 当Zi=2时,输出 ...

  10. 关于hashcode和equals方法说明

    一.前言 我们都知道,要比较两个对象是否相等时需要调用对象的equals()方法,即判断对象引用所指向的对象地址是否相等,对象地址相等时,那么与对象相关的对象句柄.对象头.对象实例数据.对象类型数据等 ...