highCharts柱状图

第一步：导入 exporting.js,grid.js,highcharts.js;
第二步：写controller

 

@Controller
@RequestMapping(value="${adminPath}/statistick")
public class StatistickController {
 
 private UserService userService=SpringContextHolder.getBean(UserService.class);
 private FrontUserService    frontUserService=SpringContextHolder.getBean(FrontUserService.class);
 private PurchaseService purchaseService=SpringContextHolder.getBean(PurchaseService.class);

 /**
  * 注册用户统计
  */
 @RequestMapping(value="registerStatistick")
 public String registerStatistick(@RequestParam Map<String, Object> paramMap,HttpServletRequest request,HttpServletResponse response,Model model) throws Exception {  
  int dataOne=0,dataTwo=0,dataThree=0,dataFour=0; //设置初始数据    
  List<Object> lists=userService.findAllRegisterUser(paramMap);
  Object obj[]=null;
  for (int i = 0; i < lists.size(); i++) {
   obj=(Object[]) lists.get(i);
   for(int j=0;j<obj.length;j++){
    if(i==0){ //普通用户数据
     dataOne=Integer.valueOf(obj[0].toString());
     dataTwo=Integer.valueOf(obj[1].toString());
    }
    if(i==1){ //彩信用户
     dataThree=Integer.valueOf(obj[0].toString());
     dataFour=Integer.valueOf(obj[1].toString());
    }
   }
   }
  request.setAttribute("dataOne",dataOne );
  request.setAttribute("dataTwo",dataTwo );
  request.setAttribute("dataThree",dataThree );
  request.setAttribute("dataFour",dataFour );
  model.addAllAttributes(paramMap);
        return "modules/statistick/registerStatistick";
 }
 /**
  * 预约用户统计
  */
 @RequestMapping(value="yuyueStatistick")
 public String yuyueStatistick(@RequestParam Map<String, Object> paramMap,HttpServletRequest request,HttpServletResponse response,Model model) throws Exception {  
  int dataOne=0,dataTwo=0,dataThree=0,dataFour=0,dataFive=0,dataSix=0,dataSeven=0; //设置初始数据 
  List<Object> lists=frontUserService.findAllUser(paramMap);
  int obj=0;
  for (int i = 0; i < lists.size(); i++) {
   obj=Integer.valueOf(lists.get(i).toString());
   if(i==0){dataOne=obj;}
   if(i==1){dataTwo=obj;}
   if(i==2){dataThree=obj;}
   if(i==3){dataFour=obj;}
   if(i==4){dataFive=obj;}
   if(i==5){dataSix=obj;}
   if(i==6){dataSeven=obj;}
    
  }
  int data=dataOne+dataTwo+dataThree+dataFour+dataFive+dataSix+dataSeven;
  request.setAttribute("data", data);
  request.setAttribute("dataOne",dataOne );
  request.setAttribute("dataTwo",dataTwo );
  request.setAttribute("dataThree",dataThree );
  request.setAttribute("dataFour",dataFour );
  request.setAttribute("dataFive",dataFive );
  request.setAttribute("dataSix",dataSix );
  request.setAttribute("dataSeven", dataSeven);
  model.addAllAttributes(paramMap);
        return "modules/statistick/yuyueStatistick";
 }
 /**
  * 购买用户统计
  */
 @RequestMapping(value="purchaseStatistick")
 public String buyStatistick(@RequestParam Map<String, Object> paramMap,HttpServletRequest request,HttpServletResponse response,Model model) throws Exception {  
  int dataOne=0,dataTwo=0,dataThree=0,dataFour=0; //设置交易记录初始数据
  int totalmoneyone=0,totalmoneytwo=0,totalmoneythree=0,totalmoneyfour=0; //设置交易金额初始数据
  int totaluserone=0,totalusertwo=0,totaluserthree=0,totaluserfour=0; //设置购买用户数初始数据
  Object obj[]=null;
  List<Object> lists=purchaseService.findAllPurchase(paramMap);
  for (int i = 0; i < lists.size(); i++) {
   obj=(Object[]) lists.get(i);
   for(int j=0;j<obj.length;j++){
    if(i==0){ //第六期活动数据
     dataOne=Integer.valueOf(obj[1].toString());
     totaluserone=Integer.valueOf(obj[0].toString());
     totalmoneyone=Integer.valueOf(obj[2].toString());
    }
    if(i==1){ //第七期活动数据
     dataTwo=Integer.valueOf(obj[1].toString());
     totalusertwo=Integer.valueOf(obj[0].toString());
     totalmoneytwo=Integer.valueOf(obj[2].toString());
    }
    if(i==2){ //第八期活动数据
     dataThree=Integer.valueOf(obj[1].toString());
     totaluserthree=Integer.valueOf(obj[0].toString());
     totalmoneythree=Integer.valueOf(obj[2].toString());
    }
    if(i==3){ //第九期活动数据
     dataFour=Integer.valueOf(obj[1].toString());
     totaluserfour=Integer.valueOf(obj[0].toString());
     totalmoneyfour=Integer.valueOf(obj[2].toString());
    }
   }
  }
  request.setAttribute("dataOne",dataOne );
  request.setAttribute("dataTwo",dataTwo );
  request.setAttribute("dataThree", dataThree);
  request.setAttribute("dataFour", dataFour);
  request.setAttribute("totalmoneyone", totalmoneyone);
  request.setAttribute("totalmoneytwo", totalmoneytwo);
  request.setAttribute("totalmoneythree", totalmoneythree);
  request.setAttribute("totalmoneyfour", totalmoneyfour);
  request.setAttribute("totaluserone", totaluserone);
  request.setAttribute("totalusertwo", totalusertwo);
  request.setAttribute("totaluserthree", totaluserthree);
  request.setAttribute("totaluserfour", totaluserfour);
  model.addAllAttributes(paramMap);
        return "modules/statistick/purchaseStatistick";
 }

｝

第三步：写Service 获取条件查询结果

// 注册用户列表条件搜索方法
 public List<Object> findAllRegisterUser(Map<String, Object> paramMap) {
  List<Object> list=new ArrayList<Object>();  
  StringBuilder sql=new StringBuilder();
  for(int i=0;i<2;i++){
   sql.delete(0, sql.length()); //清除sql
   sql.append("select  nvl(sum(case when userstatus=0 then '1' else '0' end),0) as 有效,nvl(sum(case when userstatus!=0 then '1' else '0' end),0) as 无效 from userinfo where usertype="+i+" ") ; 
   String mobile=ObjectUtils.toString(paramMap.get("mobile"));
   if(StringUtils.isNotBlank(mobile)){
    sql.append("and mobile='"+mobile+"'");
   }
   
   String clienttype=ObjectUtils.toString(paramMap.get("clienttype"));
   if(StringUtils.isNotBlank(clienttype)){
    sql.append("and clienttype = '"+clienttype+"'");
   }
   
   Date beginDate = DateUtils.parseDate(paramMap.get("beginDate"));
   if (beginDate == null){
    beginDate=DateUtils.addYears(new Date(), -1);
    String begin=DateUtils.formatDate(beginDate, "yyyy-MM-dd");
    paramMap.put("beginDate", begin);
    
   }   
   Date endDate = DateUtils.parseDate(paramMap.get("endDate"));
   if (endDate == null){
    endDate=new Date();
    String end=DateUtils.formatDate(endDate, "yyyy-MM-dd");
    paramMap.put("endDate", end);  
   }
   sql.append("and (to_char(createdate,'yyyy/MM/dd')>='"+DateUtils.formatDate(beginDate, "yyyy/MM/dd")+"' and to_char(createdate,'yyyy/MM/dd')<='"+DateUtils.formatDate(endDate, "yyyy/MM/dd")+"')");
   String sqlString=sql.toString();
   list.add(i, purchaseDao.findBySql(sqlString).get(0));    
  }
  return list;
 }

/**
  * 预约用户统计条件搜索方法
  */
 public List<Object> findAllUser(Map<String, Object> paramMap) {  
  List<Object> list=new ArrayList<Object>();
  StringBuilder sql=new StringBuilder();
  for(int i=0;i<7;i++){
   sql.delete(0, sql.length()); //清除sql
   sql.append("select nvl(count(*),0) from front_user where ");         
   String activity=ObjectUtils.toString(paramMap.get("activity"));
   if(activity.equals("")){
    if(i==0){sql.append("activity_id = 1");}
    if(i==1){sql.append("activity_id = 2");}
    if(i==2){sql.append("activity_id = 5");}
    if(i==3){sql.append("activity_id = 7");}
    if(i==4){sql.append("activity_id = 10");}
    if(i==5){sql.append("activity_id = 13");}
    if(i==6){sql.append("activity_id = 16");}
   }   
   
   String name=ObjectUtils.toString(paramMap.get("name"));    
   if(StringUtils.isNotBlank(name)){
    sql.append("and name like '%"+name+"%'");
   }   
   long mobile=StringUtils.toLong(paramMap.get("mobile"));
   if(mobile>0){
    sql.append("and mobile='"+mobile+"'");
   }   
   String bank=ObjectUtils.toString(paramMap.get("bank"));
   if("first".equals(bank)){
    sql.append("and bank=1");
   }else if("second".equals(bank)){
    sql.append("and bank=2");
   }   
   Date beginDate = DateUtils.parseDate(paramMap.get("beginDate"));
   if (beginDate == null){
    beginDate=DateUtils.addYears(new Date(), -1);
    String begin=DateUtils.formatDate(beginDate, "yyyy-MM-dd");
    paramMap.put("beginDate", begin);    
   }   
   Date endDate = DateUtils.parseDate(paramMap.get("endDate"));
   if (endDate == null){
    endDate=new Date();
    String end=DateUtils.formatDate(endDate, "yyyy-MM-dd");
    paramMap.put("endDate", end);  
   }
   sql.append("and (to_char(create_date,'yyyy/MM/dd')>='"+DateUtils.formatDate(beginDate, "yyyy/MM/dd")+"' and to_char(create_date,'yyyy/MM/dd')<='"+DateUtils.formatDate(endDate, "yyyy/MM/dd")+"')");
   sql.append("and del_flag=0");
   String sqlString=sql.toString();
   list.add(i, frontUserDao.findBySql(sqlString).get(0));
  }
  return list;
 }

 

 

/**
  * 购买记录统计条件搜索方法
  */
 public List<Object> findAllPurchase(Map<String, Object> paramMap) {
  DetachedCriteria dc = purchaseDao.createDetachedCriteria();
  List<Object> list=new ArrayList<Object>();  
  StringBuilder sql=new StringBuilder();
  for(int i=0;i<4;i++){
   sql.delete(0, sql.length()); //清除sql
   sql.append("select nvl(count(distinct userid),0) as totaluser,nvl(count(*),0) as totaltransaction,nvl(sum(amount),0) as totalamonut " +
     "from purchase where proid in(select proid from product_base_inf where activityitems in("+(i+6)+"))");
   String proname=ObjectUtils.toString(paramMap.get("proname"));  
   if(StringUtils.isNotBlank(proname)){
    sql.append("and proname like '%"+proname+"%'");
   }
   
   String mobile=ObjectUtils.toString(paramMap.get("mobile"));
   if(StringUtils.isNotBlank(mobile)){
    sql.append("and mobile='"+mobile+"'");
   }
   String snid=ObjectUtils.toString(paramMap.get("snid"));
   if(StringUtils.isNotBlank(snid)){
    sql.append("and snid='"+snid+"'");
   }
   
   String dealstatus=ObjectUtils.toString(paramMap.get("dealstatus"));
   if(StringUtils.isNotBlank(dealstatus)){
    sql.append("and dealstatus='"+dealstatus+"'");
   }
   
   long beginAmount=StringUtils.toLong(paramMap.get("beginAmount"));
   long endAmount=StringUtils.toLong(paramMap.get("endAmount"));
   if(beginAmount>0||endAmount>0){
    sql.append("and (amount between '"+beginAmount+"' and '"+endAmount+"')");
   }
   
   Date beginDate = DateUtils.parseDate(paramMap.get("beginDate"));
   if (beginDate == null){
    beginDate=DateUtils.addYears(new Date(), -1);
    String begin=DateUtils.formatDate(beginDate, "yyyy-MM-dd");
    paramMap.put("beginDate", begin);
    
   }   
   Date endDate = DateUtils.parseDate(paramMap.get("endDate"));
   if (endDate == null){
    endDate=new Date();
    String end=DateUtils.formatDate(endDate, "yyyy-MM-dd");
    paramMap.put("endDate", end);  
   }
   sql.append("and (to_char(createdate,'yyyy/MM/dd')>='"+DateUtils.formatDate(beginDate, "yyyy/MM/dd")+"' and to_char(createdate,'yyyy/MM/dd')<='"+DateUtils.formatDate(endDate, "yyyy/MM/dd")+"')");
   String sqlString=sql.toString();
   list.add(i, purchaseDao.findBySql(sqlString).get(0));    
  }
  return list;
 }

第四步：写jsp

预约用户jsp

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
 <title>预约用户</title>
 <meta name="decorator" content="default"/>
 <script type="text/javascript" src="${ctxStatic}/highCharts/highcharts.js"></script>
 <!-- <script type="text/javascript" src="${ctxStatic}/highCharts/exporting.js"></script> -->
 <script type="text/javascript">
 function page(n,s){
   $("#pageNo").val(n);
   $("#pageSize").val(s);
   $("#searchForm").submit();
         return false;
        }
 $(function () {
  var dataOne=parseInt(document.getElementById("dataOne").value); //需要将获取的value值转换成number类型
  var dataTwo=parseInt(document.getElementById("dataTwo").value);
  var dataThree=parseInt(document.getElementById("dataThree").value);
  var dataFour=parseInt(document.getElementById("dataFour").value);
  var dataFive=parseInt(document.getElementById("dataFive").value);
  var dataSix=parseInt(document.getElementById("dataSix").value);
     $('#container').highcharts({
            chart: {
                type: 'column',
                backgroundColor: '#FCFFC5'
            },
            title: {
                text: '预约用户统计'
            },
            subtitle: {
                text: '用户数'
            },
            xAxis: {
                categories: [
                    '第一期',
                    '第二期',
                    '第三期',
                    '第四期',
                    '第五期',
                    '第六期'
                ]
            },
            yAxis: {
                min: 0,
                title: {
                    text: '人数(个)'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:20px;color:red">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">人数: </td>' +
                              '<td style="padding:0"><b>{point.y}人</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
              pointWidth:60,  //柱宽
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            <!--legend:{enabled:false},隐藏活动期数-->
          
            series: [{
             color:'##1C86EE',
                name: '活动期数',
                data: [{'color':'#F6BD0F','y':dataOne}, //每根柱子设置不同颜色
                            {'color':'#AFD8F8','y':dataTwo},
                            {'color':'#9AAA00','y':dataThree},
                            {'color':'#FF8E46','y':dataFour},
                            {'color':'#EE8E8E','y':dataFive},
                            {'color':'#AAD000','y':dataSix}]
            }]
        });
    });
 </script>
</head>
  <body>
  <form:form id="searchForm" action="${ctx}/statistick/yuyueStatistick" method="post" class="breadcrumb form-search">
  <div>
   <input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/>
   <input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/>
  </div>
  <div >
   <label>姓名：</label><input id="name" name="name" type="text" maxlength="50" class="input-medium" value="${name}"/>
   <label>手机号：</label><input id="mobile" name="mobile" type="text" maxlength="50" class="input-medium" value="${mobile}"/>
   <label>活动期数：</label>
    <select id="status" name="activity">
     <option value="">请选择</option>
     <option value="first" <c:if test="${activity=='first'}">selected</c:if>>第一期</option>
     <option value="second" <c:if test="${activity=='second'}">selected</c:if>>第二期</option>
     <option value="third" <c:if test="${activity=='third'}">selected</c:if>>第三期</option>
     <option value="four" <c:if test="${activity=='four'}">selected</c:if>>第四期</option>
     <option value="five" <c:if test="${activity=='five'}">selected</c:if>>第五期</option>
     <option value="six" <c:if test="${activity=='six'}">selected</c:if>>第六期</option>
    </select>
   <label>登记银行：</label>
    <select id="status" name="bank">
     <option value="">请选择</option>
     <option value="first"<c:if test="${bank=='first'}">selected</c:if>>光大银行</option>
     <option value="second"<c:if test="${bank=='second'}">selected</c:if>>浦发银行</option>
    </select>  
  </div>
  <div style="margin-top:8px;">
   <label>登记日期：&nbsp;</label>
    <input id="beginDate" name="beginDate" type="text" readonly="readonly" maxlength="20" class="input-medium Wdate" value="${beginDate}" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false});"/>
   <label>&nbsp;--&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
    <input id="endDate" name="endDate" type="text" readonly="readonly" maxlength="20" class="input-medium Wdate" value="${endDate}" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false});"/>&nbsp;&nbsp;&nbsp;
    <input id="btnSubmit" class="btn btn-primary" type="submit" value="查询"/>&nbsp;&nbsp;
  </div>
 </form:form>
   <input id="dataOne" name="dataOne" type="hidden" value="${dataOne}"/>
   <input id="dataTwo" name="dataTwo" type="hidden" value="${dataTwo}"/>
   <input id="dataThree" name="dataThree" type="hidden" value="${dataThree}"/>
   <input id="dataFour" name="dataFour" type="hidden" value="${dataFour}"/>
   <input id="dataFive" name="dataFive" type="hidden" value="${dataFive}"/>
   <input id="dataSix" name="dataSix" type="hidden" value="${dataSix}"/>
    <table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" class="table  table-bordered table-condensed">
  <tr>
   <td width="35%">
    <table  class="table table-striped table-bordered  font">
     <tr><td></td><td>数量</td></tr>
     <tr><td>第一期</td><td>${dataOne}</td></tr>
     <tr><td>第二期</td><td>${dataTwo}</td></tr>
     <tr><td>第三期</td><td>${dataThree}</td></tr>
     <tr><td>第四期</td><td>${dataFour}</td></tr>
     <tr><td>第五期</td><td>${dataFive}</td></tr>
     <tr><td>第六期</td><td>${dataSix}</td></tr>
     <tr><td>总计</td><td>${data}</td></tr>
    </table>
   </td>
   <td>
     <div id="container" style="width: 85%; height: 400px"> </div>
   </td> 
  </tr>
 </table>
