hightChart 的一些实现，控件的使用，以及数据接口的拼接
3个回复
chen_weiqiang 10年前 1楼
<%--
@(#)appversion.html 2016/4/18
@author cwq
--%>
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ include file="/WEB-INF/taglib.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<title><jc:title /></title>
<meta name="description" content="overview & stats" />
<link rel="stylesheet" href="/res/ace-1.3.3/assets/css/bootstrap.css" />
<link rel="stylesheet" href="/res/ace-1.3.3/assets/css/font-awesome.css" />
<link rel="stylesheet" href="/res/ace-1.3.3/assets/css/jquery-ui.css" />
<link rel="stylesheet" href="/res/ace-1.3.3/assets/css/datepicker.css" />
<link rel="stylesheet" href="/res/ace-1.3.3/assets/css/ui.jqgrid.css" />
<link rel="stylesheet" href="/res/ace-1.3.3/assets/css/ace-fonts.css" />
<link rel="stylesheet" href="/res/ace-1.3.3/assets/css/ace.css" class="ace-main-stylesheet" id="main-ace-style" />
<!--[if lte IE 9]>
<link rel="stylesheet" href="/res/ace-1.3.3/assets/css/ace-part2.css" class="ace-main-stylesheet" />
<![endif]-->
<!--[if lte IE 9]>
<link rel="stylesheet" href="/res/ace-1.3.3/assets/css/ace-ie.css" />
<![endif]-->
<!-- inline styles related to this page -->
<!-- ace settings handler -->
<script src="/res/ace-1.3.3/assets/js/ace-extra.js"></script>
<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->
<!--[if lte IE 8]>
<script src="/res/ace-1.3.3/assets/js/html5shiv.js"></script>
<script src="/res/ace-1.3.3/assets/js/respond.js"></script>
<![endif]-->
</head>
<body class="no-skin">
<%--顶部--%>
<div id="navbar" class="navbar navbar-default navbar-fixed-top">
<script type="text/javascript">
try{ace.settings.check('navbar' , 'fixed')}catch(e){}
</script>
<div class="navbar-container" id="navbar-container">
<jsp:include page="/WEB-INF/view/common/top.jsp"/>
</div>
</div>
<%--end 顶部--%>
<div class="main-container" id="main-container">
<script type="text/javascript">
try{ace.settings.check('main-container' , 'fixed')}catch(e){}
</script>
<!-- #下拉 -->
<div id="sidebar" class="sidebar sidebar-fixed responsive">
<script type="text/javascript">
try{ace.settings.check('sidebar' , 'fixed')}catch(e){}
</script>
<div class="sidebar-shortcuts" id="sidebar-shortcuts">
<div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
<button class="btn btn-success">
<i class="ace-icon fa fa-signal"></i>
</button>
<button class="btn btn-info">
<i class="ace-icon fa fa-pencil"></i>
</button>
<!-- #section:basics/sidebar.layout.shortcuts -->
<button class="btn btn-warning">
<i class="ace-icon fa fa-users"></i>
</button>
<button class="btn btn-danger">
<i class="ace-icon fa fa-cogs"></i>
</button>
<!-- /section:basics/sidebar.layout.shortcuts -->
</div>
<div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">
<span class="btn btn-success"></span> <span class="btn btn-info"></span>
<span class="btn btn-warning"></span> <span class="btn btn-danger"></span>
</div>
</div>
<!-- /.sidebar-shortcuts -->
<!-- 菜单 -->
<jc:menu />
<!-- /.nav-list -->
<!-- #section:basics/sidebar.layout.minimize -->
<div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
<i class="ace-icon fa fa-angle-double-left"
data-icon1="ace-icon fa fa-angle-double-left"
data-icon2="ace-icon fa fa-angle-double-right"></i>
</div>
<!-- /section:basics/sidebar.layout.minimize -->
<script type="text/javascript">
try{ace.settings.check('sidebar' , 'collapsed')}catch(e){}
</script>
</div>
<!-- /section:basics/sidebar -->
<div class="main-content">
<div class="main-content-inner">
<!-- #section:basics/content.breadcrumbs -->
<div class="breadcrumbs breadcrumbs-fixed" id="breadcrumbs">
<script type="text/javascript">
try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
</script>
<jc:breadcrumb />
</div>
<div class="page-content">
<div class="clearfix"></div>
<div class="row" style="margin: 20px 0px">
<div class="col-sm-10">
<div id="ID_container" style="min-width:400px;height:400px"></div>
</div>
<div class="col-sm-2">
<div class="row"style="margin-top:10px;margin-bottom: 10px ">
统计方式：
<select id="ID_userCount">
<option value="0">按日统计</option>
<option value="1">按月统计</option>
<option value="2">按年统计</option>
</select>
</div>
<div class="row" style="margin-top:10px;margin-bottom: 10px ">
选择页码：第 <select id="ID_userPage">
</select>页
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="row" style="margin: 20px 0px">
<div id="ID_container_shop" style="min-width:400px;height:400px"></div>
</div>
<div class="clearfix"></div>
<div class="row" style="margin: 20px 0px">
<div class="col-sm-10">
<div id="ID_container_order" style="min-width:400px;height:400px"></div>
</div>
<div class="col-sm-2">
<div class="row"style="margin-top:10px;margin-bottom: 10px ">
统计方式：
<select id="ID_userCount_order">
<option value="0">按日统计</option>
<option value="1">按月统计</option>
<option value="2">按年统计</option>
</select>
</div>
<div class="row" style="margin-top:10px;margin-bottom: 10px ">
选择页码：第 <select id="ID_userPage_order">
</select>页
</div>
</div>
</div>
<div class="row" style="margin: 20px 0px">
<div class="col-lg-6">
<iframe id="ID_map"class="col-lg-12" style="height: 600px;"></iframe>
</div>
<div class="col-lg-6">
<div id="ID_area" style="min-width:400px;height:400px"></div>
</div>
</div>
<div class="row" style="margin: 20px 0px">
<div id="ID_sex" style="min-width:400px;height:400px"></div>
</div>
<div class="row" style="margin: 20px 0px">
<div id="ID_showFz" style="min-width:400px;height:400px"></div>
</div>
</div>
</div>
</div>
<!-- /.main-content -->
<jsp:include page="/WEB-INF/view/common/footer.jsp" flush="true" />
<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
<i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
</a>
<!-- /.main-container -->
<jsp:include page="/WEB-INF/view/common/basejs.jsp"/>
<%--// jQuery--%>
<%--<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>--%>
<%--// Highcharts--%>
<script src="/res/highcharts/highcharts.js"></script>
<script type="text/javascript">
var Y = [];//y周数组
// var showUserDataTotalPage = 0 ;//第一个报表所有的行数
$(document).ready(function () {
showUserData(0,1);
showShopItem();
showOrderData(0,1);
toMap();
showSex();
showFz();
});
/*
*
* @showType 0是每天 1是每月 2是每年
* @page 第几页
* */
var showUserData = function(showType,page){
/*
* type 1安装用户 , 注册的用户 , 美容师注册 ,订单成单量 2商品统计 3用户区域 4性别 5肤质
* show_type 0 安装用户 1 注册的用户 2 美容师注册 3 订单成单量
* 按天统计
* */
var rows = 10;//日
$.post("/statistics",{
type:1,
show_type:0,
page:page,
rows:rows,
selectType:showType
},function(data1){//code 0
// console.log(data1);
if(data1&&data1.totalPage){
// showUserDataTotalPage = data1.totalPage;
// firstPage: true lastPage: true pageNumber: 1 pageSize: 20 totalPage: 1 totalRow: 2
for(var i=0;i<data1.totalPage;i++){
$("#ID_userPage").append("<option value="+(i+1)+">"+(i+1)+"</option>");
}
}
$.post("/statistics",{
type:1,
show_type:1,
page:page,
rows:rows,
selectType:showType
},function(data2){
$.post("/statistics", {
type:1,
show_type:2,
page:page,
rows:rows,
selectType:showType
},function(data3){
if(data1.list) {
var x,d1,d2,d3;
x= getXY(data1,showType).split(",");
d1 = Y;
x = getXY(data2,showType).split(",");
d2 = Y;
x = getXY(data3,showType).split(",");
d3 = Y;
var yAxis = [
{
name:"安装用户",
data:d1
},{
name:"注册用户",
data:d2
}, {
name:"注册美容师",
data:d3
}
]
// console.log(yAxis);
$("#ID_container").html("");
chart("ID_container","总体信息统计",x,"人",yAxis);
}
});
});
});
}
/*
* 更改数据
* */
$("#ID_userCount").change(function(){
showUserData($(this).val(),1);
});
$("#ID_userPage").change(function(){
showUserData($("#ID_userCount").val(),$("#ID_userPage").val());
});
/*
* 生成 数组 用"|"分割
* @show_type 0 是每天 1是每月 2是每年
* */
var getXY = function(data1,show_type){
var x="";//x 轴
var y =[];
for (var i = 0; i < data1.list.length; i++) {
var timeStr = data1.list[i].data_time;
var count = data1.list[i].count;
if(show_type==0)timeStr = timeStr.substr(0, 4) + "年" + timeStr.substr(4, 2) + "月" + timeStr.substr(6, 2);
if(show_type==1)timeStr = timeStr.substr(0, 4) + "年" + timeStr.substr(4, 2) + "月";
if(show_type==2)timeStr = timeStr.substr(0, 4) + "年";
x = i == 0 ? timeStr : x + "," + timeStr;
y[i] = parseInt(count);
}
Y = y;
return x;
}
/*
*
* 报表数据折线图输出
* @id 输出的id
* @ xAxis x 轴一维数组
* @title 标题
* @yAxis json数组 [{name:"",data:[]},{}]
* */
var chart = function(id,title,xAxis,company,yAxis){
$('#'+id).highcharts({
title: {
// text: '总体信息统计',
text:title,
x: -20 //center
},
xAxis: {
categories: xAxis
},
yAxis: {
title: {
text: company
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: company
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series:yAxis
});
$("#"+id+" text:last").hide();
}
/*
* 商品双饼图
* */
var showTwoArrData;
var showTwokey;
/*
* @categoriesArrKey 关键字
* @categoriesArrValue 分类总数据
* */
var f_getTwoData = function(categoriesArrKey,categoriesArrValue){
var resultInt = [];
var resultName = "";
var i =0;
$(showTwoArrData).each(function(key,value){
var boole = false;
$(value).each(function(k,v){
if(k==0) {
if(categoriesArrKey==v) boole=true;
}
if(k==1&&boole){
resultName = resultName==""?v:resultName+","+v;
}
if(k==2&&boole){
resultInt[i] = v;
i++;
}
});
});
showTwokey = resultInt;
return resultName;
}
var showShopItem = function(){
// ID_container_shop
var categoriesArrKey = [];//第一个圆的name
var categoriesArrValue = [];//第一个圆的数值
var categoriesArrlenght = 0;
$.post("/statistics",{
type:2,
queryType:1
},function(data1){
$(data1.data).each(function(key,value){
$(value).each(function(k,v){
if(k==0) categoriesArrKey[key] = v;
if(k==2){
categoriesArrValue[key] = v;
categoriesArrlenght = categoriesArrlenght+v;
}
});
});
$.post("/statistics",{
type:2,
queryType:0
},function(data2){
showTwoArrData = data2.data;
var colors = Highcharts.getOptions().colors, categories = categoriesArrKey,data =[];
// console.log(categoriesArrKey);
for(var i =0;i<categoriesArrValue.length;i++){
// console.log( f_getTwoData(categoriesArrKey[i],categoriesArrValue[i]));
var tempStr = f_getTwoData(categoriesArrKey[i],categoriesArrValue[i]);
data[i]={
y:categoriesArrValue[i],
color: colors[i],
drilldown: {
name: categoriesArrKey[i],
categories:tempStr.split(",") ,
data:showTwokey,
color: colors[i]
}
};
}
var browserData = [],versionsData = [], i, j, dataLen = data.length, drillDataLen, brightness;
// return;
// Build the data arrays
for (i = 0; i < dataLen; i += 1) {
browserData.push({
name: categories[i],
y: data[i].y,
color: data[i].color
});
drillDataLen = data[i].drilldown.data.length;
for (j = 0; j < drillDataLen; j += 1) {
brightness = 0.2 - (j / drillDataLen) / 5;
versionsData.push({
name: data[i].drilldown.categories[j],
y: data[i].drilldown.data[j],
color: Highcharts.Color(data[i].color).brighten(brightness).get()
});
}
}
// Create the chart
$('#ID_container_shop').highcharts({
chart: {
type: 'pie'
},
title: {
text: '商品总体信息统计'
},
plotOptions: {
pie: {
shadow: false,
center: ['50%', '50%']
}
},
tooltip: {
valueSuffix: '%'
},
series: [{
name: '商品类',
data: browserData,
size: '60%',
dataLabels: {
formatter: function () {
return this.y > 5 ? this.point.name : null;
},
color: 'white',
distance: -30
}
}, {
name: '商品',
data: versionsData,
size: '80%',
innerSize: '60%',
dataLabels: {
formatter: function () {
// display only if larger than 1
return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null;
}
}
}]
});
$("#ID_container_shop text:last").hide();
});
});
}
/*
*
* @showType 0是每天 1是每月 2是每年
* @page 第几页
* */
var showOrderData = function(showType,page){
/*
* type 1安装用户 , 注册的用户 , 美容师注册 ,订单成单量 2商品统计 3用户区域 4性别 5肤质
* show_type 0 安装用户 1 注册的用户 2 美容师注册 3 订单成单量
* 按天统计
* */
var rows = 10;//日
$.post("/statistics",{
type:1,
show_type:3,
page:page,
rows:rows,
selectType:showType
},function(data1){//code 0
// console.log(data1);
if(data1&&data1.totalPage){
// showUserDataTotalPage = data1.totalPage;
// firstPage: true lastPage: true pageNumber: 1 pageSize: 20 totalPage: 1 totalRow: 2
for(var i=0;i<data1.totalPage;i++){
$("#ID_userPage_order").append("<option value="+(i+1)+">"+(i+1)+"</option>");
}
}
if(data1.list) {
var x,d1;
x= getXY(data1,showType).split(",");
d1 = Y;
var yAxis = [
{
name:"成单量",
data:d1
}
]
// console.log(yAxis);
$("#ID_container_order").html("");
chart("ID_container_order","总体成单量统计",x,"成单量",yAxis);
}
});
}
/*
* 更改数据
* */
$("#ID_userCount_order").change(function(){
showOrderData($(this).val(),1);
});
$("#ID_userPage_order").change(function(){
showOrderData($("#ID_userCount_order").val(),$("#ID_userPage_order").val());
});
/*
* 生成地图
* */
var mapId = 0;
var toMap = function(){
$("#ID_map").attr("src","/statistics/map");//地图加载
$.post("/statistics",{
type:3,
queryType:mapId
},function(GetData) {
// console.log(GetData);
var brandsData = [];
var brands = [];
var toName="",toValue="",brandsDataLenth=0;
if(GetData.data){
$(GetData.data).each(function(k,v){
$(v).each(function(key,value){
if(key==0) toName = toName==""?value:toName+","+value;
if(key==1){
toValue = toValue==""?value:toValue+","+value;
brandsDataLenth = brandsDataLenth+value;
}
});
});
}
var tempName = toName.split(",");
var tempValue = toValue.split(",");
for(var i=0;i<tempName.length;i++){
brandsData.push(
{
// drilldown: "Microsoft Internet Explorer "
// name: "Microsoft Internet Explorer "
// y: 53.61
name:tempName[i].replace("省","").replace("市",""),
drilldown:tempName[i].replace("省","").replace("市",""),
// y:parseFloat((parseInt(tempValue[i])/brandsDataLenth).toFixed(2))
y:parseInt(tempValue[i])
}
);
}
getBar(brandsData);
});
}
/*
* 生成 区域柱状图
* */
var getBar = function(brandsData){
$('#ID_area').highcharts({
chart: {
type: 'bar'
},
title: {
text: '区域统计'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
yAxis: {
title: {
text: ''
}
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: 占<b>{point.y:.2f}%</b> <br/>'
},
series: [{
name: '区域',
colorByPoint: true,
data: brandsData
}]
});
$("#ID_area text:last").hide();
}
/*
* 男女比例
* */
var showSex = function(){
$.post("/statistics",{
type:4
},function(GetData) {
// console.log(GetData.data[0]);
// 0女 1 男
var sexData = [];
var toName="",toValue="";
if(GetData.data){
$(GetData.data).each(function(k,v){
$(v).each(function(key,value){
// if(key==0) toName = toName==""?value:toName+","+value
if(key==1) toValue = toValue==""?value:toValue+","+value
});
});
}
// var tempName = toName.split(",");
var tempValue = toValue.split(",");
sexData.push(
['女', parseInt(tempValue[0])],
{
name: '男',
y: parseInt(tempValue[1]),
sliced: true,
selected: true
}
);
// console.log(sexData)
$('#ID_sex').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: '用户男女比例'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
}
}
},
series: [{
type: 'pie',
name: '占',
data:sexData
// data: [
// ['男', 45.0],
// {
// name: '女',
// y: 12.8,
// sliced: true,
// selected: true
// }
// ]
}]
});
$("#ID_sex text:last").hide();
});
}
/*
* 肤质
* */
var showFz = function(){
$.post("/statistics",{
type:5
},function(GetData) {
// console.log(GetData);
var sexData = [];
var toName = "", toValue = "";
if (GetData.data) {
$(GetData.data).each(function (k, v) {
$(v).each(function (key, value) {
if(key==0) toName = toName==""?value:toName+"|"+value
if (key == 1) toValue = toValue == "" ? value : toValue + "|" + value
});
});
}
var tempName = toName.split("|");
var tempValue = toValue.split("|");
for(var i=0;i<tempName.length;i++) {
if(i==0){
sexData.push(
{
name: tempName[0],
name2:subString(tempName[i],20,true),
y: parseInt(tempValue[0]),
sliced: true,
selected: true
}
);
}else{
sexData.push(
{
name: tempName[i],
name2:subString(tempName[i],20,true),
y: parseInt(tempValue[i])
}
);
}
}
// console.log(sexData)
$('#ID_showFz').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: '肤质统计'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name2}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
type: 'pie',
name: '占',
data: sexData
}]
});
$("#ID_showFz text:last").hide();
});
}
//数字或字母
var checknum = function (value) {
var Regx = /^[A-Za-z0-9]*$/;
if (Regx.test(value)) {
return true;
}
else {
return false;
}
}
//字段截取
var subString = function (str, len, hasDot) {
if(checknum(str)){
var newLength = 1;
var newStr = "";
var singleChar = "";
for (var i = 0; i < str.length; i++) {
singleChar = str.charAt(i).toString();
newLength++;
if (newLength > len) {
break;
}
newStr += singleChar;
}
if (hasDot && strLength > len) {
newStr += "...";
}
return newStr;
}
else{
var newLength = 0;
var newStr = "";
var chineseRegex = /[^\x00-\xff]/g;
var singleChar = "";
var strLength = str.replace(chineseRegex, "**").length;
for (var i = 0; i < strLength; i++) {
singleChar = str.charAt(i).toString();
if (singleChar.match(chineseRegex) != null) {
newLength += 2;
} else {
newLength++;
}
if (newLength > len) {
break;
}
newStr += singleChar;
}
if (hasDot && strLength > len) {
newStr += "...";
}
return newStr;
}
}
//alert(subString("js233333333333333",20,true)
</script>
</body>
</html>
chen_weiqiang 10年前 2楼
map.jsp
<%--
Created by IntelliJ IDEA.
User: cwq
Date: 2016/5/14
Time: 14:46
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body>
<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="/res/highcharts/cn-all-sar-taiwan.js"></script>
<div id="container_map" style="min-width:400px;height:400px"></div>
<script>
$(function () {
// Prepare demo data
$.post("/statistics",{
type:3,
queryType:window.parent.mapId
},function(GetData) {
// console.log(GetData);
var data = [];
var toName="",toValue="";
if(GetData.data){
$(GetData.data).each(function(k,v){
$(v).each(function(key,value){
if(key==0) toName = toName==""?value:toName+","+value
if(key==1) toValue = toValue==""?value:toValue+","+value
});
});
}
var tempName = toName.split(",");
var tempValue = toValue.split(",");
for(var i=0;i<tempName.length;i++){
data.push(
{
name:tempName[i].replace("省","").replace("市",""),
value:parseInt(tempValue[i])
}
);
}
// console.log(data);
// {
// name: "广东",
// value: 1
// }, {
// name: "北京",
// value: 1
// }
// ];
// Initiate the chart
$('#container_map').highcharts('Map', {
title: {
text: '区域人数分布'
},
// subtitle : {
// text : 'Source map: <a href="https://code.highcharts.com/mapdata/countries/cn/custom/cn-all-sar-taiwan.js">China with Hong Kong, Macau, and Taiwan</a>'
// },
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 0
},
series: [{
data: data,
mapData: Highcharts.maps,
joinBy: 'name',
name: '地区人数',
states: {
hover: {
color: '#BADA55'
}
},
dataLabels: {
enabled: true,
format: '{point.name}'
}
}]
});
$("#container_map text:last").hide();
});
});
</script>
</body>
</html>
cn-all-sar-taiwan.js
<script src="https://code.highcharts.com/mapdata/countries/cn/custom/cn-all-sar-taiwan.js"></script>cn-all-sar-taiwan.js
要编辑一下才可以用
chen_weiqiang 10年前 3楼
控制器的代码
package com.xwmr.controller.statistics;
import com.jcbase.controller.JCBaseController;
import com.jfinal.ext.route.ControllerBind;
import com.jfinal.plugin.activerecord.Page;
import com.xwmr.model.statistics.Statistics;
import com.xwmr.service.statistics.StatisticsService;
import java.util.HashMap;
import java.util.Map;
@ControllerBind(controllerKey="/statistics",viewPath="/WEB-INF/view/statistics")
public class StatisticsController extends JCBaseController {
public void index(){
String type = getPara("type");//控制器的数据取向
if(type!=null){
String sqlStr = "" ;
String show_type = getPara("show_type");//
if (type.equals("1")) {//每天安装用户 每天注册的用户 美容师注册 订单成单量
/*
* show_type 0 安装用户 1 注册的用户 2 美容师注册 3 订单成单量
* */
int page = getParaToInt("page");//
int rows = getParaToInt("rows");//
int selectType = getParaToInt("selectType");//0是每天 1 是月 2 是年
if(page==0) page = getPage();
if(rows==0) rows = getRows();
Map<String, String> conditions = new HashMap<String, String>();
if (show_type != null && show_type != "") {
conditions.put("type", show_type);
}
Page<Statistics> getPageInfo = StatisticsService.instance.getAllStatistics(page,rows, conditions,selectType);
renderJson(getPageInfo);
}
if(type.equals("2")) {//商品统计
int queryType = getParaToInt("queryType");// 0是全部商品 1是分类
if(queryType==0) {
sqlStr = "SELECT (SELECT name FROM classify WHERE id = c.parent_id ) as assortment ," +
"c.`name`,sum(oi.count) as sum from orders_item oi " +
"LEFT JOIN commodity cy on cy.id = oi.commodity_id " +
"LEFT JOIN classify c on cy.classify_id = c.id " +
"where oi.item_state>3 GROUP BY oi.commodity_id";
}else {
sqlStr = "SELECT t.assortment,t.name,sum(t.sum) as sum from " +
"(SELECT (SELECT name FROM classify WHERE id = c.parent_id ) as assortment ," +
" c.`name`,sum(oi.count) as sum from orders_item oi " +
" LEFT JOIN commodity cy on cy.id = oi.commodity_id " +
" LEFT JOIN classify c on cy.classify_id = c.id " +
" where oi.item_state>3 GROUP BY oi.commodity_id)t " +
" GROUP BY t.assortment";
}
}
if(type.equals("3")) {//用户区域
int queryType = getParaToInt("queryType");// 0是全部商品 1是美容师 2是用户
StringBuffer sqlExceptSelect = new StringBuffer();
sqlStr = "SELECT p.`name`,count(u.id) as count FROM `user` u " +
" LEFT JOIN province p on p.id = u.province_id " ;
sqlExceptSelect.append(" WHERE p.`name` is not NULL");
if(queryType==2)sqlExceptSelect.append(" AND u.is_visible != 3");
if(queryType==1)sqlExceptSelect.append(" AND u.is_visible = 3");
sqlExceptSelect.append(" GROUP BY p.`name`");
sqlStr = sqlStr + sqlExceptSelect.toString();
}
if(type.equals("4")) {//性别
sqlStr = "SELECT u.user_sex,count(u.id) as count FROM `user` u " +
"WHERE u.user_sex > -1 GROUP BY u.user_sex";
}
if(type.equals("5")) {//肤质
sqlStr = "SELECT replace(sr.result,'#',',') as name,count(sr.id)as count from scheme_result sr " +
"GROUP BY sr.result";
}
if(!sqlStr.equals("")) renderJson(StatisticsService.instance.Select(sqlStr));
}else {
render("statistics.jsp");
}
}
}
package com.xwmr.controller.statistics;
import com.jcbase.controller.JCBaseController;
import com.jfinal.ext.route.ControllerBind;
@ControllerBind(controllerKey="/statistics/map",viewPath="/WEB-INF/view/statistics")
public class MapController extends JCBaseController {
public void index(){
render("map.jsp");
}
}