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