当前位置：Gxlcms > JavaScript > HTML5+JS+JQuery+ECharts实现异步加载问题

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

时间：2021-07-01 10:21:17 帮助过：11人阅读

这几天，看了一下ECharts官网的API和Demo发现很有意思，于是就利用模型预测产生的数据做一个伪实时的动态数据显示 。

首先，创建一个index.html的文件，我用的vscode打开的，进行编写。

1.插入一个标签

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

设置他的一些style（可自行美化，我很懒！！！）。

2.在body下建一个<script>脚本（为什么要在body下写js脚本呢？因为这是提高用户体验，可自行百度深层次的原因~~~）。

3.脚本写啥呢？别急，慢慢来啊~~

    （1）首先，我们来建一个echarts的对象，就叫他MyChart吧    

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

    （2）建一个setoption这是初始化图的，填一些基本参数（可通过此链接飞到Echarts官网的配置参考一下）

    （3）初始化了之后，我们就可以ajax异步读取本地文件了~~~~

其中不懂堆栈的（链接在此这个是我Google的，有可能被墙~~）不懂push，shift操作数据的（链接在此这个应该不会被墙~~）

  1. $.ajax({
  2.     type:"get",
  3.     // async:true,
  4.     url:"test_data.json",
  5.     data:{},
  6.     dataType:"json",
  7.     success:function(result){
  8.       var datas=result
  9.       if(result){
  10.         var m=0;
  11.         for(var i=0;i<result.length;i++){ 
  12.           if(m<1000){
  13.             datas.shift();      
  14.             date.push(result[i]["time"]);
  15.             data.push(result[i]["AM23SIG0206.AV"]);
  16.             m+=1;
  17.           }
  18.           else{       
  19.             break;
  20.           }
  21.         myChart.hideLoading();
  22.         setInterval(function(){
  23.           for(var n=0;n<2;n++){
  24.             date.shift();
  25.             date.push(datas[n]["time"]);
  26.             data.shift();
  27.             data.push(datas[n]["AM23SIG0206.AV"]);
  28.           }                         
  29.           myChart.setOption({
  30.           xAxis:{
  31.             data:date
  32.           },
  33.           series:[
  34.             {
  35.               name:"参数",
  36.               data:data
  37.             }
  38.           ]});
  39.           for(var nn=0;nn<2;nn++){
  40.             datas.shift()
  41.             }
  42.           },2000);
  43.         }
  44.       }
  45.     },
  46.     error:function(errorMsg){
  47.       alert("图表请求数据失败！");
  48.       myChart.hideLoading();
  49.       myChart_2.hideLoading();
  50.     }
  51.   })

我来解释一下，这个异步加载的原理是这样子的：

（1）我们现在加载一个.json文件，存在一个变量result里，开始进行数据的操作，利用堆栈的概念先存一个图上要显示的数据量，假设是1000个点，存到data里(这是一个队列）你如果要实现动态的实时的数据，看着数据他会动~~~~你需要存一个数据进去，但是呢这个队列只有1000个容量，放不下怎么办，没关系啊，你先取一个出来不就行了嘛，就这样循环下去~~~~

（2）但是啊，取一个存一个太麻烦了，我们在设置一个定时器setInterval()在这个里面，每过2s更新2个点（怎么更新呢，就是data.shift()

data.push()

模拟了堆栈~~~~

这样就达到了动态数据了~~~~

好吧，如果只是这样也太low了，我要实现一个框架+数据库+前端的真正数据动起来~~~~让我在研究几天~~~~~~

好了，不废话了，下面是源码，有需要的童鞋可以自己跑一下，看看可不可以动~~~~~

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Charts</title>
  6.   <script type="text/javascript" src="echarts.min.js"></script>
  7.   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
  8. </head>
  9. <body>
  10.   <div id="main" style="width:600px;height:400px;"></div>
  11.   <div id="main_2" style="width:600px;height:400px;"></div>
  12. </body>
  13. <script type="text/javascript">
  14.   var myChart = echarts.init(document.getElementById('main'));
  15.   var myChart_2 = echarts.init(document.getElementById('main_2'));
  16.   myChart.setOption({
  17.     title:{
  18.       text:'异步数据加载'
  19.     },
  20.     tooltip:{
  21.       show:true,
  22.     },
  23.     xAxis:{
  24.       type:'category',
  25.       boundaryGap:false,
  26.       data:[],
  27.       splitLine: {
  28.       show: false
  29.       },
  30.     },
  31.     yAxis:{
  32.       boundaryGap:[0,'100%'],
  33.       type:'value',
  34.       min:'dataMin',
  35.       max:'dataMax',
  36.       splitLine: {
  37.       show: false
  38.       },
  39.     },
  40.     series:[{
  41.       name:'参数',
  42.       type:'line',
  43.       data:[]
  44.     }]
  45.   });
  46.   myChart_2.setOption({
  47.     title:{
  48.       text:'异步数据加载'
  49.     },
  50.     tooltip:{
  51.       show:true,
  52.     },
  53.     xAxis:{
  54.       type:'category',
  55.       boundaryGap:false,
  56.       data:[],
  57.       splitLine: {
  58.       show: false
  59.       },
  60.     },
  61.     yAxis:{
  62.       boundaryGap:[0,'100%'],
  63.       type:'value',
  64.       min:'dataMin',
  65.       max:'dataMax',
  66.       splitLine: {
  67.       show: false
  68.       },
  69.     },
  70.     series:[{
  71.       name:'参数',
  72.       type:'line',
  73.       data:[]
  74.     }]
  75.   });
  76.   myChart.showLoading();
  77.   myChart_2.showLoading();
  78.   var date = [];
  79.   var data = [];
  80.   $.ajax({
  81.     type:"get",
  82.     // async:true,
  83.     url:"test_data.json",
  84.     data:{},
  85.     dataType:"json",
  86.     success:function(result){
  87.       var datas=result
  88.       if(result){
  89.         var m=0;
  90.         for(var i=0;i<result.length;i++){ 
  91.           if(m<1000){
  92.             datas.shift();      
  93.             date.push(result[i]["time"]);
  94.             data.push(result[i]["AM23SIG0206.AV"]);
  95.             m+=1;
  96.           }
  97.           else{       
  98.             break;
  99.           }
  100.         myChart.hideLoading();
  101.         myChart_2.hideLoading();
  102.         setInterval(function(){
  103.           for(var n=0;n<2;n++){
  104.             date.shift();
  105.             date.push(datas[n]["time"]);
  106.             data.shift();
  107.             data.push(datas[n]["AM23SIG0206.AV"]);
  108.           }                         
  109.           myChart.setOption({
  110.           xAxis:{
  111.             data:date
  112.           },
  113.           series:[
  114.             {
  115.               name:"参数",
  116.               data:data
  117.             }
  118.           ]});
  119.           myChart_2.setOption({
  120.           xAxis:{
  121.             data:date
  122.           },
  123.           series:[
  124.             {
  125.               name:"参数",
  126.               data:data
  127.             }
  128.           ]});
  129.           for(var nn=0;nn<2;nn++){
  130.             datas.shift()
  131.             }
  132.           },2000);
  133.         }
  134.       }
  135.     },
  136.     error:function(errorMsg){
  137.       alert("图表请求数据失败！");
  138.       myChart.hideLoading();
  139.       myChart_2.hideLoading();
  140.     }
  141.   })
  142. </script>
  143. </html>
  1. [
  2.   {
  3.     "AM23SIG0206.AV": "594.4071",
  4.     "time": "2016-05-01 00:00:01"
  5.   },
  6.   {
  7.     "AM23SIG0206.AV": "594.4207",
  8.     "time": "2016-05-01 00:00:04"
  9.   },
  10.   {
  11.     "AM23SIG0206.AV": "594.3883",
  12.     "time": "2016-05-01 00:00:07"
  13.   },
  14.   {
  15.     "AM23SIG0206.AV": "594.3586",
  16.     "time": "2016-05-01 00:00:10"
  17.   },
  18.   {
  19.     "AM23SIG0206.AV": "594.3883",
  20.     "time": "2016-05-01 00:00:13"
  21.   },
  22.   {
  23.     "AM23SIG0206.AV": "594.3398",
  24.     "time": "2016-05-01 00:00:16"
  25.   },
  26.   {
  27.     "AM23SIG0206.AV": "594.3398",
  28.     "time": "2016-05-01 00:00:19"
  29.   },
  30.   {
  31.     "AM23SIG0206.AV": "594.3075",
  32.     "time": "2016-05-01 00:00:22"
  33.   },
  34.   {
  35.     "AM23SIG0206.AV": "594.3076",
  36.     "time": "2016-05-01 00:00:25"
  37.   },
  38.   {
  39.     "AM23SIG0206.AV": "594.2753",
  40.     "time": "2016-05-01 00:00:28"
  41.   },
  42.   {
  43.     "AM23SIG0206.AV": "594.2753",
  44.     "time": "2016-05-01 00:00:31"
  45.   },
  46.   {
  47.     "AM23SIG0206.AV": "594.2429",
  48.     "time": "2016-05-01 00:00:34"
  49.   },
  50.   {
  51.     "AM23SIG0206.AV": "594.2753",
  52.     "time": "2016-05-01 00:00:37"
  53.   },
  54.   {
  55.     "AM23SIG0206.AV": "594.2429",
  56.     "time": "2016-05-01 00:00:40"
  57.   },
  58.   {
  59.     "AM23SIG0206.AV": "594.2565",
  60.     "time": "2016-05-01 00:00:43"
  61.   },
  62.   {
  63.     "AM23SIG0206.AV": "594.3075",
  64.     "time": "2016-05-01 00:00:46"
  65.   },
  66.   {
  67.     "AM23SIG0206.AV": "594.2726",
  68.     "time": "2016-05-01 00:00:49"
  69.   },
  70.   {
  71.     "AM23SIG0206.AV": "594.2752",
  72.     "time": "2016-05-01 00:00:52"
  73.   },
  74.   {
  75.     "AM23SIG0206.AV": "594.2914",
  76.     "time": "2016-05-01 00:00:55"
  77.   },
  78.   {
  79.     "AM23SIG0206.AV": "594.2726",
  80.     "time": "2016-05-01 00:00:58"
  81.   },
  82.   {
  83.     "AM23SIG0206.AV": "594.3075",
  84.     "time": "2016-05-01 00:01:01"
  85.   },
  86.   {
  87.     "AM23SIG0206.AV": "594.3075",
  88.     "time": "2016-05-01 00:01:04"
  89.   },
  90.   {
  91.     "AM23SIG0206.AV": "594.2752",
  92.     "time": "2016-05-01 00:01:07"
  93.   },
  94.   {
  95.     "AM23SIG0206.AV": "594.259",
  96.     "time": "2016-05-01 00:01:10"
  97.   },
  98.   {
  99.     "AM23SIG0206.AV": "594.2752",
  100.     "time": "2016-05-01 00:01:13"
  101.   },
  102.   {
  103.     "AM23SIG0206.AV": "594.2403",
  104.     "time": "2016-05-01 00:01:16"
  105.   },
  106.   {
  107.     "AM23SIG0206.AV": "594.2402",
  108.     "time": "2016-05-01 00:01:19"
  109.   },
  110.   {
  111.     "AM23SIG0206.AV": "594.1918",
  112.     "time": "2016-05-01 00:01:22"
  113.   },
  114.   {
  115.     "AM23SIG0206.AV": "594.2241",
  116.     "time": "2016-05-01 00:01:25"
  117.   },
  118.   {
  119.     "AM23SIG0206.AV": "594.1918",
  120.     "time": "2016-05-01 00:01:28"
  121.   },
  122.   {
  123.     "AM23SIG0206.AV": "594.1595",
  124.     "time": "2016-05-01 00:01:31"
  125.   },
  126.   {
  127.     "AM23SIG0206.AV": "594.0975",
  128.     "time": "2016-05-01 00:01:34"
  129.   },
  130.   {
  131.     "AM23SIG0206.AV": "594.1272",
  132.     "time": "2016-05-01 00:01:37"
  133.   },
  134.   {
  135.     "AM23SIG0206.AV": "594.111",
  136.     "time": "2016-05-01 00:01:40"
  137.   },
  138.   {
  139.     "AM23SIG0206.AV": "594.1136",
  140.     "time": "2016-05-01 00:01:43"
  141.   },
  142.   {
  143.     "AM23SIG0206.AV": "594.0787",
  144.     "time": "2016-05-01 00:01:46"
  145.   },
  146.   {
  147.     "AM23SIG0206.AV": "594.0813",
  148.     "time": "2016-05-01 00:01:49"
  149.   },
  150.   {
  151.     "AM23SIG0206.AV": "594.0464",
  152.     "time": "2016-05-01 00:01:52"
  153.   },
  154.   {
  155.     "AM23SIG0206.AV": "594.014",
  156.     "time": "2016-05-01 00:01:55"
  157.   },
  158.   {
  159.     "AM23SIG0206.AV": "594.014",
  160.     "time": "2016-05-01 00:01:58"
  161.   },
  162.   {
  163.     "AM23SIG0206.AV": "594.0328",
  164.     "time": "2016-05-01 00:02:01"
  165.   },
  166.   {
  167.     "AM23SIG0206.AV": "594.049",
  168.     "time": "2016-05-01 00:02:04"
  169.   },
  170.   {
  171.     "AM23SIG0206.AV": "594.0464",
  172.     "time": "2016-05-01 00:02:07"
  173.   },
  174.   {
  175.     "AM23SIG0206.AV": "594.0464",
  176.     "time": "2016-05-01 00:02:10"
  177.   },
  178.   {
  179.     "AM23SIG0206.AV": "594.0464",
  180.     "time": "2016-05-01 00:02:13"
  181.   },
  182.   {
  183.     "AM23SIG0206.AV": "594.0787",
  184.     "time": "2016-05-01 00:02:16"
  185.   },
  186.   {
  187.     "AM23SIG0206.AV": "594.049",
  188.     "time": "2016-05-01 00:02:19"
  189.   },
  190.   {
  191.     "AM23SIG0206.AV": "594.0625",
  192.     "time": "2016-05-01 00:02:22"
  193.   },
  194.   {
  195.     "AM23SIG0206.AV": "594.0948",
  196.     "time": "2016-05-01 00:02:25"
  197.   },
  198.   {
  199.     "AM23SIG0206.AV": "594.0774",
  200.     "time": "2016-05-01 00:02:28"
  201.   },
  202.   {
  203.     "AM23SIG0206.AV": "594.0464",
  204.     "time": "2016-05-01 00:02:31"
  205.   },
  206.   {
  207.     "AM23SIG0206.AV": "594.0948",
  208.     "time": "2016-05-01 00:02:34"
  209.   },
  210.   {
  211.     "AM23SIG0206.AV": "594.0625",
  212.     "time": "2016-05-01 00:02:37"
  213.   },
  214.   {
  215.     "AM23SIG0206.AV": "594.0625",
  216.     "time": "2016-05-01 00:02:40"
  217.   },
  218.   {
  219.     "AM23SIG0206.AV": "594.0625",
  220.     "time": "2016-05-01 00:02:43"
  221.   },
  222.   {
  223.     "AM23SIG0206.AV": "594.0787",
  224.     "time": "2016-05-01 00:02:46"
  225.   },
  226.   {
  227.     "AM23SIG0206.AV": "594.045",
  228.     "time": "2016-05-01 00:02:49"
  229.   },
  230.   {
  231.     "AM23SIG0206.AV": "594.0127",
  232.     "time": "2016-05-01 00:02:52"
  233.   },
  234.   {
  235.     "AM23SIG0206.AV": "594.0464",
  236.     "time": "2016-05-01 00:02:55"
  237.   },
  238.   {
  239.     "AM23SIG0206.AV": "594.014",
  240.     "time": "2016-05-01 00:02:58"
  241.   },
  242.   {
  243.     "AM23SIG0206.AV": "594.0464",
  244.     "time": "2016-05-01 00:03:01"
  245.   },
  246.   {
  247.     "AM23SIG0206.AV": "593.9818",
  248.     "time": "2016-05-01 00:03:04"
  249.   },
  250.   {
  251.     "AM23SIG0206.AV": "593.9495",
  252.     "time": "2016-05-01 00:03:07"
  253.   },
  254.   {
  255.     "AM23SIG0206.AV": "593.9481",
  256.     "time": "2016-05-01 00:03:10"
  257.   },
  258.   {
  259.     "AM23SIG0206.AV": "593.8997",
  260.     "time": "2016-05-01 00:03:13"
  261.   },
  262.   {
  263.     "AM23SIG0206.AV": "593.8997",
  264.     "time": "2016-05-01 00:03:16"
  265.   },
  266.   {
  267.     "AM23SIG0206.AV": "593.8673",
  268.     "time": "2016-05-01 00:03:19"
  269.   },
  270.   {
  271.     "AM23SIG0206.AV": "593.835",
  272.     "time": "2016-05-01 00:03:22"
  273.   },
  274.   {
  275.     "AM23SIG0206.AV": "593.8027",
  276.     "time": "2016-05-01 00:03:25"
  277.   },
  278.   {
  279.     "AM23SIG0206.AV": "593.7704",
  280.     "time": "2016-05-01 00:03:28"
  281.   },
  282.   {
  283.     "AM23SIG0206.AV": "593.7704",
  284.     "time": "2016-05-01 00:03:31"
  285.   },
  286.   {
  287.     "AM23SIG0206.AV": "593.7193",
  288.     "time": "2016-05-01 00:03:34"
  289.   },
  290.   {
  291.     "AM23SIG0206.AV": "593.7193",
  292.     "time": "2016-05-01 00:03:37"
  293.   },
  294.   {
  295.     "AM23SIG0206.AV": "593.6735",
  296.     "time": "2016-05-01 00:03:40"
  297.   },
  298.   {
  299.     "AM23SIG0206.AV": "593.625",
  300.     "time": "2016-05-01 00:03:43"
  301.   },
  302.   {
  303.     "AM23SIG0206.AV": "593.6062",
  304.     "time": "2016-05-01 00:03:46"
  305.   },
  306.   {
  307.     "AM23SIG0206.AV": "593.6062",
  308.     "time": "2016-05-01 00:03:49"
  309.   },
  310.   {
  311.     "AM23SIG0206.AV": "593.5442",
  312.     "time": "2016-05-01 00:03:52"
  313.   },
  314.   {
  315.     "AM23SIG0206.AV": "593.528",
  316.     "time": "2016-05-01 00:03:55"
  317.   },
  318.   {
  319.     "AM23SIG0206.AV": "593.4931",
  320.     "time": "2016-05-01 00:03:58"
  321.   },
  322.   {
  323.     "AM23SIG0206.AV": "593.4931",
  324.     "time": "2016-05-01 00:04:01"
  325.   },
  326.   {
  327.     "AM23SIG0206.AV": "593.4446",
  328.     "time": "2016-05-01 00:04:04"
  329.   },
  330.   {
  331.     "AM23SIG0206.AV": "593.4285",
  332.     "time": "2016-05-01 00:04:07"
  333.   },
  334.   {
  335.     "AM23SIG0206.AV": "593.3962",
  336.     "time": "2016-05-01 00:04:10"
  337.   },
  338.   {
  339.     "AM23SIG0206.AV": "593.38",
  340.     "time": "2016-05-01 00:04:13"
  341.   },
  342.   {
  343.     "AM23SIG0206.AV": "593.3774",
  344.     "time": "2016-05-01 00:04:16"
  345.   },
  346.   {
  347.     "AM23SIG0206.AV": "593.38",
  348.     "time": "2016-05-01 00:04:19"
  349.   },
  350.   {
  351.     "AM23SIG0206.AV": "593.3154",
  352.     "time": "2016-05-01 00:04:22"
  353.   },
  354.   {
  355.     "AM23SIG0206.AV": "593.3477",
  356.     "time": "2016-05-01 00:04:25"
  357.   },
  358.   {
  359.     "AM23SIG0206.AV": "593.3477",
  360.     "time": "2016-05-01 00:04:28"
  361.   },
  362.   {
  363.     "AM23SIG0206.AV": "593.3451",
  364.     "time": "2016-05-01 00:04:31"
  365.   },
  366.   {
  367.     "AM23SIG0206.AV": "593.3451",
  368.     "time": "2016-05-01 00:04:34"
  369.   },
  370.   {
  371.     "AM23SIG0206.AV": "593.3451",
  372.     "time": "2016-05-01 00:04:37"
  373.   },
  374.   {
  375.     "AM23SIG0206.AV": "593.3425",
  376.     "time": "2016-05-01 00:04:40"
  377.   },
  378.   {
  379.     "AM23SIG0206.AV": "593.4097",
  380.     "time": "2016-05-01 00:04:43"
  381.   },
  382.   {
  383.     "AM23SIG0206.AV": "593.4097",
  384.     "time": "2016-05-01 00:04:46"
  385.   },
  386.   {
  387.     "AM23SIG0206.AV": "593.4581",
  388.     "time": "2016-05-01 00:04:49"
  389.   },
  390.   {
  391.     "AM23SIG0206.AV": "593.4608",
  392.     "time": "2016-05-01 00:04:52"
  393.   },
  394.   {
  395.     "AM23SIG0206.AV": "593.5228",
  396.     "time": "2016-05-01 00:04:55"
  397.   },
  398.   {
  399.     "AM23SIG0206.AV": "593.5066",
  400.     "time": "2016-05-01 00:04:58"
  401.   },
  402.   {
  403.     "AM23SIG0206.AV": "593.5739",
  404.     "time": "2016-05-01 00:05:01"
  405.   },
  406.   {
  407.     "AM23SIG0206.AV": "593.6035",
  408.     "time": "2016-05-01 00:05:04"
  409.   },
  410.   {
  411.     "AM23SIG0206.AV": "593.6036",
  412.     "time": "2016-05-01 00:05:07"
  413.   },
  414.   {
  415.     "AM23SIG0206.AV": "593.6359",
  416.     "time": "2016-05-01 00:05:10"
  417.   },
  418.   {
  419.     "AM23SIG0206.AV": "593.6843",
  420.     "time": "2016-05-01 00:05:13"
  421.   },
  422.   {
  423.     "AM23SIG0206.AV": "593.7141",
  424.     "time": "2016-05-01 00:05:16"
  425.   },
  426.   {
  427.     "AM23SIG0206.AV": "593.7463",
  428.     "time": "2016-05-01 00:05:19"
  429.   },
  430.   {
  431.     "AM23SIG0206.AV": "593.749",
  432.     "time": "2016-05-01 00:05:22"
  433.   },
  434.   {
  435.     "AM23SIG0206.AV": "593.7787",
  436.     "time": "2016-05-01 00:05:25"
  437.   },
  438.   {
  439.     "AM23SIG0206.AV": "593.7974",
  440.     "time": "2016-05-01 00:05:28"
  441.   },
  442.   {
  443.     "AM23SIG0206.AV": "593.8297",
  444.     "time": "2016-05-01 00:05:31"
  445.   },
  446.   {
  447.     "AM23SIG0206.AV": "593.8782",
  448.     "time": "2016-05-01 00:05:34"
  449.   },
  450.   {
  451.     "AM23SIG0206.AV": "593.9241",
  452.     "time": "2016-05-01 00:05:37"
  453.   },
  454.   {
  455.     "AM23SIG0206.AV": "593.9105",
  456.     "time": "2016-05-01 00:05:40"
  457.   },
  458.   {
  459.     "AM23SIG0206.AV": "593.9752",
  460.     "time": "2016-05-01 00:05:43"
  461.   },
  462.   {
  463.     "AM23SIG0206.AV": "593.9887",
  464.     "time": "2016-05-01 00:05:46"
  465.   },
  466.   {
  467.     "AM23SIG0206.AV": "594.0049",
  468.     "time": "2016-05-01 00:05:49"
  469.   },
  470.   {
  471.     "AM23SIG0206.AV": "594.0049",
  472.     "time": "2016-05-01 00:05:52"
  473.   },
  474.   {
  475.     "AM23SIG0206.AV": "594.021",
  476.     "time": "2016-05-01 00:05:55"
  477.   },
  478.   {
  479.     "AM23SIG0206.AV": "594.0372",
  480.     "time": "2016-05-01 00:05:58"
  481.   },
  482.   {
  483.     "AM23SIG0206.AV": "594.021",
  484.     "time": "2016-05-01 00:06:01"
  485.   },
  486.   {
  487.     "AM23SIG0206.AV": "594.0695",
  488.     "time": "2016-05-01 00:06:04"
  489.   },
  490.   {
  491.     "AM23SIG0206.AV": "594.0856",
  492.     "time": "2016-05-01 00:06:07"
  493.   },
  494.   {
  495.     "AM23SIG0206.AV": "594.0857",
  496.     "time": "2016-05-01 00:06:10"
  497.   },
  498.   {
  499.     "AM23SIG0206.AV": "594.0857",
  500.     "time": "2016-05-01 00:06:13"
  501.   },
  502.   {
  503.     "AM23SIG0206.AV": "594.1476",
  504.     "time": "2016-05-01 00:06:16"
  505.   },
  506.   {
  507.     "AM23SIG0206.AV": "594.0830000000001",
  508.     "time": "2016-05-01 00:06:19"
  509.   },
  510.   {
  511.     "AM23SIG0206.AV": "594.1154",
  512.     "time": "2016-05-01 00:06:22"
  513.   },
  514.   {
  515.     "AM23SIG0206.AV": "594.1179",
  516.     "time": "2016-05-01 00:06:25"
  517.   },
  518.   {
  519.     "AM23SIG0206.AV": "594.1179",
  520.     "time": "2016-05-01 00:06:28"
  521.   },
  522.   {
  523.     "AM23SIG0206.AV": "594.0830000000001",
  524.     "time": "2016-05-01 00:06:31"
  525.   },
  526.   {
  527.     "AM23SIG0206.AV": "594.0830000000001",
  528.     "time": "2016-05-01 00:06:34"
  529.   },
  530.   {
  531.     "AM23SIG0206.AV": "594.0507",
  532.     "time": "2016-05-01 00:06:37"
  533.   },
  534.   {
  535.     "AM23SIG0206.AV": "594.0830000000001",
  536.     "time": "2016-05-01 00:06:40"
  537.   },
  538.   {
  539.     "AM23SIG0206.AV": "594.0830000000001",
  540.     "time": "2016-05-01 00:06:43"
  541.   },
  542.   {
  543.     "AM23SIG0206.AV": "594.0507",
  544.     "time": "2016-05-01 00:06:46"
  545.   },
  546.   {
  547.     "AM23SIG0206.AV": "594.0345",
  548.     "time": "2016-05-01 00:06:49"
  549.   },
  550.   {
  551.     "AM23SIG0206.AV": "594.0022",
  552.     "time": "2016-05-01 00:06:52"
  553.   },
  554.   {
  555.     "AM23SIG0206.AV": "593.9861",
  556.     "time": "2016-05-01 00:06:55"
  557.   },
  558.   {
  559.     "AM23SIG0206.AV": "593.9699",
  560.     "time": "2016-05-01 00:06:58"
  561.   },
  562.   {
  563.     "AM23SIG0206.AV": "593.9363",
  564.     "time": "2016-05-01 00:07:01"
  565.   },
  566.   {
  567.     "AM23SIG0206.AV": "593.9039",
  568.     "time": "2016-05-01 00:07:04"
  569.   },
  570.   {
  571.     "AM23SIG0206.AV": "593.8568",
  572.     "time": "2016-05-01 00:07:07"
  573.   },
  574.   {
  575.     "AM23SIG0206.AV": "593.8555",
  576.     "time": "2016-05-01 00:07:10"
  577.   },
  578.   {
  579.     "AM23SIG0206.AV": "593.8568",
  580.     "time": "2016-05-01 00:07:13"
  581.   },
  582.   {
  583.     "AM23SIG0206.AV": "593.8232",
  584.     "time": "2016-05-01 00:07:16"
  585.   },
  586.   {
  587.     "AM23SIG0206.AV": "593.776",
  588.     "time": "2016-05-01 00:07:19"
  589.   },
  590.   {
  591.     "AM23SIG0206.AV": "593.7747",
  592.     "time": "2016-05-01 00:07:22"
  593.   },
  594.   {
  595.     "AM23SIG0206.AV": "593.7263",
  596.     "time": "2016-05-01 00:07:25"
  597.   },
  598.   {
  599.     "AM23SIG0206.AV": "593.7424",
  600.     "time": "2016-05-01 00:07:28"
  601.   },
  602.   {
  603.     "AM23SIG0206.AV": "593.6778",
  604.     "time": "2016-05-01 00:07:31"
  605.   },
  606.   {
  607.     "AM23SIG0206.AV": "593.6616",
  608.     "time": "2016-05-01 00:07:34"
  609.   },
  610.   {
  611.     "AM23SIG0206.AV": "593.6589",
  612.     "time": "2016-05-01 00:07:37"
  613.   },
  614.   {
  615.     "AM23SIG0206.AV": "593.6293",
  616.     "time": "2016-05-01 00:07:40"
  617.   },
  618.   {
  619.     "AM23SIG0206.AV": "593.5944",
  620.     "time": "2016-05-01 00:07:43"
  621.   },
  622.   {
  623.     "AM23SIG0206.AV": "593.6267",
  624.     "time": "2016-05-01 00:07:46"
  625.   },
  626.   {
  627.     "AM23SIG0206.AV": "593.5944",
  628.     "time": "2016-05-01 00:07:49"
  629.   },
  630.   {
  631.     "AM23SIG0206.AV": "593.5944",
  632.     "time": "2016-05-01 00:07:52"
  633.   },
  634.   {
  635.     "AM23SIG0206.AV": "593.5944",
  636.     "time": "2016-05-01 00:07:55"
  637.   },
  638.   {
  639.     "AM23SIG0206.AV": "593.5782",
  640.     "time": "2016-05-01 00:07:58"
  641.   },
  642.   {
  643.     "AM23SIG0206.AV": "593.5647",
  644.     "time": "2016-05-01 00:08:01"
  645.   },
  646.   {
  647.     "AM23SIG0206.AV": "593.562",
  648.     "time": "2016-05-01 00:08:04"
  649.   },
  650.   {
  651.     "AM23SIG0206.AV": "593.5782",
  652.     "time": "2016-05-01 00:08:07"
  653.   },
  654.   {
  655.     "AM23SIG0206.AV": "593.5298",
  656.     "time": "2016-05-01 00:08:10"
  657.   },
  658.   {
  659.     "AM23SIG0206.AV": "593.5944",
  660.     "time": "2016-05-01 00:08:13"
  661.   },
  662.   {
  663.     "AM23SIG0206.AV": "593.5621",
  664.     "time": "2016-05-01 00:08:16"
  665.   },
  666.   {
  667.     "AM23SIG0206.AV": "593.5621",
  668.     "time": "2016-05-01 00:08:19"
  669.   },
  670.   {
  671.     "AM23SIG0206.AV": "593.5944",
  672.     "time": "2016-05-01 00:08:22"
  673.   },
  674.   {
  675.     "AM23SIG0206.AV": "593.5944",
  676.     "time": "2016-05-01 00:08:25"
  677.   },
  678.   {
  679.     "AM23SIG0206.AV": "593.5917",
  680.     "time": "2016-05-01 00:08:28"
  681.   },
  682.   {
  683.     "AM23SIG0206.AV": "593.659",
  684.     "time": "2016-05-01 00:08:31"
  685.   },
  686.   {
  687.     "AM23SIG0206.AV": "593.6887",
  688.     "time": "2016-05-01 00:08:34"
  689.   },
  690.   {
  691.     "AM23SIG0206.AV": "593.6564",
  692.     "time": "2016-05-01 00:08:37"
  693.   },
  694.   {
  695.     "AM23SIG0206.AV": "593.6402",
  696.     "time": "2016-05-01 00:08:40"
  697.   },
  698.   {
  699.     "AM23SIG0206.AV": "593.6752",
  700.     "time": "2016-05-01 00:08:43"
  701.   },
  702.   {
  703.     "AM23SIG0206.AV": "593.6725",
  704.     "time": "2016-05-01 00:08:46"
  705.   },
  706.   {
  707.     "AM23SIG0206.AV": "593.6725",
  708.     "time": "2016-05-01 00:08:49"
  709.   },
  710.   {
  711.     "AM23SIG0206.AV": "593.6725",
  712.     "time": "2016-05-01 00:08:52"
  713.   },
  714.   {
  715.     "AM23SIG0206.AV": "593.7022",
  716.     "time": "2016-05-01 00:08:55"
  717.   },
  718.   {
  719.     "AM23SIG0206.AV": "593.6699",
  720.     "time": "2016-05-01 00:08:58"
  721.   },
  722.   {
  723.     "AM23SIG0206.AV": "593.6402",
  724.     "time": "2016-05-01 00:09:01"
  725.   },
  726.   {
  727.     "AM23SIG0206.AV": "593.6699",
  728.     "time": "2016-05-01 00:09:04"
  729.   },
  730.   {
  731.     "AM23SIG0206.AV": "593.6564",
  732.     "time": "2016-05-01 00:09:07"
  733.   },
  734.   {
  735.     "AM23SIG0206.AV": "593.6537",
  736.     "time": "2016-05-01 00:09:10"
  737.   },
  738.   {
  739.     "AM23SIG0206.AV": "593.5917",
  740.     "time": "2016-05-01 00:09:13"
  741.   },
  742.   {
  743.     "AM23SIG0206.AV": "593.5568",
  744.     "time": "2016-05-01 00:09:16"
  745.   },
  746.   {
  747.     "AM23SIG0206.AV": "593.573",
  748.     "time": "2016-05-01 00:09:19"
  749.   },
  750.   {
  751.     "AM23SIG0206.AV": "593.5083",
  752.     "time": "2016-05-01 00:09:22"
  753.   },
  754.   {
  755.     "AM23SIG0206.AV": "593.4922",
  756.     "time": "2016-05-01 00:09:25"
  757.   },
  758.   {
  759.     "AM23SIG0206.AV": "593.4786",
  760.     "time": "2016-05-01 00:09:28"
  761.   },
  762.   {
  763.     "AM23SIG0206.AV": "593.4463",
  764.     "time": "2016-05-01 00:09:31"
  765.   },
  766.   {
  767.     "AM23SIG0206.AV": "593.4114",
  768.     "time": "2016-05-01 00:09:34"
  769.   },
  770.   {
  771.     "AM23SIG0206.AV": "593.3953",
  772.     "time": "2016-05-01 00:09:37"
  773.   },
  774.   {
  775.     "AM23SIG0206.AV": "593.3791",
  776.     "time": "2016-05-01 00:09:40"
  777.   },
  778.   {
  779.     "AM23SIG0206.AV": "593.3306",
  780.     "time": "2016-05-01 00:09:43"
  781.   },
  782.   {
  783.     "AM23SIG0206.AV": "593.3009",
  784.     "time": "2016-05-01 00:09:46"
  785.   },
  786.   {
  787.     "AM23SIG0206.AV": "593.2983",
  788.     "time": "2016-05-01 00:09:49"
  789.   },
  790.   {
  791.     "AM23SIG0206.AV": "593.266",
  792.     "time": "2016-05-01 00:09:52"
  793.   },
  794.   {
  795.     "AM23SIG0206.AV": "593.2499",
  796.     "time": "2016-05-01 00:09:55"
  797.   },
  798.   {
  799.     "AM23SIG0206.AV": "593.3145",
  800.     "time": "2016-05-01 00:09:58"
  801.   },
  802.   {
  803.     "AM23SIG0206.AV": "593.2821",
  804.     "time": "2016-05-01 00:10:01"
  805.   },
  806.   {
  807.     "AM23SIG0206.AV": "593.266",
  808.     "time": "2016-05-01 00:10:04"
  809.   },
  810.   {
  811.     "AM23SIG0206.AV": "593.2485",
  812.     "time": "2016-05-01 00:10:07"
  813.   },
  814.   {
  815.     "AM23SIG0206.AV": "593.2809",
  816.     "time": "2016-05-01 00:10:10"
  817.   },
  818.   {
  819.     "AM23SIG0206.AV": "593.2485",
  820.     "time": "2016-05-01 00:10:13"
  821.   },
  822.   {
  823.     "AM23SIG0206.AV": "593.2809",
  824.     "time": "2016-05-01 00:10:16"
  825.   },
  826.   {
  827.     "AM23SIG0206.AV": "593.2809",
  828.     "time": "2016-05-01 00:10:19"
  829.   },
  830.   {
  831.     "AM23SIG0206.AV": "593.2809",
  832.     "time": "2016-05-01 00:10:22"
  833.   },
  834.   {
  835.     "AM23SIG0206.AV": "593.297",
  836.     "time": "2016-05-01 00:10:25"
  837.   },
  838.   {
  839.     "AM23SIG0206.AV": "593.2646",
  840.     "time": "2016-05-01 00:10:28"
  841.   },
  842.   {
  843.     "AM23SIG0206.AV": "593.297",
  844.     "time": "2016-05-01 00:10:31"
  845.   },
  846.   {
  847.     "AM23SIG0206.AV": "593.297",
  848.     "time": "2016-05-01 00:10:34"
  849.   },
  850.   {
  851.     "AM23SIG0206.AV": "593.3293",
  852.     "time": "2016-05-01 00:10:37"
  853.   },
  854.   {
  855.     "AM23SIG0206.AV": "593.3131",
  856.     "time": "2016-05-01 00:10:40"
  857.   },
  858.   {
  859.     "AM23SIG0206.AV": "593.3293",
  860.     "time": "2016-05-01 00:10:43"
  861.   },
  862.   {
  863.     "AM23SIG0206.AV": "593.3293",
  864.     "time": "2016-05-01 00:10:46"
  865.   }
  866. ]

这个是.json文件（python的大数据模型预测产生的数据我拿来用一哈）

总结

以上所述是小编给大家介绍的HTML5+JS+JQuery+ECharts实现异步加载问题，希望对大家有所帮助，如果大家有任何问题欢迎给我留言，小编会及时回复大家的！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！