<style>
.font{
 font-size:16px;
 font-weight:normal;
 text-align:center
 
 }
</style>
  </body>
</html>

 

注册用户jsp

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
 <title>注册用户</title>
 <meta name="decorator" content="default"/>
 <script type="text/javascript" src="${ctxStatic}/highCharts/highcharts.js"></script>
 <!-- <script type="text/javascript" src="${ctxStatic}/highCharts/exporting.js"></script> -->
 <script type="text/javascript">
 function page(n,s){
   $("#pageNo").val(n);
   $("#pageSize").val(s);
   $("#searchForm").submit();
         return false;
        }
 $(function () {
  var dataOne=parseInt(document.getElementById("dataOne").value);
  var dataTwo=parseInt(document.getElementById("dataTwo").value);
  var dataThree=parseInt(document.getElementById("dataThree").value);
  var dataFour=parseInt(document.getElementById("dataFour").value);
     $('#container').highcharts({
            chart: {
                type: 'column',
                backgroundColor: '#FCFFC5',
              
            },
            title: {
                text: '网站注册用户统计'
            },
            subtitle: {
                text: '用户数'
            },
            xAxis: {
                categories: [
                    '普通用户',
                    '彩信用户',
                ]
            },
            yAxis: {
                min: 0,
                title: {
                    text: '人数(个)'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:20px;color:red">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                              '<td style="padding:0"><b>{point.y}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
              pointWidth:60,  //柱宽
                    pointPadding: 0.1, //设置柱子间距
                    borderWidth: 0
                }   
            },
            series: [{
             color:'#ABC010',
                name: '有效用户',
                data: [dataOne, dataThree]
      
            }, {
                name: '无效用户',
                data: [dataTwo,dataFour]
      
            }]
        });
    });
  </script>  
