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

日期：2020-05-11 栏目：程序人生浏览：次

（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>

转载注明出处：http://www.heiqu.com/157.html

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

相关推荐