```<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>异步加载后台数据</title>
<link href="css/index.css" type="text/css" rel="stylesheet" />
<script src="js/jquery.js"></script>
<script src="js/echarts.js"></script>
</head>
<body>
<div id="container">
<h3>开始测试</h3>
<div id="wrap"></div>
<script>
// 初始化 图表对象
var mychart = echarts.init(document.getElementById("wrap"));
// 初始化两个数组，盛装从数据库中获取到的数据
var teachers_tits = [], respro_num = [];
//调用ajax来实现异步的加载数据
function get_resproject() {
$.ajax({
type: "post",
async: false,
url: "config.php",
data: {},
dataType: "json",
success: function(result){
if(result){
for(var i = 0 ; i < result.length; i++){
teachers_tits.push(result[i].teachers_tits);
respro_num.push(result[i].respro_num);
}
}
},
error: function() {
alert("Ajax获取服务器数据出错了！");
//return teachers_tits, respro_num;
}
});
return teachers_tits,respro_num;
}
// 执行异步请求
get_resproject();
// 进行相关项的设置，也就是所谓的搭搭骨架，方便待会的ajax异步的数据填充
var option = {
title : {
text : '职称科研项目数量图'
},
tooltip : {
show : true
},
legend : {
data : [ '项目数量' ]
},
xAxis : [ {
data : teachers_tits
} ],
yAxis : [ {
type : 'value'
} ],
series : [ {
"name" : "项目数量",
"type" : "bar",
"data" : respro_num
}]
};
// 将配置项赋给chart对象，来显示相关的数据
mychart.setOption(option);
</script>
</div>
</body>
</html>
微信扫一扫