HTML5、JS、JQuery、ECharts非同步加載
- 小云云原創
- 2017-12-18 09:11:111911瀏覽
這幾天，看了一下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.腳本寫啥呢？別急，慢慢來的，填一些基本參數（可透過此連結飛到Echarts官網的設定參考一下）</p> <p> （3）初始化了之後，我們就可以ajax異步讀取本地文件了~~~~</p> <p>其中不懂堆疊的（連結在此這個是我Google的，有可能被牆~~）不懂push，shift操作資料的（連結在此這個應該不會被牆~~）</p> <pre class="brush:php;toolbar:false"> var myChart = echarts.init(document.getElementById('main'));</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">$.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><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>