這幾天，看了一下ECharts官網的API和Demo發現很有意思，于是就利用模型預測產生的數據做一個偽實時的動態數據顯示 。

首先，創建一個index.html的文件，我用的vscode打開的，進行編寫。

1.插入一個標簽

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

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

2.在body下建一個<script>腳本（為什么要在body下寫js腳本呢？因為這是提高用戶體驗，可自行百度深層次的原因~~~）。

3.腳本寫啥呢？別急，慢慢來啊~~

    （1）首先，我們來建一個echarts的對象，就叫他MyChart吧    

 var myChart = echarts.init(document.getElementById('main'));

    （2）建一個setoption這是初始化圖的，填一些基本參數（可通過此鏈接飛到Echarts官網的配置參考一下）

    （3）初始化了之后，我們就可以ajax異步讀取本地文件了~~~~

其中不懂堆棧的（鏈接在此這個是我Google的，有可能被墻~~）不懂push，shift操作數據的（鏈接在此這個應該不會被墻~~）

$.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();    }  })

我來解釋一下，這個異步加載的原理是這樣子的：

（1）我們現在加載一個.json文件，存在一個變量result里，開始進行數據的操作，利用堆棧的概念先存一個圖上要顯示的數據量，假設是1000個點，存到data里(這是一個隊列）你如果要實現動態的實時的數據，看著數據他會動~~~~你需要存一個數據進去，但是呢這個隊列只有1000個容量，放不下怎么辦，沒關系啊，你先取一個出來不就行了嘛，就這樣循環下去~~~~