<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>echart</title>
<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="http://cdn.bootcss.com/echarts/3.5.3/echarts.js"></script>
</head>
<body>
<div id="echart" style="800px;height:800px">
</div>
<script>
//初始化echart全局对象
var myChart = echarts.init(document.getElementById('echart'));
//创建初始设置对象 包含一些设置参数
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
});
//显示数据加载图标
myChart.showLoading();
var dataAll = new Object();
dataAll.categories = new Array();
dataAll.data = new Array();
setInterval(function () {
// 异步加载数据
$.get('data.json').done(function (data) {
for (var i = 0; i < data.data.length; i++) {
dataAll.categories.push(data.categories[i]);
dataAll.data.push(data.data[i]);
}
//隐藏加载中的图标
myChart.hideLoading();
// 填入数据
myChart.setOption({
xAxis: {
data: dataAll.categories
},
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: dataAll.data
}]
});
});
}, 500);
</script>
</body>
</html>
