SpringMVC + on the front page of a bar graph based echats bootstrap

Function relevant points

1, controllable color bar graph legend.

2, the default settings legend selected.

3, the bar graph on custom tooltip.


Screenshot:







JSP page Source:

<%@ page contentType="text/html; charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%long version = java.lang.System.currentTimeMillis();%>
<!DOCTYPE html>

<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->

<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->

<!--[if !IE]><!--> <html lang="en" class="no-js"> <!--<![endif]-->

<!-- BEGIN HEAD -->
<head>
    <meta charset="utf-8" />
    <title>APP统计  | 神州专车</title>
    <link href="${baseContextPath}static/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="${baseContextPath}static/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css"/>
    <link href="${baseContextPath}static/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <link href="${baseContextPath}static/css/style-metro.css" rel="stylesheet" type="text/css"/>
    <link href="${baseContextPath}static/css/style.css" rel="stylesheet" type="text/css"/>
    <link href="${baseContextPath}static/css/style-responsive.css" rel="stylesheet" type="text/css"/>
    <link href="${baseContextPath}static/css/uniform.default.css" rel="stylesheet" type="text/css"/>
    <!-- END GLOBAL MANDATORY STYLES -->

    <!-- BEGIN PAGE LEVEL STYLES -->
    <link rel="stylesheet" type="text/css" href="${baseContextPath}static/css/select2_metro.css" />
    <link rel="stylesheet" type="text/css" href="${baseContextPath}static/css/chosen.css" />
    <link href="${baseContextPath}static/css/jquery.gritter.css" rel="stylesheet" type="text/css"/>
    <link href="${baseContextPath}static/css/fullcalendar.css" rel="stylesheet" type="text/css"/>
    <link href="${baseContextPath}static/css/jqvmap.css" rel="stylesheet" type="text/css" ${baseContextPath}static="screen"/>
    <link href="${baseContextPath}static/css/jquery.easy-pie-chart.css" rel="stylesheet" type="text/css" ${baseContextPath}static="screen"/>
    <!-- END PAGE LEVEL STYLES -->
    <link rel="shortcut icon" href="${baseContextPath}static/image/ucar/favicon.ico" />

    <link rel="stylesheet" type="text/css" href="${baseContextPath}static/css/datepicker.css" />
    <link rel="stylesheet" type="text/css" href="${baseContextPath}static/css/daterangepicker.css" />
    <link rel="stylesheet" type="text/css" href="${baseContextPath}static/css/datetimepicker.css" />
    <link rel="stylesheet" type="text/css" href="${baseContextPath}static/css/timepicker.css" />
    <script type="text/javascript">var BATH_PATH='${baseContextPath}';</script>

</head>

<!-- END HEAD -->

<!-- BEGIN BODY -->

<body>
<div class="row-fluid">
    <div class="span12">
        <!-- BEGIN VALIDATION STATES-->
        <div class="portlet box blue">
            <div class="portlet-title">
                <div class="caption"><i class="icon-reorder"></i>查询条件</div>
            </div>
            <div class="portlet-body form">
                <!-- BEGIN FORM-->
                <form id="searchForm" action="${baseContextPath}wauAnalysis/loadDataForWau" class="form-horizontal">
                    <input id="appVersionList" name="appVersionList" value="${appVersion}" type="hidden"/>
                    <input id="timeType" name="timeType" value="${empty searchObj.timeType ? 'week' : searchObj.timeType}" type="hidden"/>
                    <input id="dataType" name="dataType" value="${empty searchObj.dataType ? 'JDZ' : searchObj.dataType}" type="hidden"/>
                    <!--/row-->
                    <div class="row-fluid">
                        <div class="span4 ">
                            <div class="control-group">
                                <label class="control-label">开始时间</label>
                                <div class="controls">
                                    <input id="beginTime" name="beginTime" size="16" type="text" value="${searchObj.beginTime }" readonly class="m-wrap span12 form_dateday">
                                </div>
                            </div>
                        </div>
                        <!--/span-->
                        <div class="span4 ">
                            <div class="control-group">
                                <label class="control-label">结束时间</label>
                                <div class="controls">
                                    <input id="endTime" name="endTime" size="16" type="text" value="${searchObj.endTime }" readonly class="m-wrap span12 form_dateday">
                                </div>
                            </div>
                        </div>
                        <!--/span-->
                        <div class="span4 ">
                            <div class="control-group">
                                <label class="control-label">客户端类型<span class="required"></span></label>
                                <div class="controls select2-wrapper">
                                    <select id="form_2_select1" class="span12" name="appType">
                                        <option value=""></option>
                                        <option value="D_android" <c:if test="${searchObj.appType=='D_android'}">selected="selected" </c:if> >神州专车-司机端</option>
                                        <option value="M_iOS" <c:if test="${searchObj.appType=='M_iOS'}">selected="selected" </c:if> >神州专车-IOS</option>
                                        <option value="M_android" <c:if test="${searchObj.appType=='M_android'}">selected="selected" </c:if> >神州专车-android</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--/row-->
                    <div class="form-actions">
                        <button id="btnQuery" type="button" class="btn blue"><i class="icon-ok"></i>查询</button>
                    </div>
                </form>
                <!-- END FORM-->
            </div>
        </div>
        <!-- END VALIDATION STATES-->
    </div>