</head>
  <body>
  <form:form id="searchForm" action="${ctx}/statistick/registerStatistick" method="post" class="breadcrumb form-search">
  <div>
   <input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/>
   <input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/>
   
  </div>
  <div>
   <label>手机号：</label>
    <input id="mobile" name="mobile" type="text" maxlength="50" style="width:115px" class="input-medium" value="${mobile}"/>
   <label>注册渠道：</label>
    <select id="status" name="clienttype" style="width:140px">
     <option value="">请选择</option>
     <option value="0" <c:if test="${clienttype=='0'}">selected</c:if>>全国版</option>
     <option value="1" <c:if test="${clienttype=='1'}">selected</c:if>>河北版</option>
     <option value="2" <c:if test="${clienttype=='2'}">selected</c:if>>广东版</option>
    </select>
   <!--  <label>用户状态：</label>
    <select id="userstatus" name="userstatus" style="width:140px">
     <option value="">请选择</option>
     <option value="0" <c:if test="${userstatus=='0'}">selected</c:if>>有效</option>
     <option value="1" <c:if test="${userstatus=='1'}">selected</c:if>>无效</option>
    </select> -->
   <label>注册日期：</label>
    <input id="beginDate" name="beginDate" type="text" readonly="readonly" maxlength="20" class="input-medium Wdate"
    value="${beginDate}" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false});"/>
   <label>--&nbsp;&nbsp;</label>
    <input id="endDate" name="endDate" type="text" readonly="readonly" maxlength="20" class="input-medium Wdate"
    value="${endDate}" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false});"/>&nbsp;&nbsp;
   &nbsp;<input id="btnSubmit" class="btn btn-primary" type="submit" value="查询"/>&nbsp;&nbsp;
  </div>
 </form:form>
   <input id="dataOne" name="dataOne" type="hidden" value="${dataOne}"/>
   <input id="dataTwo" name="dataTwo" type="hidden" value="${dataTwo}"/>
   <input id="dataThree" name="dataThree" type="hidden" value="${dataThree}"/>
   <input id="dataFour" name="dataFour" type="hidden" value="${dataFour}"/>
    <table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" class="table  table-bordered table-condensed">
  <tr>
   <td width="35%">
    <table class="table table-striped table-bordered font">
     <tr><td></td><td>有效</td><td>无效</td><td>合计</td></tr>
     <tr><td>普通用户</td><td>${dataOne}</td><td>${dataTwo}</td><td>${dataOne+dataTwo}</td></tr>
     <tr><td>彩信用户</td><td>${dataThree}</td><td>${dataFour}</td><td>${dataThree+dataFour}</td></tr>
     <tr><td>总计</td><td>${dataOne+dataThree}</td><td>${dataTwo+dataFour}</td><td>${dataOne+dataTwo+dataThree+dataFour}</td></tr>
       </table>
   </td>
   <td>
     <div id="container" style="width: 85%; height: 400px"> </div>
   </td> 
  </tr>
 </table>
