echarts - 折线图 - 每秒刷新数据并显示
function randomData() {
now = new Date(+now + oneDay);
value = value + Math.random() * 21 - 10;
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 data = [];
var now = +new Date();
var oneDay = 1000;
//var oneDay = 24 * 3600 * 1000;
var value = Math.random() * 1000;
for (var i = 0; i < 60; i++) {
data.push(randomData());
}
var temp = 59;
option = {
title: {
text: '动态数据 + 时间坐标轴'
},
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
},
triggerEvent: true
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
splitLine: {
show: false
}
},
series: [{
name: '模拟数据',
type: 'line',
showSymbol: false,
hoverAnimation: false,
markPoint: {
data: [
[{
symbol: 'none',
x: '95%',
yAxis: data[temp].value[1]
}, {
symbol: 'circle',
label: {
normal: {
position: 'start',
formatter: '实时数据\n{c}'
}
},
name: '实时数据',
value: data[temp].value[1],
xAxis: data[temp].value[0],
yAxis: data[temp].value[1]
}]
]
},
data: data
}]
};
setInterval(function() {
for (var i = 0; i < 5; i++) {
data.shift();
data.push(randomData());
}
//alert(data[999].name)
myChart.setOption({
series: [{
data: data,
markLine: {
data: [
[{
symbol: 'none',
x: '95%',
yAxis: data[temp].value[1]
}, {
symbol: 'circle',
label: {
normal: {
position: 'start',
formatter: '实时数据\n{c}'
}
},
name: '实时数据',
value: data[temp].value[1],
xAxis: data[temp].value[0],
yAxis: data[temp].value[1]
}]
]
}
}]
});
}, 1000);
echarts - 折线图 - 每秒刷新数据并显示的更多相关文章
- echarts折线图,数据切换时(最近七天)绘图不合理现象
echarts折线图,当进行数据切换时存在绘制不合理的问题,数据没错,但绘制不对. 两个0之间的连线应该是平滑直线,如图: 正确的显示: 解决: 在myCharts.setOption(option) ...
- echarts折线图动态改变数据时的一个bug
echarts折线图中当增加dataZoom,修改start大于0的时候,会出现折线混乱,变成竖直的线,绘制有问题. 解决方法,在dataZoom中增加filterMode: 'empty' http ...
- 实现Echarts折线图的虚实转换
需求:医院的体温单,在统计体温时,对于正常情况下统计的体温数据,需要显示实线:对于进行物理降温后统计的体温数据,需要显示虚线. 现有的体温单是运用 Echarts 折线图,统一用实线显示.因此在这基础 ...
- ECharts折线图堆叠设置为不堆叠的方法
下图是ECharts折线图堆叠的官方源码,设置折线图不堆叠只需要将每一个stack的值设置为不一样的名称或者将stack属性删除即可. option = { title: { text: '折线图堆叠 ...
- vue使用axios读取本地json文件来显示echarts折线图
编辑器:HBuilderx axios文档:http://www.axios-js.com/zh-cn/docs/ echarts实例:https://echarts.apache.org/examp ...
- d3.js 教程 模仿echarts折线图
今天我们来仿echarts折线图,这个图在echarts是折线图堆叠,但是我用d3改造成了普通的折线图,只为了大家学习(其实在简单的写一个布局就可以).废话不多说商行代码. 1 制作 Line 类 c ...
- echarts折线图--数据交互
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- eCharts 折线图,动态绑定数据不更新图表的问题,
官方文档 : http://echarts.baidu.com/tutorial.html npm install echarts --save let lineChart = echarts.ini ...
- MVC中使用Echart后台加载数据 实现饼图、折线图、全国地图数据,单击双击事件等
@{ Layout = null; } @if (false) { <script src="~/Js/jquery-easyui-1.5/jquery.min.js"> ...
随机推荐
- 2.Python学习之路
这里主要更新Python每个部分知识点的详细的目录...(知识点目录) Python基础 一.计算机基础 二.Python基础 三.函数 四.常用模块 五.模块和包 六.面向对象 Python进阶 七 ...
- 推荐一款万年历App 诸葛万年历
推荐一款万年历App 诸葛万年历 1 介绍 应用简介: 提供标准和专业的时间信息查询,记录和承载生活中的美好记忆,帮助用户高效快捷的管理个人时间.精美的日期展示和完善的重要事件提醒功能,可以方便安排日 ...
- CentOS7 Hbase 安装(完全分布式)
安装前准备 hadoop安装 zookeeper安装 安装步骤 1.下载 $ wget http://mirror.bit.edu.cn/apache/hbase/2.0.5/hbase-2.0.5- ...
- VSCode批量替换使用注意问题
VSCode批量替换功能很强大,需要注意两点 1.不要搜到文件个数超过到10000时替换,这时替换过程中可能会出错崩溃(也可能是服务器上内存较小导致) 2.不要在搜索中反复替换可能会导致数据错乱 比如 ...
- Password file not found:.../jmxremote.password
jmxremote.password 在jdk/jre/lib/management/下,jmxremote.password.template复制,去掉.template后缀 在配置JMX远程访问的 ...
- Web应急:网站首页被篡改
网站首页被非法篡改,是的,就是你一打开网站就知道自己的网站出现了安全问题,网站程序存在严重的安全漏洞,攻击者通过上传脚本木马,从而对网站内容进行篡改.而这种篡改事件在某些场景下,会被无限放大. 现象描 ...
- Java学习:方法的引用
方法引用(Method references) lambda表达式允许我们定义一个匿名方法,并允许我们以函数式接口的方式使用它.我们也希望能够在已有的方法上实现同样的特性. 方法引用和lambda表达 ...
- Python 学习 第14篇:数据类型(元组和集合)
元组和集合是Python中的基本类型 一,元组 元组(tuple)由小括号.逗号和数据对象构成的集合,各个项通过逗号隔开,元组的特点是: 元组项可以是任何数据类型,也可以嵌套 元组是一个位置有序的对象 ...
- Spring Cloud Gateway转发Spring WebSocket
Spring Cloud Gateway转发Spring WebSocket 源码:https://github.com/naah69/SpringCloud-Gateway-WebSocket-De ...
- 开发工具--PyCharm
工具|PyCharm 主要介绍关于PyCharm的使用小技巧,方便自己使用这款软件. 前戏准备 1.下载pycharm: 官方网站(鼠标单击) 2.安装(自己百度一下,教程很多) 正式开始 PyCha ...