</div>

<!-- charts layout begin -->
<div class="row-fluid">
    <div class="span12 ">
        <div class="portlet box blue tabbable">
            <div class="portlet-title">
                <div class="caption"><i class="icon-reorder"></i>周用户构成</div>
            </div>
            <div class="portlet-body">
                <div class="tabbable portlet-tabs">
                    <ul class="nav nav-tabs">
                        <li><a eleType="tab" href="#portlet_tab1" data-toggle="tab" id="tab_ratio" dataType="BFB">百分比</a></li>
                        <li class="active"><a eleType="tab" href="#portlet_tab2" data-toggle="tab" id="tab_num" dataType="JDZ">绝对值</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="portlet_tab1">
                            <div id="chart_div" style="width:100%;height:500px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- charts layout end -->

<!-- table layout begin -->
<div class="row-fluid">
     <div class="span12">
        <!-- BEGIN EXAMPLE TABLE PORTLET-->
        <div class="portlet box blue">
        <div class="portlet-title">
            <div class="caption"><i class="icon-globe"></i>周用户构成明细</div>
        </div>
        <div class="portlet-body">
        <div class="clearfix">
        </div>
        <table class="table table-striped table-bordered table-hover" id="threecol">
            <thead id="table_header">
            </thead>
            <tbody id="table_rows">
                
            </tbody>
        </table>
        </div>
        </div>
        <!-- END EXAMPLE TABLE PORTLET-->
    </div>
</div>
<!-- table layout end -->