<style>
.font{
 font-size:16px;
 font-weight:normal;
 text-align:center
 }
</style>
  </body>
</html>

 

购买用户jsp

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
 <title>购买用户</title>
 <meta name="decorator" content="default"/>
 <script type="text/javascript" src="${ctxStatic}/highCharts/highcharts.js"></script>
 <!-- <script type="text/javascript" src="${ctxStatic}/highCharts/exporting.js"></script> -->
 <script type="text/javascript">
 function page(n,s){
   $("#pageNo").val(n);
   $("#pageSize").val(s);
   $("#searchForm").submit();
         return false;
        }
 $(function () {
  var dataOne=parseInt(document.getElementById("dataOne").value);
  var dataTwo=parseInt(document.getElementById("dataTwo").value);
  var dataThree=parseInt(document.getElementById("dataThree").value);
  var dataFour=parseInt(document.getElementById("dataFour").value);
  var totaluserone=parseInt(document.getElementById("totaluserone").value);
  var totalusertwo=parseInt(document.getElementById("totalusertwo").value);
  var totaluserthree=parseInt(document.getElementById("totaluserthree").value);
  var totaluserfour=parseInt(document.getElementById("totaluserfour").value)
  
     $('#container').highcharts({
            chart: {
                type: 'column',
                backgroundColor: '#FCFFC5'
            },
            title: {
                text: '购买记录统计'
            },
            subtitle: {
                text: '数量'
            },
            xAxis: {
                categories: [
                    '第六期',
                    '第七期',
                    '第八期',
                    '第九期'
                ]
            },
            yAxis: {
                min: 0,
                title: {
                    text: '条数(个)'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:20px;color:red">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                              '<td style="padding:0"><b>{point.y}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
              pointWidth:45,  //柱宽
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
             color:'#ABC010',
                name: '用户数',
                data: [totaluserone,totalusertwo,totaluserthree,totaluserfour]
      
            },
            {
             color:'#ABCAAC',
                name: '交易数',
                data: [dataOne,dataTwo,dataThree,dataFour]
      
            }]
        });
    });
 </script>
