HTML5、JS、JQuery、ECharts异步加载-tutorial js-php.cn

HTML5、JS、JQuery、ECharts异步加载

小云云

Lepaskan： 2017-12-18 09:11:11

asal

1868 orang telah melayarinya

这几天，看了一下ECharts官网的API和Demo发现很有意思，于是就利用模型预测产生的数据做一个伪实时的动态数据显示。本文主要介绍了HTML5+JS+JQuery+ECharts实现异步加载问题,需要的朋友可以参考下，希望能帮助到大家。

首先，创建一个index.html的文件，我用的vscode打开的，进行编写。

1.插入一个标签

<p id="main" style="width:600px;height:400px;"></p>

Salin selepas log masuk

设置他的一些style（可自行美化，我很懒！！！）。

2.在body下建一个<script>脚本（为什么要在body下写js脚本呢？因为这是提高用户体验，可自行百度深层次的原因~~~）。</p> <p>3.脚本写啥呢？别急，慢慢来啊~~</p> <p> （1）首先，我们来建一个echarts的对象，就叫他MyChart吧 </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> var myChart = echarts.init(document.getElementById('main'));</pre><div class="contentsignin">Salin selepas log masuk</div></div> <p> （2）建一个setoption这是初始化图的，填一些基本参数（可通过此链接飞到Echarts官网的配置参考一下）</p> <p> （3）初始化了之后，我们就可以ajax异步读取本地文件了~~~~</p> <p>其中不懂堆栈的（链接在此这个是我Google的，有可能被墙~~）不懂push，shift操作数据的（链接在此这个应该不会被墙~~）</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">$.ajax({ type:"get", // async:true, url:"test_data.json", data:{}, dataType:"json", success:function(result){ var datas=result if(result){ var m=0; for(var i=0;i<result.length;i++){ if(m<1000){ datas.shift(); date.push(result[i]["time"]); data.push(result[i]["AM23SIG0206.AV"]); m+=1; } else{ break; } myChart.hideLoading(); setInterval(function(){ for(var n=0;n<2;n++){ date.shift(); date.push(datas[n]["time"]); data.shift(); data.push(datas[n]["AM23SIG0206.AV"]); } myChart.setOption({ xAxis:{ data:date }, series:[ { name:"参数", data:data } ]}); for(var nn=0;nn<2;nn++){ datas.shift() } },2000); } } }, error:function(errorMsg){ alert("图表请求数据失败！"); myChart.hideLoading(); myChart_2.hideLoading(); } })</pre><div class="contentsignin">Salin selepas log masuk</div></div><p>我来解释一下，这个异步加载的原理是这样子的：</p><p>（1）我们现在加载一个.json文件，存在一个变量result里，开始进行数据的操作，利用堆栈的概念先存一个图上要显示的数据量，假设是1000个点，存到data里(这是一个队列）你如果要实现动态的实时的数据，看着数据他会动~~~~你需要存一个数据进去，但是呢这个队列只有1000个容量，放不下怎么办，没关系啊，你先取一个出来不就行了嘛，就这样循环下去~~~~</p><p>（2）但是啊，取一个存一个太麻烦了，我们在设置一个定时器setInterval()在这个里面，每过2s更新2个点（怎么更新呢，就是data.shift()</p><p>data.push()</p><p>模拟了堆栈~~~~</p><p>这样就达到了动态数据了~~~~</p><p>好吧，如果只是这样也太low了，我要实现一个框架+数据库+前端的真正数据动起来~~~~让我在研究几天~~~~~~</p><p>好了，不废话了，下面是源码，有需要的童鞋可以自己跑一下，看看可不可以动~~~~~</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Charts</title> <script type="text/javascript" src="echarts.min.js"></script> <p id="main" style="width:600px;height:400px;"></p>

Salin selepas log masuk

