`

ECharts柱状图动态获取数据

    博客分类：
  • java
 
阅读更多 
<%@ 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主要就是实现的查询

 

  • 大小: 115.2 KB
分享到：
| dhtmlxscheduler
评论
3 楼 FireZHFox 2014-07-08  
xiaoxiao_haier 写道
求完整性 连接数据库代码(重点serlvet接收以及 从数据库查出的数据 前台的reposne)


连接数据库代码完全交给了spring管理了，是在配置文件中写的，因为看到你用的servlet，所以考虑你想要的数据库连接代码应该是直接用JDBC连接，好久没有用servlet写代码了，由于最近公司项目比较近也没有时间为你写一下例子，但是个人觉得你可以参照我的action给修改为servlet实现。
2 楼 xiaoxiao_haier 2014-07-08  
2406111299
1 楼 xiaoxiao_haier 2014-07-08  
求完整性 连接数据库代码(重点serlvet接收以及 从数据库查出的数据 前台的reposne)
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics