<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>异步数据加载</title>
</head>
<body>
<div id="main" style="width:600px;height:300px;"></div>
<script src="js/echarts.js"></script>
<script>
var myChart = echarts.init(document.getElementById('main'));
function fetchData(f) {
//模拟异步加载
setTimeout(function () {
f({
categories:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
data:[5,10,25,20,6,8]
});
},3000);
}
option = {
title:{
text:'异步数据加载'
},
tooltip:{},
legend:{
data:['销量']
},
xAxis:{
data:[]
},
yAxis:{},
series:[{
name:'销量',
type:'bar',
data:[]
}]
};
//加载动画显示
myChart.showLoading();
myChart.setOption(option);
fetchData(function (data) {
myChart.hideLoading();
myChart.setOption({
xAxis:{
data:data.categories
},
series:[{
name:'销量',
data:data.data
}]
});
});
</script>
</body>
</html>
上述代码中使用的数据放在data包下的data.json中
{
"categories": ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
"data": [5,10,25,20,6,8]
}