Rumah > Artikel > hujung hadapan web > HTML5、JS、JQuery、ECharts异步加载
HTML5、JS、JQuery、ECharts异步加载
- 小云云asal
- 2017-12-18 09:11:111876semak imbas
这几天，看了一下ECharts官网的API和Demo发现很有意思，于是就利用模型预测产生的数据做一个伪实时的动态数据显示 。本文主要介绍了HTML5+JS+JQuery+ECharts实现异步加载问题,需要的朋友可以参考下，希望能帮助到大家。
首先，创建一个index.html的文件，我用的vscode打开的，进行编写。
1.插入一个标签
<p id="main" style="width:600px;height:400px;"></p>
设置他的一些style（可自行美化，我很懒！！！）。
2.在body下建一个<script>脚本（为什么要在body下写js脚本呢？因为这是提高用户体验，可自行百度深层次的原因~~~）。</p> <p>3.脚本写啥呢？别急，慢慢来啊~~</p> <p> （1）首先，我们来建一个echarts的对象，就叫他MyChart吧 </p> <pre class="brush:php;toolbar:false"> var myChart = echarts.init(document.getElementById('main'));</pre> <p> （2）建一个setoption这是初始化图的，填一些基本参数（可通过此链接飞到Echarts官网的配置参考一下）</p> <p> （3）初始化了之后，我们就可以ajax异步读取本地文件了~~~~</p> <p>其中不懂堆栈的（链接在此这个是我Google的，有可能被墙~~）不懂push，shift操作数据的（链接在此这个应该不会被墙~~）</p> <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><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><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>