<script src="${baseContextPath}static/js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="${baseContextPath}static/js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<!-- IMPORTANT! Load jquery-ui-1.10.1.custom.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip -->
<script src="${baseContextPath}static/js/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>
<script src="${baseContextPath}static/js/bootstrap.min.js" type="text/javascript"></script>
<!--[if lt IE 9]>
<script src="${baseContextPath}static/js/excanvas.min.js"></script>
<script src="${baseContextPath}static/js/respond.min.js"></script>
<![endif]-->
<script src="${baseContextPath}static/js/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="${baseContextPath}static/js/jquery.blockui.min.js" type="text/javascript"></script>
<script src="${baseContextPath}static/js/jquery.cookie.min.js" type="text/javascript"></script>
<script src="${baseContextPath}static/js/jquery.uniform.min.js" type="text/javascript" ></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN PAGE LEVEL PLUGINS -->
<script type="text/javascript" src="${baseContextPath}static/js/chosen.jquery.min.js"></script>
<script type="text/javascript" src="${baseContextPath}static/js/wysihtml5-0.3.0.js"></script>
<script type="text/javascript" src="${baseContextPath}static/js/bootstrap-wysihtml5.js"></script>
<script type="text/javascript" src="${baseContextPath}static/js/jquery.tagsinput.min.js"></script>
<script type="text/javascript" src="${baseContextPath}static/js/jquery.toggle.buttons.js"></script>
<script type="text/javascript" src="${baseContextPath}static/js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="${baseContextPath}static/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="${baseContextPath}static/js/clockface.js"></script>
<script type="text/javascript" src="${baseContextPath}static/js/date.js"></script>
<script type="text/javascript" src="${baseContextPath}static/js/daterangepicker.js"></script>
<script type="text/javascript" src="${baseContextPath}static/js/bootstrap-colorpicker.js"></script>
<script type="text/javascript" src="${baseContextPath}static/js/bootstrap-timepicker.js"></script>
<script type="text/javascript" src="${baseContextPath}static/js/jquery.inputmask.bundle.min.js"></script>
<script type="text/javascript" src="${baseContextPath}static/js/jquery.input-ip-address-control-1.0.min.js"></script>
<script type="text/javascript" src="${baseContextPath}static/js/jquery.multi-select.js"></script>
<script src="${baseContextPath}static/js/bootstrap-modal.js" type="text/javascript" ></script>
<script src="${baseContextPath}static/js/bootstrap-modalmanager.js" type="text/javascript" ></script>
<script type="text/javascript" src="${baseContextPath}static/js/select2.min.js"></script>
<script type="text/javascript" src="${baseContextPath}static/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="${baseContextPath}static/js/DT_bootstrap.js"></script>
<!-- END PAGE LEVEL PLUGINS -->
<script type="text/javascript" src="${baseContextPath}static/js/jquery.validate.min.js"></script>
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="${baseContextPath}static/js/app.js"></script>
<script src="${baseContextPath}static/js/table-managed.js"></script>
<script src="${baseContextPath}static/js/form-validation.js"></script>
<script src="${baseContextPath}static/selfJs/common.js" type="text/javascript"></script>
<!-- END PAGE LEVEL SCRIPTS -->
<script src="${baseContextPath}static/selfJs/datepicker.js" type="text/javascript"></script>
<script src="${baseContextPath}static/echarts3/echarts.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
    // initiate layout and plugins
    App.init();
    FormValidation.init();
});
</script>
<script type="text/javascript" src="${baseContextPath}static/import/wau/wau.js?v=<%=version%>"></script>
</body>
</html>

Introduced wau.js Source:


/**
 * 周用户构成模块
 * @author 石冬冬
 * @date 2016/12/8
 */