[ { "AM23SIG0206.AV": "594.4071", "time": "2016-05-01 00:00:01" }, { "AM23SIG0206.AV": "594.4207", "time": "2016-05-01 00:00:04" }, { "AM23SIG0206.AV": "594.3883", "time": "2016-05-01 00:00:07" }, { "AM23SIG0206.AV": "594.3586", "time": "2016-05-01 00:00:10" }, { "AM23SIG0206.AV": "594.3883", "time": "2016-05-01 00:00:13" }, { "AM23SIG0206.AV": "594.3398", "time": "2016-05-01 00:00:16" }, { "AM23SIG0206.AV": "594.3398", "time": "2016-05-01 00:00:19" }, { "AM23SIG0206.AV": "594.3075", "time": "2016-05-01 00:00:22" }, { "AM23SIG0206.AV": "594.3076", "time": "2016-05-01 00:00:25" }, { "AM23SIG0206.AV": "594.2753", "time": "2016-05-01 00:00:28" }, { "AM23SIG0206.AV": "594.2753", "time": "2016-05-01 00:00:31" }, { "AM23SIG0206.AV": "594.2429", "time": "2016-05-01 00:00:34" }, { "AM23SIG0206.AV": "594.2753", "time": "2016-05-01 00:00:37" }, { "AM23SIG0206.AV": "594.2429", "time": "2016-05-01 00:00:40" }, { "AM23SIG0206.AV": "594.2565", "time": "2016-05-01 00:00:43" }, { "AM23SIG0206.AV": "594.3075", "time": "2016-05-01 00:00:46" }, { "AM23SIG0206.AV": "594.2726", "time": "2016-05-01 00:00:49" }, { "AM23SIG0206.AV": "594.2752", "time": "2016-05-01 00:00:52" }, { "AM23SIG0206.AV": "594.2914", "time": "2016-05-01 00:00:55" }, { "AM23SIG0206.AV": "594.2726", "time": "2016-05-01 00:00:58" }, { "AM23SIG0206.AV": "594.3075", "time": "2016-05-01 00:01:01" }, { "AM23SIG0206.AV": "594.3075", "time": "2016-05-01 00:01:04" }, { "AM23SIG0206.AV": "594.2752", "time": "2016-05-01 00:01:07" }, { "AM23SIG0206.AV": "594.259", "time": "2016-05-01 00:01:10" }, { "AM23SIG0206.AV": "594.2752", "time": "2016-05-01 00:01:13" }, { "AM23SIG0206.AV": "594.2403", "time": "2016-05-01 00:01:16" }, { "AM23SIG0206.AV": "594.2402", "time": "2016-05-01 00:01:19" }, { "AM23SIG0206.AV": "594.1918", "time": "2016-05-01 00:01:22" }, { "AM23SIG0206.AV": "594.2241", "time": "2016-05-01 00:01:25" }, { "AM23SIG0206.AV": "594.1918", "time": "2016-05-01 00:01:28" }, { "AM23SIG0206.AV": "594.1595", "time": "2016-05-01 00:01:31" }, { "AM23SIG0206.AV": "594.0975", "time": "2016-05-01 00:01:34" }, { "AM23SIG0206.AV": "594.1272", "time": "2016-05-01 00:01:37" }, { "AM23SIG0206.AV": "594.111", "time": "2016-05-01 00:01:40" }, { "AM23SIG0206.AV": "594.1136", "time": "2016-05-01 00:01:43" }, { "AM23SIG0206.AV": "594.0787", "time": "2016-05-01 00:01:46" }, { "AM23SIG0206.AV": "594.0813", "time": "2016-05-01 00:01:49" }, { "AM23SIG0206.AV": "594.0464", "time": "2016-05-01 00:01:52" }, { "AM23SIG0206.AV": "594.014", "time": "2016-05-01 00:01:55" }, { "AM23SIG0206.AV": "594.014", "time": "2016-05-01 00:01:58" }, { "AM23SIG0206.AV": "594.0328", "time": "2016-05-01 00:02:01" }, { "AM23SIG0206.AV": "594.049", "time": "2016-05-01 00:02:04" }, { "AM23SIG0206.AV": "594.0464", "time": "2016-05-01 00:02:07" }, { "AM23SIG0206.AV": "594.0464", "time": "2016-05-01 00:02:10" }, { "AM23SIG0206.AV": "594.0464", "time": "2016-05-01 00:02:13" }, { "AM23SIG0206.AV": "594.0787", "time": "2016-05-01 00:02:16" }, { "AM23SIG0206.AV": "594.049", "time": "2016-05-01 00:02:19" }, { "AM23SIG0206.AV": "594.0625", "time": "2016-05-01 00:02:22" }, { "AM23SIG0206.AV": "594.0948", "time": "2016-05-01 00:02:25" }, { "AM23SIG0206.AV": "594.0774", "time": "2016-05-01 00:02:28" }, { "AM23SIG0206.AV": "594.0464", "time": "2016-05-01 00:02:31" }, { "AM23SIG0206.AV": "594.0948", "time": "2016-05-01 00:02:34" }, { "AM23SIG0206.AV": "594.0625", "time": "2016-05-01 00:02:37" }, { "AM23SIG0206.AV": "594.0625", "time": "2016-05-01 00:02:40" }, { "AM23SIG0206.AV": "594.0625", "time": "2016-05-01 00:02:43" }, { "AM23SIG0206.AV": "594.0787", "time": "2016-05-01 00:02:46" }, { "AM23SIG0206.AV": "594.045", "time": "2016-05-01 00:02:49" }, { "AM23SIG0206.AV": "594.0127", "time": "2016-05-01 00:02:52" }, { "AM23SIG0206.AV": "594.0464", "time": "2016-05-01 00:02:55" }, { "AM23SIG0206.AV": "594.014", "time": "2016-05-01 00:02:58" }, { "AM23SIG0206.AV": "594.0464", "time": "2016-05-01 00:03:01" }, { "AM23SIG0206.AV": "593.9818", "time": "2016-05-01 00:03:04" }, { "AM23SIG0206.AV": "593.9495", "time": "2016-05-01 00:03:07" }, { "AM23SIG0206.AV": "593.9481", "time": "2016-05-01 00:03:10" }, { "AM23SIG0206.AV": "593.8997", "time": "2016-05-01 00:03:13" }, { "AM23SIG0206.AV": "593.8997", "time": "2016-05-01 00:03:16" }, { "AM23SIG0206.AV": "593.8673", "time": "2016-05-01 00:03:19" }, { "AM23SIG0206.AV": "593.835", "time": "2016-05-01 00:03:22" }, { "AM23SIG0206.AV": "593.8027", "time": "2016-05-01 00:03:25" }, { "AM23SIG0206.AV": "593.7704", "time": "2016-05-01 00:03:28" }, { "AM23SIG0206.AV": "593.7704", "time": "2016-05-01 00:03:31" }, { "AM23SIG0206.AV": "593.7193", "time": "2016-05-01 00:03:34" }, { "AM23SIG0206.AV": "593.7193", "time": "2016-05-01 00:03:37" }, { "AM23SIG0206.AV": "593.6735", "time": "2016-05-01 00:03:40" }, { "AM23SIG0206.AV": "593.625", "time": "2016-05-01 00:03:43" }, { "AM23SIG0206.AV": "593.6062", "time": "2016-05-01 00:03:46" }, { "AM23SIG0206.AV": "593.6062", "time": "2016-05-01 00:03:49" }, { "AM23SIG0206.AV": "593.5442", "time": "2016-05-01 00:03:52" }, { "AM23SIG0206.AV": "593.528", "time": "2016-05-01 00:03:55" }, { "AM23SIG0206.AV": "593.4931", "time": "2016-05-01 00:03:58" }, { "AM23SIG0206.AV": "593.4931", "time": "2016-05-01 00:04:01" }, { "AM23SIG0206.AV": "593.4446", "time": "2016-05-01 00:04:04" }, { "AM23SIG0206.AV": "593.4285", "time": "2016-05-01 00:04:07" }, { "AM23SIG0206.AV": "593.3962", "time": "2016-05-01 00:04:10" }, { "AM23SIG0206.AV": "593.38", "time": "2016-05-01 00:04:13" }, { "AM23SIG0206.AV": "593.3774", "time": "2016-05-01 00:04:16" }, { "AM23SIG0206.AV": "593.38", "time": "2016-05-01 00:04:19" }, { "AM23SIG0206.AV": "593.3154", "time": "2016-05-01 00:04:22" }, { "AM23SIG0206.AV": "593.3477", "time": "2016-05-01 00:04:25" }, { "AM23SIG0206.AV": "593.3477", "time": "2016-05-01 00:04:28" }, { "AM23SIG0206.AV": "593.3451", "time": "2016-05-01 00:04:31" }, { "AM23SIG0206.AV": "593.3451", "time": "2016-05-01 00:04:34" }, { "AM23SIG0206.AV": "593.3451", "time": "2016-05-01 00:04:37" }, { "AM23SIG0206.AV": "593.3425", "time": "2016-05-01 00:04:40" }, { "AM23SIG0206.AV": "593.4097", "time": "2016-05-01 00:04:43" }, { "AM23SIG0206.AV": "593.4097", "time": "2016-05-01 00:04:46" }, { "AM23SIG0206.AV": "593.4581", "time": "2016-05-01 00:04:49" }, { "AM23SIG0206.AV": "593.4608", "time": "2016-05-01 00:04:52" }, { "AM23SIG0206.AV": "593.5228", "time": "2016-05-01 00:04:55" }, { "AM23SIG0206.AV": "593.5066", "time": "2016-05-01 00:04:58" }, { "AM23SIG0206.AV": "593.5739", "time": "2016-05-01 00:05:01" }, { "AM23SIG0206.AV": "593.6035", "time": "2016-05-01 00:05:04" }, { "AM23SIG0206.AV": "593.6036", "time": "2016-05-01 00:05:07" }, { "AM23SIG0206.AV": "593.6359", "time": "2016-05-01 00:05:10" }, { "AM23SIG0206.AV": "593.6843", "time": "2016-05-01 00:05:13" }, { "AM23SIG0206.AV": "593.7141", "time": "2016-05-01 00:05:16" }, { "AM23SIG0206.AV": "593.7463", "time": "2016-05-01 00:05:19" }, { "AM23SIG0206.AV": "593.749", "time": "2016-05-01 00:05:22" }, { "AM23SIG0206.AV": "593.7787", "time": "2016-05-01 00:05:25" }, { "AM23SIG0206.AV": "593.7974", "time": "2016-05-01 00:05:28" }, { "AM23SIG0206.AV": "593.8297", "time": "2016-05-01 00:05:31" }, { "AM23SIG0206.AV": "593.8782", "time": "2016-05-01 00:05:34" }, { "AM23SIG0206.AV": "593.9241", "time": "2016-05-01 00:05:37" }, { "AM23SIG0206.AV": "593.9105", "time": "2016-05-01 00:05:40" }, { "AM23SIG0206.AV": "593.9752", "time": "2016-05-01 00:05:43" }, { "AM23SIG0206.AV": "593.9887", "time": "2016-05-01 00:05:46" }, { "AM23SIG0206.AV": "594.0049", "time": "2016-05-01 00:05:49" }, { "AM23SIG0206.AV": "594.0049", "time": "2016-05-01 00:05:52" }, { "AM23SIG0206.AV": "594.021", "time": "2016-05-01 00:05:55" }, { "AM23SIG0206.AV": "594.0372", "time": "2016-05-01 00:05:58" }, { "AM23SIG0206.AV": "594.021", "time": "2016-05-01 00:06:01" }, { "AM23SIG0206.AV": "594.0695", "time": "2016-05-01 00:06:04" }, { "AM23SIG0206.AV": "594.0856", "time": "2016-05-01 00:06:07" }, { "AM23SIG0206.AV": "594.0857", "time": "2016-05-01 00:06:10" }, { "AM23SIG0206.AV": "594.0857", "time": "2016-05-01 00:06:13" }, { "AM23SIG0206.AV": "594.1476", "time": "2016-05-01 00:06:16" }, { "AM23SIG0206.AV": "594.0830000000001", "time": "2016-05-01 00:06:19" }, { "AM23SIG0206.AV": "594.1154", "time": "2016-05-01 00:06:22" }, { "AM23SIG0206.AV": "594.1179", "time": "2016-05-01 00:06:25" }, { "AM23SIG0206.AV": "594.1179", "time": "2016-05-01 00:06:28" }, { "AM23SIG0206.AV": "594.0830000000001", "time": "2016-05-01 00:06:31" }, { "AM23SIG0206.AV": "594.0830000000001", "time": "2016-05-01 00:06:34" }, { "AM23SIG0206.AV": "594.0507", "time": "2016-05-01 00:06:37" }, { "AM23SIG0206.AV": "594.0830000000001", "time": "2016-05-01 00:06:40" }, { "AM23SIG0206.AV": "594.0830000000001", "time": "2016-05-01 00:06:43" }, { "AM23SIG0206.AV": "594.0507", "time": "2016-05-01 00:06:46" }, { "AM23SIG0206.AV": "594.0345", "time": "2016-05-01 00:06:49" }, { "AM23SIG0206.AV": "594.0022", "time": "2016-05-01 00:06:52" }, { "AM23SIG0206.AV": "593.9861", "time": "2016-05-01 00:06:55" }, { "AM23SIG0206.AV": "593.9699", "time": "2016-05-01 00:06:58" }, { "AM23SIG0206.AV": "593.9363", "time": "2016-05-01 00:07:01" }, { "AM23SIG0206.AV": "593.9039", "time": "2016-05-01 00:07:04" }, { "AM23SIG0206.AV": "593.8568", "time": "2016-05-01 00:07:07" }, { "AM23SIG0206.AV": "593.8555", "time": "2016-05-01 00:07:10" }, { "AM23SIG0206.AV": "593.8568", "time": "2016-05-01 00:07:13" }, { "AM23SIG0206.AV": "593.8232", "time": "2016-05-01 00:07:16" }, { "AM23SIG0206.AV": "593.776", "time": "2016-05-01 00:07:19" }, { "AM23SIG0206.AV": "593.7747", "time": "2016-05-01 00:07:22" }, { "AM23SIG0206.AV": "593.7263", "time": "2016-05-01 00:07:25" }, { "AM23SIG0206.AV": "593.7424", "time": "2016-05-01 00:07:28" }, { "AM23SIG0206.AV": "593.6778", "time": "2016-05-01 00:07:31" }, { "AM23SIG0206.AV": "593.6616", "time": "2016-05-01 00:07:34" }, { "AM23SIG0206.AV": "593.6589", "time": "2016-05-01 00:07:37" }, { "AM23SIG0206.AV": "593.6293", "time": "2016-05-01 00:07:40" }, { "AM23SIG0206.AV": "593.5944", "time": "2016-05-01 00:07:43" }, { "AM23SIG0206.AV": "593.6267", "time": "2016-05-01 00:07:46" }, { "AM23SIG0206.AV": "593.5944", "time": "2016-05-01 00:07:49" }, { "AM23SIG0206.AV": "593.5944", "time": "2016-05-01 00:07:52" }, { "AM23SIG0206.AV": "593.5944", "time": "2016-05-01 00:07:55" }, { "AM23SIG0206.AV": "593.5782", "time": "2016-05-01 00:07:58" }, { "AM23SIG0206.AV": "593.5647", "time": "2016-05-01 00:08:01" }, { "AM23SIG0206.AV": "593.562", "time": "2016-05-01 00:08:04" }, { "AM23SIG0206.AV": "593.5782", "time": "2016-05-01 00:08:07" }, { "AM23SIG0206.AV": "593.5298", "time": "2016-05-01 00:08:10" }, { "AM23SIG0206.AV": "593.5944", "time": "2016-05-01 00:08:13" }, { "AM23SIG0206.AV": "593.5621", "time": "2016-05-01 00:08:16" }, { "AM23SIG0206.AV": "593.5621", "time": "2016-05-01 00:08:19" }, { "AM23SIG0206.AV": "593.5944", "time": "2016-05-01 00:08:22" }, { "AM23SIG0206.AV": "593.5944", "time": "2016-05-01 00:08:25" }, { "AM23SIG0206.AV": "593.5917", "time": "2016-05-01 00:08:28" }, { "AM23SIG0206.AV": "593.659", "time": "2016-05-01 00:08:31" }, { "AM23SIG0206.AV": "593.6887", "time": "2016-05-01 00:08:34" }, { "AM23SIG0206.AV": "593.6564", "time": "2016-05-01 00:08:37" }, { "AM23SIG0206.AV": "593.6402", "time": "2016-05-01 00:08:40" }, { "AM23SIG0206.AV": "593.6752", "time": "2016-05-01 00:08:43" }, { "AM23SIG0206.AV": "593.6725", "time": "2016-05-01 00:08:46" }, { "AM23SIG0206.AV": "593.6725", "time": "2016-05-01 00:08:49" }, { "AM23SIG0206.AV": "593.6725", "time": "2016-05-01 00:08:52" }, { "AM23SIG0206.AV": "593.7022", "time": "2016-05-01 00:08:55" }, { "AM23SIG0206.AV": "593.6699", "time": "2016-05-01 00:08:58" }, { "AM23SIG0206.AV": "593.6402", "time": "2016-05-01 00:09:01" }, { "AM23SIG0206.AV": "593.6699", "time": "2016-05-01 00:09:04" }, { "AM23SIG0206.AV": "593.6564", "time": "2016-05-01 00:09:07" }, { "AM23SIG0206.AV": "593.6537", "time": "2016-05-01 00:09:10" }, { "AM23SIG0206.AV": "593.5917", "time": "2016-05-01 00:09:13" }, { "AM23SIG0206.AV": "593.5568", "time": "2016-05-01 00:09:16" }, { "AM23SIG0206.AV": "593.573", "time": "2016-05-01 00:09:19" }, { "AM23SIG0206.AV": "593.5083", "time": "2016-05-01 00:09:22" }, { "AM23SIG0206.AV": "593.4922", "time": "2016-05-01 00:09:25" }, { "AM23SIG0206.AV": "593.4786", "time": "2016-05-01 00:09:28" }, { "AM23SIG0206.AV": "593.4463", "time": "2016-05-01 00:09:31" }, { "AM23SIG0206.AV": "593.4114", "time": "2016-05-01 00:09:34" }, { "AM23SIG0206.AV": "593.3953", "time": "2016-05-01 00:09:37" }, { "AM23SIG0206.AV": "593.3791", "time": "2016-05-01 00:09:40" }, { "AM23SIG0206.AV": "593.3306", "time": "2016-05-01 00:09:43" }, { "AM23SIG0206.AV": "593.3009", "time": "2016-05-01 00:09:46" }, { "AM23SIG0206.AV": "593.2983", "time": "2016-05-01 00:09:49" }, { "AM23SIG0206.AV": "593.266", "time": "2016-05-01 00:09:52" }, { "AM23SIG0206.AV": "593.2499", "time": "2016-05-01 00:09:55" }, { "AM23SIG0206.AV": "593.3145", "time": "2016-05-01 00:09:58" }, { "AM23SIG0206.AV": "593.2821", "time": "2016-05-01 00:10:01" }, { "AM23SIG0206.AV": "593.266", "time": "2016-05-01 00:10:04" }, { "AM23SIG0206.AV": "593.2485", "time": "2016-05-01 00:10:07" }, { "AM23SIG0206.AV": "593.2809", "time": "2016-05-01 00:10:10" }, { "AM23SIG0206.AV": "593.2485", "time": "2016-05-01 00:10:13" }, { "AM23SIG0206.AV": "593.2809", "time": "2016-05-01 00:10:16" }, { "AM23SIG0206.AV": "593.2809", "time": "2016-05-01 00:10:19" }, { "AM23SIG0206.AV": "593.2809", "time": "2016-05-01 00:10:22" }, { "AM23SIG0206.AV": "593.297", "time": "2016-05-01 00:10:25" }, { "AM23SIG0206.AV": "593.2646", "time": "2016-05-01 00:10:28" }, { "AM23SIG0206.AV": "593.297", "time": "2016-05-01 00:10:31" }, { "AM23SIG0206.AV": "593.297", "time": "2016-05-01 00:10:34" }, { "AM23SIG0206.AV": "593.3293", "time": "2016-05-01 00:10:37" }, { "AM23SIG0206.AV": "593.3131", "time": "2016-05-01 00:10:40" }, { "AM23SIG0206.AV": "593.3293", "time": "2016-05-01 00:10:43" }, { "AM23SIG0206.AV": "593.3293", "time": "2016-05-01 00:10:46" } ]

这个是.json文件（python的大数据模型预测产生的数据我拿来用一哈）

Atas ialah kandungan terperinci HTML5、JS、JQuery、ECharts异步加载. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!