前台页面代码
<%@ 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" "http://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>
注释代码
当用Ajax方式请求后台数据是一定要设置async: false,否则无法获取数据
实体类代码
/**
* 固定支出统计
*
*/
@Entity
@Table(name = "dt_account_fixed")
public class FixedExpensesAccountEntity extends BaseEntity {
/** */
private static final long serialVersionUID = 1851384083686290290L;
@Id
@GeneratedValue
private Integer id;
private String accountUse;// 用途
private String accountAmt;// 金额
private String createId;// 创建id
private String createDate;// 创建日期
private String updateId;// 更新id
private String updateDate;// 更新日期
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getAccountUse() {
return accountUse;
}
public void setAccountUse(String accountUse) {
this.accountUse = accountUse;
}
public String getAccountAmt() {
return accountAmt;
}
public void setAccountAmt(String accountAmt) {
this.accountAmt = accountAmt;
}
public String getCreateId() {
return createId;
}
public void setCreateId(String createId) {
this.createId = createId;
}
public String getCreateDate() {
return createDate;
}
public void setCreateDate(String createDate) {
this.createDate = createDate;
}
public String getUpdateId() {
return updateId;
}
public void setUpdateId(String updateId) {
this.updateId = updateId;
}
public String getUpdateDate() {
return updateDate;
}
public void setUpdateDate(String updateDate) {
this.updateDate = updateDate;
}
}
Action类代码
/**
*
* 柱状图
*/
@Scope("prototype")
@Controller
public class FixedExpensesAccountAction extends BaseAction<FixedExpensesAccountEntity> {
/** */
private static final long serialVersionUID = 1L;
private FixedExpensesAccountEntity accountEntity = getModel();
Map jsonMap = new HashMap();
List<FixedExpensesAccountEntity> jsonList = new ArrayList<FixedExpensesAccountEntity>();
@Resource(name = "fixedExpensesAccountService")
private FixedExpensesAccountService fixedExpensesAccountService;
public String dataXY() {
jsonList = fixedExpensesAccountService.selectAll();
return "dataXY";
}
public List<FixedExpensesAccountEntity> getJsonList() {
return jsonList;
}
public void setJsonList(List<FixedExpensesAccountEntity> jsonList) {
this.jsonList = jsonList;
}
public Map getJsonMap() {
return jsonMap;
}
public void setJsonMap(Map jsonMap) {
this.jsonMap = jsonMap;
}
说明代码
service和dao类就不写,service和dao主要就是实现的查询