<%@ 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; } }
/** * * 柱状图 */ @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主要就是实现的查询