這幾天，看了一下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>
<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">登入後複製</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">$.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">登入後複製</div></div><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>
