首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript jQuery

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

Posted in jQuery onDecember 16, 2017

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

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

- Author -

哈哈丶大傻瓜

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
jQuery列表检索功能实现代码
Jul 17 jQuery
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
使vue实现jQuery调用的两种方法
May 12 jQuery
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 jQuery
如何在vue 中引入使用jquery
Nov 10 jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 #jQuery
jquery获取transform里的值实现方法
Dec 12 #jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 #jQuery
jQuery实现简单的下拉菜单导航功能示例
Dec 07 #jQuery
jquery学习笔记之无new构建详解
Dec 07 #jQuery
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 #jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 #jQuery
连接器(1) pycryto(1) 有序排列(1) 遍历文件夹(1) 公共键(1) kafka(2) shell脚本(1) 数据加密(1) python-pcl(1) key(1)
You might like
关于页面优化和伪静态
2009/10/11 PHP
PHP上传图片时判断上传文件是否为可用图片的方法
2016/10/20 PHP
PHP带节点操作的无限分类实现方法详解
2016/11/09 PHP
php通过各种函数判断0和空
2020/07/04 PHP
js资料toString 方法
2007/03/13 Javascript
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码（带平滑移动的效果）
2011/05/24 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
2015/09/15 Javascript
微信小程序 wxapp视图容器 view详解
2016/10/31 Javascript
Centos7 中安装 Node.js v4.4.4
2016/11/03 Javascript
利用nodejs监控文件变化并使用sftp上传到服务器
2017/02/18 NodeJs
jquery实现动态添加附件功能
2018/10/23 jQuery
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
2019/01/18 Javascript
vue项目前端埋点的实现
2019/03/06 Javascript
js实现全选和全不选
2020/07/28 Javascript
Openlayers实现扩散的动态点（水纹效果）
2020/08/17 Javascript
Javascript数组及类数组相关原理详解
2020/10/29 Javascript
vue常用高阶函数及综合实例
2021/02/25 Vue.js
[01:23]一分钟告诉你 DOTA2为什么叫信仰2
2014/06/20 DOTA
[02:05]2014DOTA2国际邀请赛 BBC外卡赛赛后总结
2014/07/09 DOTA
[02:57]DOTA2亚洲邀请赛小组赛第四日 赛事回顾
2015/02/02 DOTA
简单谈谈Python中的反转字符串问题
2016/10/24 Python
Python常用内置模块之xml模块(详解)
2017/05/23 Python
Python基于list的append和pop方法实现堆栈与队列功能示例
2017/07/24 Python
python中使用正则表达式的连接符示例代码
2017/10/10 Python
Python操作Sql Server 2008数据库的方法详解
2018/05/17 Python
Django如何实现上传图片功能
2019/08/16 Python
pytorch 固定部分参数训练的方法
2019/08/17 Python
Python编写memcached启动脚本代码实例
2020/08/14 Python
设计模式的基本要素是什么
2014/04/21 面试题
卫校护理专业毕业生求职信
2013/11/26 职场文书
优秀的计算机专业求职信范文
2013/12/27 职场文书
学年自我鉴定
2014/01/16 职场文书
数学系毕业生求职信
2014/05/29 职场文书
运动会加油稿100字
2014/09/19 职场文书
Python+Selenium实现抖音、快手、B站、小红书、微视、百度好看视频、西瓜视频、微信视频号、搜狐视频、一点号、大风号、趣头条等短视频自动发布
2022/04/13 Python
java中为什么说子类的构造方法默认访问的是父类的无参构造方法
2022/04/13 Java/Android