在HTML5+JS+JQuery+ECharts中如何實現非同步載入問題

這篇文章主要介紹了HTML5 JS JQuery ECharts實現異步加載問題,需要的朋友可以參考下

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

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

1.插入一個標籤

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

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

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

3.腳本寫啥呢？別急，慢慢來的，填一些基本參數（可透過此連結飛到Echarts官網的設定參考一下）

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

其中不懂堆疊的（連結在此這個是我Google的，有可能被牆~~）不懂push，shift操作資料的（連結在此這個應該不會被牆~~）

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

我來解釋一下，這個非同步載入的原理是這樣子的：

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

（2）但是啊，取一個存一個太麻煩了，我們在設定一個定時器setInterval()在這個裡面，每過2s更新2個點（怎麼更新呢，就是data.shift()

data.push( )

模擬了堆疊~~~~

這樣就達到了動態資料了~~~~

好吧，如果只是這樣也太low了，我要實現一個框架資料庫前端的真正資料動起來~~~~讓我在研究幾天~~~~~~

好了，不廢話了，下面是源碼，有需要的童鞋可以自己跑一下，看看可不可以動~~~~~

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

  
  
  
  


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

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

在JS中如何實現標籤滾動切換

在JS中如何實現圖片居中懸浮效果

在JS CSS中如何實現捲動數字時鐘

在微信小程式中如何實作錄音與播放錄音功能

在vue element中如何實作表格分頁

以上是在HTML5+JS+JQuery+ECharts中如何實現非同步載入問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！