HTML5+JS+JQuery+ECharts实现异步加载问题

2024-05-06 16:41:26

字体：大中小

来源：转载

供稿：网友

这几天，看了一下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个容量，放不下怎么办，没关系啊，你先取一个出来不就行了嘛，就这样循环下去~~~~

（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实现异步加载问题，希望对大家有所帮助，如果大家有任何问题欢迎给我留言，小编会及时回复大家的！

注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。

上一篇：基于javascript 显式转换与隐式转换(详解)

下一篇：EasyUI的DataGrid绑定Json数据源的示例代码