var Wau = {
	Cts:{
		charts:{
			render:null,
			legendData:['新用户','本周回流用户','连续活跃2周用户','连续活跃3周用户','连续活跃4周用户','忠诚用户','近期流失用户'],
			legendColor:{
				JDZ:['#fdd772','#f9b865','#f6994e','#f17a40','#e35a3f','#d44141','#cccccc'],
				BFB:['#fdd772','#f9b865','#f6994e','#f17a40','#e35a3f','#d44141'],
				get:function(dataType){
					if(dataType=='JDZ'){
						return this.JDZ;
					}
					if(dataType=='BFB'){
						return this.BFB;
					}
				}
			},
			selected:{
				JDZ:{'新用户':true,'本周回流用户':true,'连续活跃2周用户':true,'连续活跃3周用户':true,'连续活跃4周用户':true,'忠诚用户':true,'近期流失用户':false},
				BFB:{'新用户':true,'本周回流用户':true,'连续活跃2周用户':true,'连续活跃3周用户':true,'连续活跃4周用户':true,'忠诚用户':true},
				get:function(dataType){
					if(dataType=='JDZ'){
						return this.JDZ;
					}
					if(dataType=='BFB'){
						return this.BFB;
					}
				}
			},
			totals:[],
			timeDatas:[]
		},
		dataType:$('#dataType').val()
	},
	/**
	* 初始化
	*/
	init:function(){
		this.initEvts();
		this.initData();
	},
	/**
	 * 初始化事件
	 */
	initEvts:function(){
		var _this = Wau;
		$('#btnQuery').off().live('click',function(){
			_this.initData();
		});
		//选项卡切换
		$('a[eleType=tab]').off().live('click',function(){
			var dataType = $(this).attr('dataType');
			$('#dataType').val(dataType);
			_this.Cts.dataType = dataType;
			_this.initData();
		});
	},
	/**
	 * 初始化报表
	 * @param xseriesDatas x坐标数组
	 */
	initCharts:function(xseriesDatas){
		var _this = Wau;
		var dataType = $('#dataType').val();
		var _yAxis = [
            {
                type : 'value',
                boundaryGap : false
            }
        ];
		if(dataType=='BFB'){
			_yAxis = [
	            {
	                type : 'value',
	                //max:'100',
	                axisLabel: {
	                    show: true,
	                    interval: 'auto',
	                    formatter: '{value} %'
	                },
	                boundaryGap : false
	            }
	        ];
		}
		var Load = {
			/**
			 * 根据x轴名称找到相应的所有series值
			 * @param key
			 */
			tooltip:function(key){
				var tips = key + '<br>';
				var dataType = _this.Cts.dataType;
				var legendData = _this.Cts.charts.legendData;
				var timeDatas = _this.Cts.charts.timeDatas;
				var datas = [];
				$(timeDatas).each(function(index){
					if(timeDatas[index].key == key){
						datas = timeDatas[index].datas;
						return;
					}
				});
				$(datas).each(function(i){
					var suffex = (dataType=='BFB') ? '%' : '';
					tips += legendData[i] + ':' + datas[i] + suffex + '<br>';
				});
				return tips;
			}
		};
		var seriesData = xseriesDatas.seriesData;
        var legendData = xseriesDatas.legendData;
        var xAxisData = xseriesDatas.xAxisData;
        var selected = _this.Cts.charts.selected.get(dataType);
        var color = _this.Cts.charts.legendColor.get(dataType);
        //console.log('xseriesDatas=%s',JSON.stringify(xseriesDatas));
        var myChart = echarts.init(document.getElementById("chart_div"), 'bar');
        this.Cts.charts.render = myChart;
        var option = {
            title : {
                //text: '活跃用户分时统计'
                //subtext: '数据来自网络'
            },
            tooltip : {
                trigger: 'item',
                formatter:function (params,ticket,callback) {
                	return Load.tooltip(params.name);
                }
            },
            color:color,
            legend: {
            	show:true,
            	padding: [5,100,5,100],
            	selected:selected,
                data : legendData
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: false},
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView : {show: true, readOnly: false},
                    magicType: {show: true, type: ['line','bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            xAxis : [{
                type:'category',
                interval:0,
                data:xAxisData
            }],
            yAxis : _yAxis,
            series : seriesData
        };
        //option.legend.selected['近期流失用户']=false;
        myChart.setOption(option);
	},
	/**
	 * 初始化数据
	 */
	initData:function(){
		var params = $('#searchForm').serialize(); 
		var _this = Wau;
		$.ajax({
       		type : "post",
       		url : BATH_PATH + "wauAnalysis/loadDataForWau",
       		data: params,
       		dataType : "json",
       		async : false,
       		error : function(xhr, status, err) {
				//alert(err);
       		},
       		success : function(rs) {
       			_this.renderCharts(rs);
       		}
   		});
	},
	/**
	 * 初始化序列
	 * @param xseriesData
	 * @param xAxisData
	 * @returns {___anonymous4855_4938}
	 */
	initSeries:function(xseriesData,xAxisData){
		var _this = Wau;
		var dataType = _this.Cts.dataType;
		var seriesData = [];
		var legendData = _this.Cts.charts.legendData;
		if(dataType=='BFB'){
			legendData = legendData.slice(0, legendData.length-1);
		}
		$(legendData).each(function(index){
			var vo = {
	            name: legendData[index],
	            type: 'bar',
	            stack:'1',
	            barMaxWidth:'50',
	            tooltip : {
	                show : true,
	                trigger: 'item'
	            },
	            areaStyle: {normal: {}},
	            data: xseriesData[index]
		    };
			//console.log(JSON.stringify(vo));
			seriesData.push(vo);
		});
		//console.log('seriesData=%s',JSON.stringify(seriesData));
		//console.log('legendData=%s',JSON.stringify(legendData));
		//console.log('xAxisData=%s',JSON.stringify(xAxisData));
		return {
			seriesData:seriesData,
			legendData:legendData,
			xAxisData:xAxisData
		};
	},
	/**
	 * 初始化表格
	 */
	initTable:{
		/**
		 * 初始化表格列头
		 */
		header:function(){
			var _this = Wau;
			var dataType = _this.Cts.dataType;
			var html = '<th>时间</th>';
			var legendData = _this.Cts.charts.legendData;
			if(dataType=='BFB'){
				legendData = legendData.slice(0, legendData.length-1);
			}
			$(legendData).each(function(index){
				html += '<th>' + legendData[index] + '</th>';
			});
			return html;
		},
		/**
		 * 初始化行记录
		 * @param time
		 * @param vo
		 */
		rows:function(time,_datas){
			var _this = Wau;
			var dataType = _this.Cts.dataType;
			var row = '';
			var suffex = (dataType=='BFB') ? '%' : '';
			row += '<tr>';
			row += '<td>' + time +'</td>';
			$(_datas).each(function(i){
				row += '<td>' + _datas[i] + suffex +'</td>';
			});
			row += '</tr>';
			return row;
		},
		/**
		 * 渲染
		 * @param rows
		 */
		render:function(rows){
			$('#table_header').html(this.header());
			$('#table_rows').html(rows);
		}
	},
	/**
	 * 换算百分数显示
	 * @param value
	 * @param total
	 */
	formatValue:function(value,total){
		value = Number(value);
		total = Number(total);
		if(total!=0){
			return ((value / total) * 100).toFixed(2);
		}
		return Number(0.00);
	},
	/**
	 * 渲染Charts
	 * @param rs
	 */
	renderCharts:function(rs){
		var _this = Wau;
		var dataType = _this.Cts.dataType;
		var xAxisData = [];
		var xseriesData = [[],[],[],[],[],[],[]];
		var timeDatas = [];
		var tableRows = '';
		if(rs){
			console.log('rs=%s',JSON.stringify(rs));
			//======================绝对值=============================
			if(dataType=='JDZ'){
				$.each(rs,function(key,vo){
					var weekday = key.split('~')[0];
					xAxisData.push(weekday);
					xseriesData[0].push(vo.newUsers);
					xseriesData[1].push(vo.backUsers);
					xseriesData[2].push(vo.active2Users);
					xseriesData[3].push(vo.active3Users);
					xseriesData[4].push(vo.active4Users);
					xseriesData[5].push(vo.loyalUsers);
					xseriesData[6].push(-vo.lossUsers);
					var _datas = [vo.newUsers,vo.backUsers,vo.active2Users,vo.active3Users,vo.active4Users,vo.loyalUsers,vo.lossUsers];
					timeDatas.push({
						key:weekday,
						datas:_datas
					});
					tableRows += _this.initTable.rows(weekday, _datas);
					//totals.push(vo.newUsers+vo.backUsers+vo.active2Users+vo.active3Users+vo.loyalUsers+vo.lossUsers);
				});
			}
			//======================百分比=============================
			if(dataType=='BFB'){
				$.each(rs,function(key,vo){
					var weekday = key.split('~')[0];
					xAxisData.push(weekday);
					xseriesData[0].push(_this.formatValue(vo.newUsers,vo.total));
					xseriesData[1].push(_this.formatValue(vo.backUsers,vo.total));
					xseriesData[2].push(_this.formatValue(vo.active2Users,vo.total));
					xseriesData[3].push(_this.formatValue(vo.active3Users,vo.total));
					xseriesData[4].push(_this.formatValue(vo.active4Users,vo.total));
					xseriesData[5].push(_this.formatValue(vo.loyalUsers,vo.total));
					var _datas = [
				       _this.formatValue(vo.newUsers,vo.total),
				       _this.formatValue(vo.backUsers,vo.total),
				       _this.formatValue(vo.active2Users,vo.total),
				       _this.formatValue(vo.active3Users,vo.total),
				       _this.formatValue(vo.active4Users,vo.total),
				       _this.formatValue(vo.loyalUsers,vo.total)
					];
					timeDatas.push({
						key:weekday,
						datas:_datas
					});
					tableRows += _this.initTable.rows(weekday, _datas);
				});
			}
			_this.Cts.charts.timeDatas = timeDatas;
		}
		_this.initTable.render(tableRows);
		var xseriesDatas = _this.initSeries(xseriesData, xAxisData);
		_this.initCharts(xseriesDatas);
	}
};
Wau.init();


