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 - 折线图 - 每秒刷新数据并显示的更多相关文章

  1. echarts折线图,数据切换时(最近七天)绘图不合理现象

    echarts折线图,当进行数据切换时存在绘制不合理的问题,数据没错,但绘制不对. 两个0之间的连线应该是平滑直线,如图: 正确的显示: 解决: 在myCharts.setOption(option) ...

  2. echarts折线图动态改变数据时的一个bug

    echarts折线图中当增加dataZoom,修改start大于0的时候,会出现折线混乱,变成竖直的线,绘制有问题. 解决方法,在dataZoom中增加filterMode: 'empty' http ...

  3. 实现Echarts折线图的虚实转换

    需求:医院的体温单,在统计体温时,对于正常情况下统计的体温数据,需要显示实线:对于进行物理降温后统计的体温数据,需要显示虚线. 现有的体温单是运用 Echarts 折线图,统一用实线显示.因此在这基础 ...

  4. ECharts折线图堆叠设置为不堆叠的方法

    下图是ECharts折线图堆叠的官方源码,设置折线图不堆叠只需要将每一个stack的值设置为不一样的名称或者将stack属性删除即可. option = { title: { text: '折线图堆叠 ...

  5. vue使用axios读取本地json文件来显示echarts折线图

    编辑器:HBuilderx axios文档:http://www.axios-js.com/zh-cn/docs/ echarts实例:https://echarts.apache.org/examp ...

  6. d3.js 教程 模仿echarts折线图

    今天我们来仿echarts折线图,这个图在echarts是折线图堆叠,但是我用d3改造成了普通的折线图,只为了大家学习(其实在简单的写一个布局就可以).废话不多说商行代码. 1 制作 Line 类 c ...

  7. echarts折线图--数据交互

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. eCharts 折线图,动态绑定数据不更新图表的问题,

    官方文档 : http://echarts.baidu.com/tutorial.html npm install echarts --save let lineChart = echarts.ini ...

  9. MVC中使用Echart后台加载数据 实现饼图、折线图、全国地图数据,单击双击事件等

    @{ Layout = null; } @if (false) { <script src="~/Js/jquery-easyui-1.5/jquery.min.js"> ...

随机推荐

  1. [LeetCode] 490. The Maze 迷宫

    There is a ball in a maze with empty spaces and walls. The ball can go through empty spaces by rolli ...

  2. 4,VS常见问题解决(一闪而过、等问题)不断更新

    当然入门学c可以用VS,但是深入就不应该用VS(MSVC)编译器了,毕竟VS2017还没有完全支持C99(这个从VS2017没有实现变长数组可见) 但是想看c源码,还是 1. 推荐用 *nix系统 2 ...

  3. Ubuntu安装微信、钉钉等各种windows软件

    详见这个博客,用sudo dpkg -i 安装软件时,如果出现错误,是因为缺少安装依赖关系,用下面的命令解决: sudo apt-get install -f

  4. Qt Quick 常用元素:Textinput 与 TextEdit 文本编辑框

    一.Textinput Textinput 用于编辑一行文本,类似于 QLineEdit. font 分组属性允许你设置 Textlnput 元素所用字体的各种属性,包括字体族(family).大 小 ...

  5. Java学习清单

    转自: csdn/zuochao_2013/article/details/76795164   ·   Java基础部分 *Java基础才是重中之重,只有基础打牢了,学习各种框架才能游刃有余. 1, ...

  6. GitHUB帐号申请及相关操作

    GitHUB帐号申请及相关操作 GitHub 是一个面向开源及私有软件项目的托管平台,因为只支持 Git 作为唯一的版本库格式进行托管,故名 GitHub.GitHub 于 2008 年 4 月 10 ...

  7. 如何解决macbook pro摄像头不工作的问题

    背景:上周用qq视频聊天都正常,这周突然显示检测不到摄像头.打开facetime和photo booth也显示“相机未连接”排查一切问题后只好给苹果客服打电话,在客服的帮助下解决了这个问题. 解决办法 ...

  8. win10系统优化

    1.服务:关闭 windows update\ windows search \ windows 备份 2.系统:高级系统设置->性能最优,同事修改虚拟内存如下 3.任务管理器:关闭多余的启动项 ...

  9. WPF 精修篇 BackgroundWorker

    原文:WPF 精修篇 BackgroundWorker 效果 <Grid> <Grid.RowDefinitions> <RowDefinition Height=&qu ...

  10. MySQL、HBase、ES的对比

    hbase是列数据库,是kv结构的,ES的基于Lucene的搜索引擎的面向文档数据库吧 ES是搜索引擎,主要的优势在于快速搜索,HBase是数据库,优势在于存储数据,侧重点不同 MySQL:关系型数据 ...