为什么Echarts Ajax加载时showLoading效果始终不出来?

度月飞天 发布于 2015/04/03 09:00
阅读 2K+
收藏 0


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>信息统计管理</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/font-awesome.min.css" rel="stylesheet" />
<link href="css/daterangepicker-bs3.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<div class="container" >
  <div class="row">
    <div class="col-lg-12">
      <div class="panel panel-info">
        <div class="panel-heading" style="position:relative;"><strong>CPU</strong>
          <div class="pull-right">
            <form class="form-horizontal" style="position:absolute; top:3px; right:10px;">
              <fieldset>
                <div class="control-group">
                  <div class="controls">
                    <div class="input-prepend input-group"> <span class="add-on input-group-addon"><i class="glyphicon glyphicon-calendar fa fa-calendar"></i></span>
                      <input type="text" readonly style="width: 200px" name="reservation-cpu" id="reservation-cpu" class="form-control" value="2014-5-21 - 2014-6-21" />
                    </div>
                  </div>
                </div>
              </fieldset>
            </form>
          </div>
        </div>
        <div class="panel-body">
          <div id="main-cpu" style="height:550px;width:100%"></div>
        </div>
      </div>
    </div>
  </div>
</div>



<script src="js/jquery.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<script src="js/moment.js"></script> 
<script src="js/daterangepicker.js"></script> 
<script src="lib/echarts/echarts.js"></script> 
<script>
		require.config({
			baseUrl: "lib",
				paths: {
					echarts: 'echarts'
				}
			});
			require(
			[
				'echarts',
				'echarts/chart/line',
				'echarts/chart/bar'
			],
			function (ec) {
				var chart_cpu = ec.init(document.getElementById('main-cpu'));

				chart_cpu.showLoading({
					text: "图表数据正在努力加载..."
				});  // 这里的代码 在页面完全加载完前(包括AJAX数据没返回前)就跟不执行一样
				var option = {
					tooltip : {
						trigger: 'axis'
					},
					legend: {
						data:['CPU']
					},
					calculable : true,
					xAxis : [
						{
							type : 'category',
							boundaryGap : false,
							data : [
								'00:00','01:00','02:00','03:00','04:00','05:00','06:00',
								'07:00','08:00','09:00','10:00','11:00','12:00','13:00',
								'14:00','15:00','16:00','17:00','18:00','19:00','20:00',
								'21:00','22:00','23:00'
							],
							axisLabel:{
								interval:0,
								rotate:-40
							}
						}
					],
					yAxis : [
						{
							type : 'value'
						}
					],
					series : [
						{
							name:'CPU',
							type:'line',
							data:[],
							smooth:true
						}
					]
				};
				
				var data=get_data();    // 我在这里打断点了试试看,效果还是不出来
				if(data){
					option.series[0].data=data;
				}					
				//chart_cpu.hideLoading();
				chart_cpu.setOption(option);
			}
		);
    </script>
<script>
		function get_data(){
			var data;
			//通过Ajax获取数据
			$.ajax({
				type: "post",
				async: false, //同步执行
				url: "../php/data.php",
				dataType: "json", //返回数据形式为json
				success: function (result) {									
					if (result) {
						data=result;
					}
				},
				error: function (errorMsg) {
					alert("数据加载失败!");
					return false;
				}
			});
			return data;
		}
	</script>

后台程序是接到请求等待3秒再返回数据,为了演示 showLoading 的效果,可是始终不出来这个效果。还有就是我试着调试工具打断点也不行。

这个程序的执行好像必须整个页面完全加载了再执行 showLoading 代码断似的,好奇怪,请大侠帮我分析分析啊,好急人。因为数据量大,打开网页半天都显示空白,直到全部加载完才显示数据。

加载中
返回顶部
顶部