Controller

package com.ucar.appcount.web.controller;

import java.text.SimpleDateFormat;
import java.util.Calendar;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.ucar.appcount.common.vo.SearchObject;
import com.ucar.appcount.service.AdminManagerServiceNew;
import com.ucar.appcount.service.WauAnalysisService;
import com.zuche.framework.utils.StringUtils;
/**
 * 用户构成
 * @author 石冬冬-Heil Hilter([email protected])
 * @date 2016-12-8 下午2:01:09
 */
@Controller
@RequestMapping("wauAnalysis")
public class WauAnalysisController {
	private static final Logger logger = LoggerFactory.getLogger(WauAnalysisController.class);
	@Autowired
	private AdminManagerServiceNew adminManagerServiceNew;
	@Autowired
	private WauAnalysisService wauAnalysisService;
	
	private final String PAGE_PREFIX = "wau/";
	/**
	 * 周用户构成
	 * @author 石冬冬-Heil Hilter([email protected])
	 * @date 2016-12-8 下午2:09:33
	 * @param model
	 * @param searchObj
	 * @return
	 */
	@RequestMapping("wau")
	public String wau(Model model,SearchObject searchObj){
		try {
			List<String> appChannel = adminManagerServiceNew.getAppChannel();
	        List<String> appVersion = adminManagerServiceNew.getAppVersion();
	        initSearchObj(searchObj);
	        model.addAttribute("searchObj", searchObj);
	        model.addAttribute("appChannel",appChannel);
	        model.addAttribute("appVersion", appVersion);
		} catch (Exception e) {
			logger.error("周用户构成初始化异常",e);
		}
		return PAGE_PREFIX.concat("wau");
	}
	/**
	 * 周用户构成
	 * @author 石冬冬-Heil Hilter([email protected])
	 * @date 2016-12-8 下午2:11:02
	 * @param searchObj
	 * @return
	 */
	@RequestMapping("loadDataForWau")
    @ResponseBody
    public Object loadDataForWau(SearchObject searchObj){
        return this.wauAnalysisService.loadDataForWau(searchObj);
    }
	
	
	private void initSearchObj(SearchObject seachObj) {
        SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd");
        if(StringUtils.isBlank(seachObj.getBeginTime())){
            Calendar calendar=Calendar.getInstance();
            calendar.add(Calendar.MONTH,-2);
            seachObj.setBeginTime(sdf.format(calendar.getTime()));
        }
        if(StringUtils.isBlank(seachObj.getEndTime())){
        	Calendar calendar=Calendar.getInstance();
            seachObj.setEndTime(sdf.format(calendar.getTime()));
        }
        
    }
}


