HTML5+JS+JQuery+ECharts實現異步加載問題

2019-11-19 14:43:06

字體：大中小

來源：轉載

供稿：網友

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

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

1.插入一個標簽

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

設置他的一些style（可自行美化，我很懶！?。。?/p>

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個容量，放不下怎么辦，沒關系啊，你先取一個出來不就行了嘛，就這樣循環下去~~~~

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

data.push()

模擬了堆棧~~~~

這樣就達到了動態數據了~~~~

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

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

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Charts</title>  <script type="text/javascript" src="echarts.min.js"></script>  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script></head><body>  <div id="main" style="width:600px;height:400px;"></div>  <div id="main_2" style="width:600px;height:400px;"></div></body><script type="text/javascript">  var myChart = echarts.init(document.getElementById('main'));  var myChart_2 = echarts.init(document.getElementById('main_2'));  myChart.setOption({    title:{      text:'異步數據加載'    },    tooltip:{      show:true,    },    xAxis:{      type:'category',      boundaryGap:false,      data:[],      splitLine: {      show: false      },    },    yAxis:{      boundaryGap:[0,'100%'],      type:'value',      min:'dataMin',      max:'dataMax',      splitLine: {      show: false      },    },    series:[{      name:'參數',      type:'line',      data:[]    }]  });  myChart_2.setOption({    title:{      text:'異步數據加載'    },    tooltip:{      show:true,    },    xAxis:{      type:'category',      boundaryGap:false,      data:[],      splitLine: {      show: false      },    },    yAxis:{      boundaryGap:[0,'100%'],      type:'value',      min:'dataMin',      max:'dataMax',      splitLine: {      show: false      },    },    series:[{      name:'參數',      type:'line',      data:[]    }]  });  myChart.showLoading();  myChart_2.showLoading();  var date = [];  var data = [];  $.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();        myChart_2.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            }          ]});          myChart_2.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();    }  })</script></html>

