layui+echarts代码示例
效果图
HTML代码
系统报表
时间
启动次数
启动次数占比
JS代码
/**
* 统计报表相关的js
*/
var startDateVal;
var endDateVal;
var timeUnitVal;
layui.config({//配置并导入excel插件
base: '../common/layui_exts/'
}).use(['excel', 'layer'], function () {
var $ = layui.$;
var layer = layui.layer;
var excel = layui.excel;
$('#exportExcel').on('click', function () {
// 模拟从后端接口读取需要导出的数据
$.ajax({
url: '/console/statistics/openAppCount'
, data: {
startDate: startDateVal, //搜索的关键字
endDate: endDateVal,
timeUnit: timeUnitVal
}
, dataType: 'json'
, success(res) {
var data = res.data.data2;
console.log(res);
// 重点！！！如果后端给的数据顺序和映射关系不对，请执行梳理函数后导出
data = excel.filterExportData(data, [
'timeStr'
, 'count'
, 'countRate'
]);
// 重点2！！！一般都需要加一个表头，表头的键名顺序需要与最终导出的数据一致
data.unshift({
timeStr: "时间",
count: "启动次数",
countRate: '启动次数占比',
});
excel.exportExcel(data, '启动次数数据统计.xlsx', 'xlsx');
}
, error() {
layer.alert('获取数据失败，请检查是否部署在本地服务器环境下');
}
});
});
});
$(function(){
layui.use('laydate', function(){
var laydate = layui.laydate,
form = layui.form;
//日期范围
var time = laydate.render({
elem: '#globalDate'
,range: "~"
,done: function(value, date, endDate){ // choose end
//console.log("date callBack====>>>"+value); //得到日期生成的值，如：2017-08-18
var startDate = value.split("~")[0];
var endDate = value.split("~")[1];
var timeUnit = $(".global-time-unit").val()
Count.loadUserRegisterCount(startDate,endDate,timeUnit);
}
,max: 0
});
Count.loadUserRegisterCount();
layui.form.on('select(global-time-unit)', function(data){
var dateRange = $("#globalDate").val();
// if(data.value==3){//时间单位切换到小时
//}else
if(data.value==4){ //时间单位切换到分钟
$("#globalDate").val();
$("#globalDate").attr("disabled","");
$(".prompt_info").text("注：时间单位若为分钟，不能选择时间范围,只会显示当前这一天的数据");
dateRange = "";
}else{
$("#globalDate").removeAttr("disabled");
$(".prompt_info").text("");
}
Count.loadUserRegisterCount(dateRange.split("~")[0],dateRange.split("~")[1],data.value);
});
});
});
var Count = {
//加载用户注册数据
loadUserRegisterCount : function (startDate,endDate,timeUnit){
startDateVal = startDate;
endDateVal = endDate;
timeUnitVal = timeUnit;
Common.invoke({
path : request('/console/statistics/openAppCount'),
data : {
startDate:startDate,
endDate:endDate,
timeUnit:timeUnit
},
successMsg : false,
errorMsg : "加载数据失败，请稍后重试",
successCb : function(result) {
var data1 = result.data.data1;
var data2 = result.data.data2;
$('table tbody').html('');
for (var i=0;iJAVA代码
Controller
/**
* 数据统计：启动次数
*/
@RequestMapping(value = "/openAppCount")
@ApiOperation(value = "数据统计：启动次数", notes = "数据统计：启动次数")
@ApiImplicitParams({
@ApiImplicitParam(name = "timeUnit", value = "统计类型,1: 每个月的数据,2:每天的数据,3.每小时数据,4.每分钟的数据 (小时)", dataType = "short"),
@ApiImplicitParam(name = "clientType", value = "android/iOS", dataType = "String"),
@ApiImplicitParam(name = "startDate", value = "开始", dataType = "String"),
@ApiImplicitParam(name = "endDate", value = "结束", dataType = "String")
})
@ApiResponse(code = KConstants.ResultCode.Success, message = "成功", response = Object.class)
public JSONMessage openAppCount(@RequestParam(defaultValue = "2") short timeUnit,
@RequestParam(required = false) String clientType, @RequestParam(defaultValue = "") String startDate, @RequestParam(defaultValue = "") String endDate) {
JSONObject jsonObject = new JSONObject();
Object data1 = getStatisticsServiceImpl().openAppCount(startDate.trim(), endDate.trim(), timeUnit, clientType);
jsonObject.put("data1", data1);
List> data2 = (List>) getStatisticsServiceImpl().openAppCount(startDate.trim(), endDate.trim(), (short) 2, clientType);
//时间段内总的启动总次数
Double openTotal = 0.0;
for (Map stringDoubleMap : data2) {
for (String key:stringDoubleMap.keySet()
) {
Double aDouble = stringDoubleMap.get(key);
openTotal += aDouble;
}
}
List statisticsOpenAppCountVOS = new ArrayList<>();
NumberFormat nf = NumberFormat.getPercentInstance();
nf.setMinimumFractionDigits(2);
for (Map stringDoubleMap : data2) {
for (String key:stringDoubleMap.keySet()
) {
StatisticsOpenAppCountVO statisticsOpenAppCountVO = new StatisticsOpenAppCountVO();
//时间
statisticsOpenAppCountVO.setTimeStr(key);
Double count = stringDoubleMap.get(key);
//启动次数
statisticsOpenAppCountVO.setCount(count);
//启动次数占比
double k1 = count/ openTotal;
double countRate = new BigDecimal(k1).setScale(3, BigDecimal.ROUND_HALF_UP).doubleValue();
statisticsOpenAppCountVO.setCountRate(nf.format(countRate));
statisticsOpenAppCountVOS.add(statisticsOpenAppCountVO);
}
}
jsonObject.put("data2", statisticsOpenAppCountVOS);
return JSONMessage.success(null, jsonObject);
}
service
@Override
public Object openAppCount(String startDate, String endDate, short timeUnit, String clientType) {
List