异步数据加载时的动画加载

原创于 2024-04-29 08:11:04 发布 · 502 阅读

CC 4.0 BY-SA版权

文章标签：

ECharts 默认提供了一个简单的勺加载动画，只需要在数据加载前,调用showLoading(方法显示该加载动画，在数据加载完成后，再调用hideLoading()方法隐藏该加载动画即可。
当然，也可以根据需要自定义 showLoading()方法。根据某学院各专业男女生统计数据绘制异步加载双柱状图。

提供的data.json文件：

{
    "data":
    [
        {"sex":"男","value":325,   "specName":"软件技术"},
        {"sex":"女","value":165,   "specName":"软件技术"},


        {"sex":"男","value":222,   "specName":"大数据技术"},
        {"sex":"女","value":177,   "specName":"大数据技术"},

        {"sex":"男","value":127,   "specName":"人工智能技术"},
        {"sex":"女","value":87,   "specName":"人工智能技术"},

        {"sex":"男","value":65,   "specName":"移动应用技术"},
        {"sex":"女","value":58,   "specName":"移动应用技术"},

        {"sex":"男","value":123,   "specName":"云计算技术"},
        {"sex":"女","value":73,   "specName":"云计算技术"},

        {"sex":"男","value":188,   "specName":"计算机网络技术"},
        {"sex":"女","value":222,   "specName":"计算机网络技术"}
    ]
}

关键代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>ECharts</title>
		<!-- 引入 echarts.js -->
		<script src="js/echarts.min.js"></script>
        <script src="js/jquery-3.3.1.js"></script>
	</head>

	<body>
		<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
		<div id="main" style="width: 600px;height:400px;"></div>
		<script type="text/javascript">
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));
            //第一步:先只加载图表样式
            myChart.setOption({
                color:['#45C2E0', '#C1EBDD','red','#FF9393',"pink"],
                backgroundColor:'rgba(128,128,128,0.1)',
                title:{
                    text:'某学院各专业男女生统计',
                    subtext:'2020年',top:8
                },
                tooltip:{tigger:'axis'},
                legend:{data:['男','女'],top:8},
                toolbox:{
                    show:true,top:8, left:680,
                    feature:{
                        mark:{show:true},
                        dataView:{show:true,readOnly:false},
                        magicType:{show:true,type:['line','bar']},
                        restore:{show:true},
                        saveAsImage:{show:true}
                    },
                },
                calculacle:true,
                xAxis:[{type:'category',data:[]}],
                yAxis:[{type:'value'}],
                series:[
                    {
                        name:'男',type:'bar',
                        data:[],
                        itemStyle:{
                            normal:{
                                label:{
                                    show:true,postion:'top'
                                }
                            }
                        }
                    },
                    {
                        name:'女',type:'bar',
                        data:[],
                        itemStyle:{
                            normal:{label:{show:true,postion:'top'}}
                        }                    
                    }
                ]
            
            });
            //第二步：异步获取数据并填充数据
            myChart.showLoading({
                text:'请你休息片刻。。。',
                textStyle:{fontSize:35,color:'red'},
                effect:"bubble",
                color:'#C1EBDD',
                textColor:'Lime',
                maskColor:'pink'
            });
            //获取和处理数据
            $.getJSON("data.json",function(json){
                var d=json.data;
                var boyList   =[];
                var girlList=[];
                var specList=[];

                for(var i=0;i<d.length;i++){
                    if(d[i].sex=='男'){
                        boyList.push(d[i].value);
                        specList.push(d[i].specName);
                    }else{
                        girlList.push(d[i].value);
                    }
                }
                myChart.setOption({
                    xAxis:{data:specList},
                    series:[{name:'男',data:boyList},
                    {name:'女',data:girlList}]
                    
                });
            });
            
     setTimeout(function(){
        myChart.hideLoading();
    }, 2000); // 设置延迟时间为2秒-2000毫秒
		</script>
	</body>

</html>

注意事项：在插入json文件要注意路径

异步加载数据时，需要配置Google Chrome 浏览器以支持AJAX 请求。具体操作如下:
(1)右击“Google Chrome”快捷方式图标，在弹出的快捷菜单中选择最下面的“属性”菜单项。
(2)在弹出的“Chrome Google属性”对寸话框中，在“目标”文本框中添加如下内容:
--allow-file-access-from-files，再点击“确定”按钮，如图所示：