首页
所有分类
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+Ajax实现用户名重名实时检测
Jun 01 jQuery
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
jQuery实现的中英文切换功能示例
Jan 11 jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
jQuery实现简单日历效果
Jul 05 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
while(1) re模块(2) 无限迭代(1) mediapipe(1) cvzone(1) okenizer(1) 分词器(1) 事件调度器(1) 计算机视觉(2) for(1)
You might like
php全排列递归算法代码
2012/10/09 PHP
php实现递归的三种基本方式
2020/07/04 PHP
php常用经典函数集锦【数组、字符串、栈、队列、排序等】
2019/08/23 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
laravel框架分组控制器和分组路由实现方法示例
2020/01/25 PHP
window.open()弹出居中的窗口
2007/02/01 Javascript
Javascript 验证上传图片大小[客户端]
2009/08/01 Javascript
js 绑定带参数的事件以及手动触发事件
2010/04/27 Javascript
给jQuery方法添加回调函数一款插件的应用
2013/01/21 Javascript
jquery 操作css样式、位置、尺寸方法汇总
2014/11/28 Javascript
浅谈NodeJS中require路径问题
2015/05/07 NodeJs
JS实现浏览器状态栏显示时间的方法
2015/10/27 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
2016/10/11 Javascript
jQuery 选择符详细介绍及整理
2016/12/02 Javascript
微信小程序手势操作之单触摸点与多触摸点
2017/03/10 Javascript
vue的路由映射问题及解决方案
2019/10/14 Javascript
JS window对象简单操作完整示例
2020/01/14 Javascript
python回溯法实现数组全排列输出实例分析
2015/03/17 Python
python的常用模块之collections模块详解
2018/12/06 Python
python矩阵/字典实现最短路径算法
2019/01/17 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
Python过滤序列元素的方法
2020/07/31 Python
英国第一蛋白粉品牌：Myprotein
2016/09/14 全球购物
初中生三年学习生活的自我评价
2013/11/03 职场文书
数学与统计学院学生个人职业生涯规划书
2014/02/10 职场文书
革命先烈的英雄事迹材料
2014/02/15 职场文书
志愿者服务感言
2014/02/27 职场文书
会计的岗位职责
2014/03/15 职场文书
小学六年级毕业感言
2015/07/30 职场文书
写好求职信的技巧解密
2019/05/14 职场文书
《中国古代诗歌散文欣赏》高中语文教材
2019/08/20 职场文书
解决Pytorch dataloader时报错每个tensor维度不一样的问题
2021/05/28 Python
Windows11性能真的上涨35%? 桌面酷睿i9实测结果公开
2021/11/21 数码科技
安装Ruby和 Rails的详细步骤
2022/04/19 Ruby
Windows server 2012 R2 安装IIS服务器
2022/04/29 Servers