HTML5+JS+JQuery+ECharts實(shí)現(xiàn)異步加載問(wèn)題

更新時(shí)間：2017年12月16日 16:35:01 作者：哈哈丶大傻瓜

這篇文章主要介紹了HTML5+JS+JQuery+ECharts實(shí)現(xiàn)異步加載問(wèn)題,需要的朋友可以參考下

這幾天，看了一下ECharts官網(wǎng)的API和Demo發(fā)現(xiàn)很有意思，于是就利用模型預(yù)測(cè)產(chǎn)生的數(shù)據(jù)做一個(gè)偽實(shí)時(shí)的動(dòng)態(tài)數(shù)據(jù)顯示。

首先，創(chuàng)建一個(gè)index.html的文件，我用的vscode打開(kāi)的，進(jìn)行編寫(xiě)。

1.插入一個(gè)標(biāo)簽

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

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

2.在body下建一個(gè)<script>腳本（為什么要在body下寫(xiě)js腳本呢？因?yàn)檫@是提高用戶體驗(yàn)，可自行百度深層次的原因~~~）。

3.腳本寫(xiě)啥呢？別急，慢慢來(lái)啊~~

（1）首先，我們來(lái)建一個(gè)echarts的對(duì)象，就叫他MyChart吧

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

（2）建一個(gè)setoption這是初始化圖的，填一些基本參數(shù)（可通過(guò)此鏈接飛到Echarts官網(wǎng)的配置參考一下）

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

其中不懂堆棧的（鏈接在此這個(gè)是我Google的，有可能被墻~~）不懂push，shift操作數(shù)據(jù)的（鏈接在此這個(gè)應(yīng)該不會(huì)被墻~~）

$.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:"參數(shù)",
              data:data
            }
          ]});
          for(var nn=0;nn<2;nn++){
            datas.shift()
            }
          },2000);
        }
      }
    },
    error:function(errorMsg){
      alert("圖表請(qǐng)求數(shù)據(jù)失敗！");
      myChart.hideLoading();
      myChart_2.hideLoading();
    }
  })

我來(lái)解釋一下，這個(gè)異步加載的原理是這樣子的：

（1）我們現(xiàn)在加載一個(gè).json文件，存在一個(gè)變量result里，開(kāi)始進(jìn)行數(shù)據(jù)的操作，利用堆棧的概念先存一個(gè)圖上要顯示的數(shù)據(jù)量，假設(shè)是1000個(gè)點(diǎn)，存到data里(這是一個(gè)隊(duì)列）你如果要實(shí)現(xiàn)動(dòng)態(tài)的實(shí)時(shí)的數(shù)據(jù)，看著數(shù)據(jù)他會(huì)動(dòng)~~~~你需要存一個(gè)數(shù)據(jù)進(jìn)去，但是呢這個(gè)隊(duì)列只有1000個(gè)容量，放不下怎么辦，沒(méi)關(guān)系啊，你先取一個(gè)出來(lái)不就行了嘛，就這樣循環(huán)下去~~~~

（2）但是啊，取一個(gè)存一個(gè)太麻煩了，我們?cè)谠O(shè)置一個(gè)定時(shí)器setInterval()在這個(gè)里面，每過(guò)2s更新2個(gè)點(diǎn)（怎么更新呢，就是data.shift()

data.push()

模擬了堆棧~~~~

這樣就達(dá)到了動(dòng)態(tài)數(shù)據(jù)了~~~~

好吧，如果只是這樣也太low了，我要實(shí)現(xiàn)一個(gè)框架+數(shù)據(jù)庫(kù)+前端的真正數(shù)據(jù)動(dòng)起來(lái)~~~~讓我在研究幾天~~~~~~

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

<!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:'異步數(shù)據(jù)加載'
    },
    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:'參數(shù)',
      type:'line',
      data:[]
    }]
  });
  myChart_2.setOption({
    title:{
      text:'異步數(shù)據(jù)加載'
    },
    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:'參數(shù)',
      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:"參數(shù)",
              data:data
            }
          ]});
          myChart_2.setOption({
          xAxis:{
            data:date
          },
          series:[
            {
              name:"參數(shù)",
              data:data
            }
          ]});
          for(var nn=0;nn<2;nn++){
            datas.shift()
            }
          },2000);
        }
      }
    },
    error:function(errorMsg){
      alert("圖表請(qǐng)求數(shù)據(jù)失敗！");
      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"
  }
]

這個(gè)是.json文件（python的大數(shù)據(jù)模型預(yù)測(cè)產(chǎn)生的數(shù)據(jù)我拿來(lái)用一哈）

總結(jié)

以上所述是小編給大家介紹的HTML5+JS+JQuery+ECharts實(shí)現(xiàn)異步加載問(wèn)題，希望對(duì)大家有所幫助，如果大家有任何問(wèn)題歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

您可能感興趣的文章: