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

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