ECharts——异步加载与loading界面

最新推荐文章于 2024-04-07 10:59:37 发布

我的哥哥呦

最新推荐文章于 2024-04-07 10:59:37 发布

阅读量1.9k

点赞数

分类专栏： ECharts 文章标签： echarts loading 异步刷新

本文链接：https://blog.csdn.net/qq_20497071/article/details/100124220

版权

ECharts 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

我的哥哥呦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ECharts——异步加载与loading界面

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="echarts/echarts.min.js" type="text/javascript" charset="utf-8"></...
复制链接

扫一扫