<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="e" uri="/firefly-theme-taglib" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
//TODO 引入jquery
<script src="${pageContext.request.contextPath}/system/script/echarts3/echarts.min.js"></script>
<style type="text/css">
#main{margin:0 auto;border:0px solid #000;width:700px;height:500px}
</style>
<script type="text/javascript">
$(function() {
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
myChart.setOption ({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
legend: {
data:['批准经费','报销经费','剩余经费']
},
xAxis: [
{
type: 'category',
data: [],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type : 'value',
min: 0,
name: '（万元）',
}
],
series: [
{
name:'批准经费',
type:'bar',
data:[]
},
{
name:'报销经费',
type:'bar',
data:[]
},
{
name:'剩余经费',
type:'bar',
data:[]
}
]
});
myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
var names=[]; //预算科目类别数组（实际用来盛放X轴坐标值）
var numsOne=[]; //批准经费数组（实际用来盛放Y坐标值）
var numsTwo=[]; //报销经费数组（实际用来盛放Y坐标值）
var numsThree=[]; //剩余经费数组（实际用来盛放Y坐标值）
$.ajax({
type : "post",
async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url : "talentProjectAction!do_selectDate.action", //请求发送到action处
data : {}, //传送请求数据
dataType : "json", //返回数据形式为json
success : function(data) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
if (data) {
for(var i=0;i<data.length;i++){
names.push(data[i].name); //挨个取出类别并填入类别数组
numsOne.push(data[i].approvalFee); //挨个取出类别并填入类别数组
numsTwo.push(data[i].expendedFee); //挨个取出类别并填入类别数组
numsThree.push(data[i].surplusFee); //挨个取出类别并填入类别数组
}
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({ //加载数据图表
xAxis: [
{
type: 'category',
data: names,
axisPointer: {
type: 'shadow'
}
}
],
series: [
{
name:'批准经费',
type:'bar',
data: numsOne
},
{
name:'报销经费',
type:'bar',
data: numsTwo
},
{
name:'剩余经费',
type:'bar',
data: numsThree
}
]
});
}
},
error : function(errorMsg) {
//请求失败时执行该函数
ep.alert("图表请求数据失败!");
myChart.hideLoading();
}
})
});
</script>
</head>
<body class="ep-nopadding-body popOperate">
<div id="main"></div>
</body>
</html>
![]()
浙公网安备 33010602011771号