ECharts柱状图动态获取数据

前台页面代码  <%@ 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主要就是实现的查询

ECharts柱状图动态获取数据

猜你喜欢