ECharts——异步加载与loading界面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="echarts/echarts.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="main" style="width: 600px;height: 400px;"></div>
		<script type="text/javascript">
		var myChart=echarts.init(document.getElementById("main"));
		var app={};
		option=null;
		function fetchData(cb){
			setTimeout(function(){
				cb({
					catagories:["衬衫","羊毛衫","裤子","上衣","领带"],
					data:[5,20,36,10,10]
				});
			},2000);
		}
		
		
		
		option={
			title:{
				text:'异步加载实例'
			},
			tooltip: {},
			legend: {
			    data:['销量']
			},
			xAxis: {
			    data: []
			},
			yAxis: {},
			series: [{
			    name: '销量',
			    type: 'bar',
			    data: []
			}]
		};
		
		
		myChart.showLoading();
		
		
		fetchData(function (data) {
			myChart.hideLoading();
		    myChart.setOption({
		        xAxis: {
		            data: data.categories
		        },
		        series: [{
		            // 根据名字对应到相应的系列
		            name: '销量',
		            data: data.data
		        }]
		    });
		});;
		if (option && typeof option === "object") {
		    myChart.setOption(option, true);
		}
		
		</script>
	</body>
</html>

 

上一篇:libevent入门


下一篇:灯具产品CB认证测试标准详解