ECharts3 实现动态数据累积图

原来网站上的实例是固定只显示10个数据，简单做了一些修改，1秒生成1个数据，数据累积。

可在ECharts3实例中的代码框中粘贴直接查看效果


var app = {};option = {title: {text: '动态数据',subtext: '纯属虚构'},tooltip: {trigger: 'axis'},legend: {data:['最新成交价', '预购队列']},toolbox: {show: true,feature: {dataView: {readOnly: false},restore: {},saveAsImage: {}}},dataZoom: {show: true,start: 0,end: 100},xAxis: [{type: 'category',boundaryGap: true,data: (function (){var now = new Date();var res = [];var len = 0;return res;})()},{type: 'category',boundaryGap: true,data: (function (){var res = [];var len = 0;return res;})()}],yAxis: [{type: 'value',scale: true,name: '价格',max: 20,min: 0,boundaryGap: [0.2, 0.2]},{type: 'value',scale: true,name: '预购量',max: 1200,min: 0,boundaryGap: [0.2, 0.2]}],series: [{name:'预购队列',type:'bar',xAxisIndex: 1,yAxisIndex: 1,data:(function (){var res = [];var len = 10;return res;})()},{name:'最新成交价',type:'line',data:(function (){var res = [];var len = 0;return res;})()}]
};
clearInterval(app.timeTicket);
app.count = 1;
app.timeTicket = setInterval(function (){axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,'');var data0 = option.series[0].data;var data1 = option.series[1].data;data0.push();data0.push(Math.round(Math.random() * 1000));data1.push();data1.push((Math.random() * 10).toFixed(1) - 0);option.xAxis[0].data.push();option.xAxis[0].data.push(axisData);option.xAxis[1].data.push();option.xAxis[1].data.push(app.count++);myChart.setOption(option);
}, 1000);

ECharts3 实现动态数据累积图相关推荐

Echarts动态数据折线图
1.添加引用: <script src="~/Scripts/jquery-3.3.1.js"></script><script src=" ...
C#应用NPOI实现导出EXcel表格中插入饼状图（可实现动态数据生成）
一.思路: 1.excel是可以通过NPOI插入图片的: 2.C#通过NPOI生成饼状图: 3.把生成的饼状图以字节流的形式插入到表格二.看代码: #region 生成饼图图例/// <s ...
php 更换轮播图片不显示不出来,layui 轮播图动态数据不显示问题
layui.use('carousel', function() { var carousel = layui.carousel; var ins = carousel.render({ elem: ...
html引入外部股票k线图,怎么做股票网站的K线图 echarts k线图怎么导入动态数据...
1.加载插件,实例化chart. 2.链接websocket 3.接收数据,处理数据,调用chart的实例,不断更新数据百度的echart有k线图更新动态数据方法:html> 50 //加载 ...
[Echarts可视化] 二.php和ajax连接数据库实现动态数据可视化
前一篇文章 "[Echarts可视化] 一.入门篇之简单绘制中国地图和贵州地区" 主要是通过Echarts可视化介绍入门知识.中国地图和贵州地区各省份的数据分析,其中贵州地图才是它 ...
聊聊我常用的5款动态数据可视化工具
视频当道的时代,数据可视化自然也要动起来. 我常用的动态可视化工具主要有「Tableau.Echarts.Flourish.Python」这几个,另外加上地图可视化神器「kepler.gl」. 这五款 ...
五分钟让你的数据动起来，动态数据可视化极简教程
之前发了一条动态数据可视化的视频,有很多朋友来咨询怎么制作的,其实制作过程难度不大,上手很快,特地为大家整理了一篇制作教程,五分钟让你的数据动起来! 为什么做动态数据可视化? 动态数据可视化主要应用的 ...
数据库安全之数据掩码：SQL新功能之动态数据掩码（SQL2016AZURE SQL）
我们在开发上都有这样的需求:对部分敏感数据进行屏蔽,如身份证信息,名字的一部分等显示如: 在开发上,一般来是取出相应的文字后进行替换,如可以用下面的方法. function plusXing ...
爬虫系列4：Requests+Xpath 爬取动态数据
爬虫系列4:Requests+Xpath 爬取动态数据 [抓取]:参考前文爬虫系列1:https://www.cnblogs.com/yizhiamumu/p/9451093.html [分页]:参 ...

ECharts3 实现动态数据累积图

ECharts3 实现动态数据累积图相关推荐

最新文章

热门文章