Service
package com.ucar.appcount.service.impl;

import java.util.LinkedHashMap;
import java.util.List;
import java.util.Map;
import java.util.Map.Entry;
import java.util.Set;

import org.apache.hadoop.hbase.util.Bytes;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.alibaba.fastjson.JSON;
import com.ucar.appcount.common.CommonUtils;
import com.ucar.appcount.common.DateFormatUtil;
import com.ucar.appcount.common.StatisticalConstants;
import com.ucar.appcount.common.vo.SearchObject;
import com.ucar.appcount.common.vo.WauVo;
import com.ucar.appcount.component.SearchComponent;
import com.ucar.appcount.hbase.service.impl.BaseOperator;
import com.ucar.appcount.service.DevUserServiceNew;
import com.ucar.appcount.service.WauAnalysisService;
import com.ucar.appcount.service.WauAnalysisTabService;
import com.zuche.framework.nosql.hbase098.vo.Column;
import com.zuche.framework.nosql.hbase098.vo.RowVo;
@Service
public class WauAnalysisServiceImpl extends BaseOperator implements WauAnalysisService {
	private static final Logger logger = LoggerFactory.getLogger(WauAnalysisServiceImpl.class);
	@Autowired
	private SearchComponent searchComponent;
	@Autowired 
	private WauAnalysisTabService wauAnalysisTabService;
	@Autowired
	private DevUserServiceNew devUserServiceNew;
	