</head>
  <body>
  <form:form id="searchForm" action="${ctx}/statistick/purchaseStatistick" method="post" class="breadcrumb form-search">
  <div>
   <input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/>
   <input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/>
  </div>
  <div >
   <label>产品名称：</label><input id="proname" name="proname" type="text" maxlength="50" style="width:115px" class="input-medium" value="${proname}"/>
   <label>用户手机号：</label><input id="mobile" name="mobile" type="text" maxlength="50"  style="width:115px" class="input-medium" value="${mobile}"/>
   <label>交易流水号：</label><input id="snid" name="snid" type="text" maxlength="50" style="width:115px" class="input-medium" value="${snid}"/>
   <label>支付状态：</label>
    <select id="status" style="width:140px" name="dealstatus">
     <option value="">请选择</option>
     <option value="0" <c:if test="${dealstatus=='0'}">selected</c:if>>已支付</option>
     <option value="1"<c:if test="${dealstatus=='1'}">selected</c:if>>未支付</option>
     <option value="2"<c:if test="${dealstatus=='2'}">selected</c:if>>已赎回</option>
    </select>
   <label>交易金额：</label>
    <input id="beginAmount" name="beginAmount" type="text" style="width:115px"  maxlength="50" style="height:20px;width:120px" value="${beginAmount}"/>&nbsp;&nbsp;&nbsp;--&nbsp;&nbsp;&nbsp;&nbsp;
    <input id="endAmount" name="endAmount" type="text" style="width:115px" maxlength="50" style="height:20px;width:120px" value="${endAmount}"/>
  </div>
  <div style="margin-top:8px;">
   
   <label>日期范围：&nbsp;</label>
    <input id="beginDate" name="beginDate" type="text" readonly="readonly" maxlength="20" class="input-medium Wdate" value="${beginDate}" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false});"/>
   <label>&nbsp;--&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
    <input id="endDate" name="endDate" type="text" readonly="readonly" maxlength="20" class="input-medium Wdate" value="${endDate}" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false});"/>&nbsp;&nbsp;&nbsp;
    <input id="btnSubmit" class="btn btn-primary" type="submit" value="查询"/>&nbsp;&nbsp;
  </div>
 </form:form>
   <input id="dataOne" name="dataOne" type="hidden" value="${dataOne}"/>
   <input id="dataTwo" name="dataTwo" type="hidden" value="${dataTwo}"/>
   <input id="dataThree" name="dataThree" type="hidden" value="${dataThree}"/>
   <input id="dataFour" name=dataFour type="hidden" value="${dataFour}"/>
   <input id="totaluserone" name="totaluserone" type="hidden" value="${totaluserone}"/>
   <input id="totalusertwo" name="totalusertwo" type="hidden" value="${totalusertwo}"/>
   <input id="totaluserthree" name="totaluserthree" type="hidden" value="${totaluserthree}"/>
   <input id="totaluserfour" name="totaluserfour" type="hidden" value="${totaluserfour}"/>
   
    <table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" class="table  table-bordered table-condensed">
  <tr>
   <td width="35%">
    <table class="table table-striped table-bordered font">
     <tr><td></td><td>用户数</td><td>交易笔数</td><td>总金额(元)</td></tr>
     <tr><td>第六期</td><td>${totaluserone}</td><td>${dataOne}</td><td>${totalmoneyone}</td></tr>
     <tr><td>第七期</td><td>${totalusertwo}</td><td>${dataTwo}</td><td>${totalmoneytwo}</td></tr>
     <tr><td>第八期</td><td>${totaluserthree}</td><td>${dataThree}</td><td>${totalmoneythree}</td></tr>
     <tr><td>第九期</td><td>${totaluserfour}</td><td>${dataFour}</td><td>${totalmoneyfour}</td></tr>
     <tr><td>总计</td><td>${totaluserone+totalusertwo+totaluserthree+totaluserfour}</td><td>${dataOne+dataTwo+dataThree+dataFour}</td><td>${totalmoneyone+totalmoneytwo+totalmoneythree+totalmoneyfour}</td></tr>
    </table>
   </td>
   <td>
    <div id="container" style="width: 85%; height: 400px"> </div>
   </td> 
  </tr>
 </table>
<style>
.font{
 font-size:16px;
 text-align:center;
 font-weight:normal
 }
</style>
  </body>
</html>