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

更新时间：2020-06-19 19:06:01 作者：startmvc

这几天，看了一下ECharts官网的API和Demo发现很有意思，于是就利用模型预测产生的数据做一

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