	@Override
	public List<RowVo> queryListForWau(SearchObject searchObj, String filterList) {
		return this.wauAnalysisTabService.queryListForWau(searchObj, filterList);
	}

	@Override
	public Map<String, WauVo> loadDataForWau(SearchObject searchObj) {
		Map<String, WauVo> dataMap = new LinkedHashMap<String, WauVo>();
		try {
			String timeType= searchObj.getTimeType();
			//1、构建查询结果Map
			this.searchComponent.initDataMapForWau(dataMap,searchObj);
			String filterList = this.searchComponent.initFilterListForWau(searchObj);
			//2、获取新增用户Map
			Map<String,Integer> userAddMap = this.devUserServiceNew.getNewUserNum(searchObj);
			//2.1、按时间装载新增用户数
			Set<Entry<String, WauVo>> entrySet = dataMap.entrySet();
			for(Entry<String, WauVo> entry : entrySet){
				String dataKey = entry.getKey();
				if(userAddMap.containsKey(dataKey)){
					WauVo vo = entry.getValue();
					Double addUsers = Double.valueOf(userAddMap.get(dataKey).doubleValue());
					vo.setNewUsers(addUsers);
				}
			}
			/*****************************************************************/
			/**
			 * rowkey特殊规则说明:新增日期#APP类型#APP版本#下载渠道#统计日期
			 * 按周:(20161127#M_android#-1/0/2/3/4/5)
			 */
			/*****************************************************************/
			//3、获取留存用户
			List<RowVo> rs = this.queryListForWau(searchObj, filterList);
			for(RowVo row : rs){
				String key = row.getRowKey();
				String rowKey = row.getRowKey();
				String composition = rowKey.split("#")[1];//构成成分
				StatisticalConstants.UserConstituteEnum constituteEnum = StatisticalConstants.UserConstituteEnum.getByIndex(composition);
				if(null==constituteEnum){
					continue;
				}
	            key = key.substring(0,key.indexOf("#",0));
	            key = CommonUtils.handlerTime(key, timeType);
                key = DateFormatUtil.getFirstDayOfWeek(key);
                key = key + "~" + DateFormatUtil.getLastDayOfWeek(key);
	            List<Column> columns = row.getColumns();
	            Integer count = Integer.valueOf(getValue(columns,Bytes.toBytes("statistical"), Bytes.toBytes("count")));
	            if(dataMap.containsKey(key)){
	            	WauVo vo = dataMap.get(key);
	            	Double origValue = 0D;
	            	switch (constituteEnum) {
						case LOSS:
							origValue = (null == vo.getLossUsers()) ? 0D : vo.getLossUsers();
							vo.setLossUsers(count + origValue);
							break;
						case BACK:
							origValue = (null == vo.getBackUsers()) ? 0D : vo.getBackUsers();
							vo.setBackUsers(count + origValue);
							break;
						case ACTIVE_2:
							origValue = (null == vo.getActive2Users()) ? 0D : vo.getActive2Users();
							vo.setActive2Users(count + origValue);					
							break;
						case ACTIVE_3:
							origValue = (null == vo.getActive3Users()) ? 0D : vo.getActive3Users();
							vo.setActive3Users(count + origValue);	
							break;
						case ACTIVE_4:
							origValue = (null == vo.getActive4Users()) ? 0D : vo.getActive4Users();
							vo.setActive4Users(count + origValue);	
							break;
						case LOYAL:
							origValue = (null == vo.getLoyalUsers()) ? 0D : vo.getLoyalUsers();
							vo.setLoyalUsers(count + origValue);
							break;
						default:
							break;
					}
	            	dataMap.put(key, vo);
	            }
			}
			logger.error("周用户构成加载数据:dataMap={}",JSON.toJSONString(dataMap));
		} catch (Exception e) {
			logger.error("周用户构成加载数据异常:dataMap={}",JSON.toJSONString(dataMap),e);
		}
		return dataMap;
	}
}



Published 46 original articles · won praise 27 · views 160 000 +

Guess you like

Origin blog.csdn.net/shichen2010/article/details/53542205