[  {    "AM23SIG0206.AV": "594.4071",    "time": "2016-05-01 00:00:01"  },  {    "AM23SIG0206.AV": "594.4207",    "time": "2016-05-01 00:00:04"  },  {    "AM23SIG0206.AV": "594.3883",    "time": "2016-05-01 00:00:07"  },  {    "AM23SIG0206.AV": "594.3586",    "time": "2016-05-01 00:00:10"  },  {    "AM23SIG0206.AV": "594.3883",    "time": "2016-05-01 00:00:13"  },  {    "AM23SIG0206.AV": "594.3398",    "time": "2016-05-01 00:00:16"  },  {    "AM23SIG0206.AV": "594.3398",    "time": "2016-05-01 00:00:19"  },  {    "AM23SIG0206.AV": "594.3075",    "time": "2016-05-01 00:00:22"  },  {    "AM23SIG0206.AV": "594.3076",    "time": "2016-05-01 00:00:25"  },  {    "AM23SIG0206.AV": "594.2753",    "time": "2016-05-01 00:00:28"  },  {    "AM23SIG0206.AV": "594.2753",    "time": "2016-05-01 00:00:31"  },  {    "AM23SIG0206.AV": "594.2429",    "time": "2016-05-01 00:00:34"  },  {    "AM23SIG0206.AV": "594.2753",    "time": "2016-05-01 00:00:37"  },  {    "AM23SIG0206.AV": "594.2429",    "time": "2016-05-01 00:00:40"  },  {    "AM23SIG0206.AV": "594.2565",    "time": "2016-05-01 00:00:43"  },  {    "AM23SIG0206.AV": "594.3075",    "time": "2016-05-01 00:00:46"  },  {    "AM23SIG0206.AV": "594.2726",    "time": "2016-05-01 00:00:49"  },  {    "AM23SIG0206.AV": "594.2752",    "time": "2016-05-01 00:00:52"  },  {    "AM23SIG0206.AV": "594.2914",    "time": "2016-05-01 00:00:55"  },  {    "AM23SIG0206.AV": "594.2726",    "time": "2016-05-01 00:00:58"  },  {    "AM23SIG0206.AV": "594.3075",    "time": "2016-05-01 00:01:01"  },  {    "AM23SIG0206.AV": "594.3075",    "time": "2016-05-01 00:01:04"  },  {    "AM23SIG0206.AV": "594.2752",    "time": "2016-05-01 00:01:07"  },  {    "AM23SIG0206.AV": "594.259",    "time": "2016-05-01 00:01:10"  },  {    "AM23SIG0206.AV": "594.2752",    "time": "2016-05-01 00:01:13"  },  {    "AM23SIG0206.AV": "594.2403",    "time": "2016-05-01 00:01:16"  },  {    "AM23SIG0206.AV": "594.2402",    "time": "2016-05-01 00:01:19"  },  {    "AM23SIG0206.AV": "594.1918",    "time": "2016-05-01 00:01:22"  },  {    "AM23SIG0206.AV": "594.2241",    "time": "2016-05-01 00:01:25"  },  {    "AM23SIG0206.AV": "594.1918",    "time": "2016-05-01 00:01:28"  },  {    "AM23SIG0206.AV": "594.1595",    "time": "2016-05-01 00:01:31"  },  {    "AM23SIG0206.AV": "594.0975",    "time": "2016-05-01 00:01:34"  },  {    "AM23SIG0206.AV": "594.1272",    "time": "2016-05-01 00:01:37"  },  {    "AM23SIG0206.AV": "594.111",    "time": "2016-05-01 00:01:40"  },  {    "AM23SIG0206.AV": "594.1136",    "time": "2016-05-01 00:01:43"  },  {    "AM23SIG0206.AV": "594.0787",    "time": "2016-05-01 00:01:46"  },  {    "AM23SIG0206.AV": "594.0813",    "time": "2016-05-01 00:01:49"  },  {    "AM23SIG0206.AV": "594.0464",    "time": "2016-05-01 00:01:52"  },  {    "AM23SIG0206.AV": "594.014",    "time": "2016-05-01 00:01:55"  },  {    "AM23SIG0206.AV": "594.014",    "time": "2016-05-01 00:01:58"  },  {    "AM23SIG0206.AV": "594.0328",    "time": "2016-05-01 00:02:01"  },  {    "AM23SIG0206.AV": "594.049",    "time": "2016-05-01 00:02:04"  },  {    "AM23SIG0206.AV": "594.0464",    "time": "2016-05-01 00:02:07"  },  {    "AM23SIG0206.AV": "594.0464",    "time": "2016-05-01 00:02:10"  },  {    "AM23SIG0206.AV": "594.0464",    "time": "2016-05-01 00:02:13"  },  {    "AM23SIG0206.AV": "594.0787",    "time": "2016-05-01 00:02:16"  },  {    "AM23SIG0206.AV": "594.049",    "time": "2016-05-01 00:02:19"  },  {    "AM23SIG0206.AV": "594.0625",    "time": "2016-05-01 00:02:22"  },  {    "AM23SIG0206.AV": "594.0948",    "time": "2016-05-01 00:02:25"  },  {    "AM23SIG0206.AV": "594.0774",    "time": "2016-05-01 00:02:28"  },  {    "AM23SIG0206.AV": "594.0464",    "time": "2016-05-01 00:02:31"  },  {    "AM23SIG0206.AV": "594.0948",    "time": "2016-05-01 00:02:34"  },  {    "AM23SIG0206.AV": "594.0625",    "time": "2016-05-01 00:02:37"  },  {    "AM23SIG0206.AV": "594.0625",    "time": "2016-05-01 00:02:40"  },  {    "AM23SIG0206.AV": "594.0625",    "time": "2016-05-01 00:02:43"  },  {    "AM23SIG0206.AV": "594.0787",    "time": "2016-05-01 00:02:46"  },  {    "AM23SIG0206.AV": "594.045",    "time": "2016-05-01 00:02:49"  },  {    "AM23SIG0206.AV": "594.0127",    "time": "2016-05-01 00:02:52"  },  {    "AM23SIG0206.AV": "594.0464",    "time": "2016-05-01 00:02:55"  },  {    "AM23SIG0206.AV": "594.014",    "time": "2016-05-01 00:02:58"  },  {    "AM23SIG0206.AV": "594.0464",    "time": "2016-05-01 00:03:01"  },  {    "AM23SIG0206.AV": "593.9818",    "time": "2016-05-01 00:03:04"  },  {    "AM23SIG0206.AV": "593.9495",    "time": "2016-05-01 00:03:07"  },  {    "AM23SIG0206.AV": "593.9481",    "time": "2016-05-01 00:03:10"  },  {    "AM23SIG0206.AV": "593.8997",    "time": "2016-05-01 00:03:13"  },  {    "AM23SIG0206.AV": "593.8997",    "time": "2016-05-01 00:03:16"  },  {    "AM23SIG0206.AV": "593.8673",    "time": "2016-05-01 00:03:19"  },  {    "AM23SIG0206.AV": "593.835",    "time": "2016-05-01 00:03:22"  },  {    "AM23SIG0206.AV": "593.8027",    "time": "2016-05-01 00:03:25"  },  {    "AM23SIG0206.AV": "593.7704",    "time": "2016-05-01 00:03:28"  },  {    "AM23SIG0206.AV": "593.7704",    "time": "2016-05-01 00:03:31"  },  {    "AM23SIG0206.AV": "593.7193",    "time": "2016-05-01 00:03:34"  },  {    "AM23SIG0206.AV": "593.7193",    "time": "2016-05-01 00:03:37"  },  {    "AM23SIG0206.AV": "593.6735",    "time": "2016-05-01 00:03:40"  },  {    "AM23SIG0206.AV": "593.625",    "time": "2016-05-01 00:03:43"  },  {    "AM23SIG0206.AV": "593.6062",    "time": "2016-05-01 00:03:46"  },  {    "AM23SIG0206.AV": "593.6062",    "time": "2016-05-01 00:03:49"  },  {    "AM23SIG0206.AV": "593.5442",    "time": "2016-05-01 00:03:52"  },  {    "AM23SIG0206.AV": "593.528",    "time": "2016-05-01 00:03:55"  },  {    "AM23SIG0206.AV": "593.4931",    "time": "2016-05-01 00:03:58"  },  {    "AM23SIG0206.AV": "593.4931",    "time": "2016-05-01 00:04:01"  },  {    "AM23SIG0206.AV": "593.4446",    "time": "2016-05-01 00:04:04"  },  {    "AM23SIG0206.AV": "593.4285",    "time": "2016-05-01 00:04:07"  },  {    "AM23SIG0206.AV": "593.3962",    "time": "2016-05-01 00:04:10"  },  {    "AM23SIG0206.AV": "593.38",    "time": "2016-05-01 00:04:13"  },  {    "AM23SIG0206.AV": "593.3774",    "time": "2016-05-01 00:04:16"  },  {    "AM23SIG0206.AV": "593.38",    "time": "2016-05-01 00:04:19"  },  {    "AM23SIG0206.AV": "593.3154",    "time": "2016-05-01 00:04:22"  },  {    "AM23SIG0206.AV": "593.3477",    "time": "2016-05-01 00:04:25"  },  {    "AM23SIG0206.AV": "593.3477",    "time": "2016-05-01 00:04:28"  },  {    "AM23SIG0206.AV": "593.3451",    "time": "2016-05-01 00:04:31"  },  {    "AM23SIG0206.AV": "593.3451",    "time": "2016-05-01 00:04:34"  },  {    "AM23SIG0206.AV": "593.3451",    "time": "2016-05-01 00:04:37"  },  {    "AM23SIG0206.AV": "593.3425",    "time": "2016-05-01 00:04:40"  },  {    "AM23SIG0206.AV": "593.4097",    "time": "2016-05-01 00:04:43"  },  {    "AM23SIG0206.AV": "593.4097",    "time": "2016-05-01 00:04:46"  },  {    "AM23SIG0206.AV": "593.4581",    "time": "2016-05-01 00:04:49"  },  {    "AM23SIG0206.AV": "593.4608",    "time": "2016-05-01 00:04:52"  },  {    "AM23SIG0206.AV": "593.5228",    "time": "2016-05-01 00:04:55"  },  {    "AM23SIG0206.AV": "593.5066",    "time": "2016-05-01 00:04:58"  },  {    "AM23SIG0206.AV": "593.5739",    "time": "2016-05-01 00:05:01"  },  {    "AM23SIG0206.AV": "593.6035",    "time": "2016-05-01 00:05:04"  },  {    "AM23SIG0206.AV": "593.6036",    "time": "2016-05-01 00:05:07"  },  {    "AM23SIG0206.AV": "593.6359",    "time": "2016-05-01 00:05:10"  },  {    "AM23SIG0206.AV": "593.6843",    "time": "2016-05-01 00:05:13"  },  {    "AM23SIG0206.AV": "593.7141",    "time": "2016-05-01 00:05:16"  },  {    "AM23SIG0206.AV": "593.7463",    "time": "2016-05-01 00:05:19"  },  {    "AM23SIG0206.AV": "593.749",    "time": "2016-05-01 00:05:22"  },  {    "AM23SIG0206.AV": "593.7787",    "time": "2016-05-01 00:05:25"  },  {    "AM23SIG0206.AV": "593.7974",    "time": "2016-05-01 00:05:28"  },  {    "AM23SIG0206.AV": "593.8297",    "time": "2016-05-01 00:05:31"  },  {    "AM23SIG0206.AV": "593.8782",    "time": "2016-05-01 00:05:34"  },  {    "AM23SIG0206.AV": "593.9241",    "time": "2016-05-01 00:05:37"  },  {    "AM23SIG0206.AV": "593.9105",    "time": "2016-05-01 00:05:40"  },  {    "AM23SIG0206.AV": "593.9752",    "time": "2016-05-01 00:05:43"  },  {    "AM23SIG0206.AV": "593.9887",    "time": "2016-05-01 00:05:46"  },  {    "AM23SIG0206.AV": "594.0049",    "time": "2016-05-01 00:05:49"  },  {    "AM23SIG0206.AV": "594.0049",    "time": "2016-05-01 00:05:52"  },  {    "AM23SIG0206.AV": "594.021",    "time": "2016-05-01 00:05:55"  },  {    "AM23SIG0206.AV": "594.0372",    "time": "2016-05-01 00:05:58"  },  {    "AM23SIG0206.AV": "594.021",    "time": "2016-05-01 00:06:01"  },  {    "AM23SIG0206.AV": "594.0695",    "time": "2016-05-01 00:06:04"  },  {    "AM23SIG0206.AV": "594.0856",    "time": "2016-05-01 00:06:07"  },  {    "AM23SIG0206.AV": "594.0857",    "time": "2016-05-01 00:06:10"  },  {    "AM23SIG0206.AV": "594.0857",    "time": "2016-05-01 00:06:13"  },  {    "AM23SIG0206.AV": "594.1476",    "time": "2016-05-01 00:06:16"  },  {    "AM23SIG0206.AV": "594.0830000000001",    "time": "2016-05-01 00:06:19"  },  {    "AM23SIG0206.AV": "594.1154",    "time": "2016-05-01 00:06:22"  },  {    "AM23SIG0206.AV": "594.1179",    "time": "2016-05-01 00:06:25"  },  {    "AM23SIG0206.AV": "594.1179",    "time": "2016-05-01 00:06:28"  },  {    "AM23SIG0206.AV": "594.0830000000001",    "time": "2016-05-01 00:06:31"  },  {    "AM23SIG0206.AV": "594.0830000000001",    "time": "2016-05-01 00:06:34"  },  {    "AM23SIG0206.AV": "594.0507",    "time": "2016-05-01 00:06:37"  },  {    "AM23SIG0206.AV": "594.0830000000001",    "time": "2016-05-01 00:06:40"  },  {    "AM23SIG0206.AV": "594.0830000000001",    "time": "2016-05-01 00:06:43"  },  {    "AM23SIG0206.AV": "594.0507",    "time": "2016-05-01 00:06:46"  },  {    "AM23SIG0206.AV": "594.0345",    "time": "2016-05-01 00:06:49"  },  {    "AM23SIG0206.AV": "594.0022",    "time": "2016-05-01 00:06:52"  },  {    "AM23SIG0206.AV": "593.9861",    "time": "2016-05-01 00:06:55"  },  {    "AM23SIG0206.AV": "593.9699",    "time": "2016-05-01 00:06:58"  },  {    "AM23SIG0206.AV": "593.9363",    "time": "2016-05-01 00:07:01"  },  {    "AM23SIG0206.AV": "593.9039",    "time": "2016-05-01 00:07:04"  },  {    "AM23SIG0206.AV": "593.8568",    "time": "2016-05-01 00:07:07"  },  {    "AM23SIG0206.AV": "593.8555",    "time": "2016-05-01 00:07:10"  },  {    "AM23SIG0206.AV": "593.8568",    "time": "2016-05-01 00:07:13"  },  {    "AM23SIG0206.AV": "593.8232",    "time": "2016-05-01 00:07:16"  },  {    "AM23SIG0206.AV": "593.776",    "time": "2016-05-01 00:07:19"  },  {    "AM23SIG0206.AV": "593.7747",    "time": "2016-05-01 00:07:22"  },  {    "AM23SIG0206.AV": "593.7263",    "time": "2016-05-01 00:07:25"  },  {    "AM23SIG0206.AV": "593.7424",    "time": "2016-05-01 00:07:28"  },  {    "AM23SIG0206.AV": "593.6778",    "time": "2016-05-01 00:07:31"  },  {    "AM23SIG0206.AV": "593.6616",    "time": "2016-05-01 00:07:34"  },  {    "AM23SIG0206.AV": "593.6589",    "time": "2016-05-01 00:07:37"  },  {    "AM23SIG0206.AV": "593.6293",    "time": "2016-05-01 00:07:40"  },  {    "AM23SIG0206.AV": "593.5944",    "time": "2016-05-01 00:07:43"  },  {    "AM23SIG0206.AV": "593.6267",    "time": "2016-05-01 00:07:46"  },  {    "AM23SIG0206.AV": "593.5944",    "time": "2016-05-01 00:07:49"  },  {    "AM23SIG0206.AV": "593.5944",    "time": "2016-05-01 00:07:52"  },  {    "AM23SIG0206.AV": "593.5944",    "time": "2016-05-01 00:07:55"  },  {    "AM23SIG0206.AV": "593.5782",    "time": "2016-05-01 00:07:58"  },  {    "AM23SIG0206.AV": "593.5647",    "time": "2016-05-01 00:08:01"  },  {    "AM23SIG0206.AV": "593.562",    "time": "2016-05-01 00:08:04"  },  {    "AM23SIG0206.AV": "593.5782",    "time": "2016-05-01 00:08:07"  },  {    "AM23SIG0206.AV": "593.5298",    "time": "2016-05-01 00:08:10"  },  {    "AM23SIG0206.AV": "593.5944",    "time": "2016-05-01 00:08:13"  },  {    "AM23SIG0206.AV": "593.5621",    "time": "2016-05-01 00:08:16"  },  {    "AM23SIG0206.AV": "593.5621",    "time": "2016-05-01 00:08:19"  },  {    "AM23SIG0206.AV": "593.5944",    "time": "2016-05-01 00:08:22"  },  {    "AM23SIG0206.AV": "593.5944",    "time": "2016-05-01 00:08:25"  },  {    "AM23SIG0206.AV": "593.5917",    "time": "2016-05-01 00:08:28"  },  {    "AM23SIG0206.AV": "593.659",    "time": "2016-05-01 00:08:31"  },  {    "AM23SIG0206.AV": "593.6887",    "time": "2016-05-01 00:08:34"  },  {    "AM23SIG0206.AV": "593.6564",    "time": "2016-05-01 00:08:37"  },  {    "AM23SIG0206.AV": "593.6402",    "time": "2016-05-01 00:08:40"  },  {    "AM23SIG0206.AV": "593.6752",    "time": "2016-05-01 00:08:43"  },  {    "AM23SIG0206.AV": "593.6725",    "time": "2016-05-01 00:08:46"  },  {    "AM23SIG0206.AV": "593.6725",    "time": "2016-05-01 00:08:49"  },  {    "AM23SIG0206.AV": "593.6725",    "time": "2016-05-01 00:08:52"  },  {    "AM23SIG0206.AV": "593.7022",    "time": "2016-05-01 00:08:55"  },  {    "AM23SIG0206.AV": "593.6699",    "time": "2016-05-01 00:08:58"  },  {    "AM23SIG0206.AV": "593.6402",    "time": "2016-05-01 00:09:01"  },  {    "AM23SIG0206.AV": "593.6699",    "time": "2016-05-01 00:09:04"  },  {    "AM23SIG0206.AV": "593.6564",    "time": "2016-05-01 00:09:07"  },  {    "AM23SIG0206.AV": "593.6537",    "time": "2016-05-01 00:09:10"  },  {    "AM23SIG0206.AV": "593.5917",    "time": "2016-05-01 00:09:13"  },  {    "AM23SIG0206.AV": "593.5568",    "time": "2016-05-01 00:09:16"  },  {    "AM23SIG0206.AV": "593.573",    "time": "2016-05-01 00:09:19"  },  {    "AM23SIG0206.AV": "593.5083",    "time": "2016-05-01 00:09:22"  },  {    "AM23SIG0206.AV": "593.4922",    "time": "2016-05-01 00:09:25"  },  {    "AM23SIG0206.AV": "593.4786",    "time": "2016-05-01 00:09:28"  },  {    "AM23SIG0206.AV": "593.4463",    "time": "2016-05-01 00:09:31"  },  {    "AM23SIG0206.AV": "593.4114",    "time": "2016-05-01 00:09:34"  },  {    "AM23SIG0206.AV": "593.3953",    "time": "2016-05-01 00:09:37"  },  {    "AM23SIG0206.AV": "593.3791",    "time": "2016-05-01 00:09:40"  },  {    "AM23SIG0206.AV": "593.3306",    "time": "2016-05-01 00:09:43"  },  {    "AM23SIG0206.AV": "593.3009",    "time": "2016-05-01 00:09:46"  },  {    "AM23SIG0206.AV": "593.2983",    "time": "2016-05-01 00:09:49"  },  {    "AM23SIG0206.AV": "593.266",    "time": "2016-05-01 00:09:52"  },  {    "AM23SIG0206.AV": "593.2499",    "time": "2016-05-01 00:09:55"  },  {    "AM23SIG0206.AV": "593.3145",    "time": "2016-05-01 00:09:58"  },  {    "AM23SIG0206.AV": "593.2821",    "time": "2016-05-01 00:10:01"  },  {    "AM23SIG0206.AV": "593.266",    "time": "2016-05-01 00:10:04"  },  {    "AM23SIG0206.AV": "593.2485",    "time": "2016-05-01 00:10:07"  },  {    "AM23SIG0206.AV": "593.2809",    "time": "2016-05-01 00:10:10"  },  {    "AM23SIG0206.AV": "593.2485",    "time": "2016-05-01 00:10:13"  },  {    "AM23SIG0206.AV": "593.2809",    "time": "2016-05-01 00:10:16"  },  {    "AM23SIG0206.AV": "593.2809",    "time": "2016-05-01 00:10:19"  },  {    "AM23SIG0206.AV": "593.2809",    "time": "2016-05-01 00:10:22"  },  {    "AM23SIG0206.AV": "593.297",    "time": "2016-05-01 00:10:25"  },  {    "AM23SIG0206.AV": "593.2646",    "time": "2016-05-01 00:10:28"  },  {    "AM23SIG0206.AV": "593.297",    "time": "2016-05-01 00:10:31"  },  {    "AM23SIG0206.AV": "593.297",    "time": "2016-05-01 00:10:34"  },  {    "AM23SIG0206.AV": "593.3293",    "time": "2016-05-01 00:10:37"  },  {    "AM23SIG0206.AV": "593.3131",    "time": "2016-05-01 00:10:40"  },  {    "AM23SIG0206.AV": "593.3293",    "time": "2016-05-01 00:10:43"  },  {    "AM23SIG0206.AV": "593.3293",    "time": "2016-05-01 00:10:46"  }]

這個是.json文件（python的大數據模型預測產生的數據我拿來用一哈）

總結

以上所述是小編給大家介紹的HTML5+JS+JQuery+ECharts實現異步加載問題，希望對大家有所幫助，如果大家有任何問題歡迎給我留言，小編會及時回復大家的！

上一篇：詳解最新vue-cli 2.9.1的webpack存在問題

下一篇：詳解如何使用 vue-cli 開發多頁應用