前台页面代码
<%@ include file="/config.jsp"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
</body>
<script type="text/javascript">
/*$(document).ready(function(){
dataX();
dataY();
});
function dataX(){
var arr=[];
$.ajax(
{
url:"fixedExpensesAccountAction!dataXY.action",
dataType:"text",
success:function(data)
{
var rows=eval(data);
//调用函数获取值,转换成数组模式
for(var i=0;i<rows.length;i++)
{
arr.push(rows[i].accountUse);
}
}
});
return arr;
}
function dataY(){
var arrY=[];
$.ajax(
{
url:"fixedExpensesAccountAction!dataXY.action",
dataType:"text",
success:function(data)
{
var rows=eval(data);
//调用函数获取值,转换成数组模式
for(var i=0;i<rows.length;i++)
{
arrY.push(rows[i].accountAmt);
}
}
});
return arrY;
}*/
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
title : {
text: '固定支出统计'
},
tooltip : {
trigger: 'axis'
},
legend: {
},
toolbox: {
show : true,
feature : {
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {
show : true,
title : '保存为图片',
type : 'png',
lang : ['点击保存']
}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data :(function(){
var arr=[];
$.ajax(
{
url:"fixedExpensesAccountAction!dataXY.action",
dataType:"text",
async: false,
success:function(data)
{
var rows=eval(data);
//调用函数获取值,转换成数组模式
for(var i=0;i<rows.length;i++)
{
arr.push(rows[i].accountUse);
}
}
});
return arr;
})()
}
],
yAxis : [
{
type : 'value',
splitArea : {show : true}
}
],
series : [
{
name:'支出费用',
type:'bar',
data:(function(){
var arrY=[];
$.ajax(
{
url:"fixedExpensesAccountAction!dataXY.action",
dataType:"text",
async: false,
success:function(data)
{
var rows=eval(data);
//调用函数获取值,转换成数组模式
for(var i=0;i<rows.length;i++)
{
arrY.push(rows[i].accountAmt);
}
}
});
return arrY;
})()
}
]
});
</script>
</html> <%@ include fi