controller代码
//展期数据分析
@RequestMapping("/overDueLoanNewAndOldCustomerAnalysis")
@ResponseBody
public String getOverDueLoanNewAndOldCustomerAnalysis(Model model, String beginDate, String endDate) {
if (StringUtils.isBlank(beginDate) || StringUtils.isBlank(endDate)) {
LocalDate date = LocalDate.now();
beginDate = date.plusDays(-29).toString();
endDate = date.toString();
}
String title = "展期数据分析";
String[] types = { "全部笔数", "待还款笔数", "已还款笔数","逾期笔数" };
Object[] dates = DateTimeUtil.getBetweenDate(beginDate, endDate).toArray();
if(dates.length==0) {
if((beginDate!=null && beginDate!="") && (endDate!=null && endDate!="")) {
Object[] obj = {beginDate};
dates=obj;
}
}
Option option = new GsonOption();
option.title().text(title).x("left");
option.legend().data(types).y("bottom");
option.tooltip().trigger(Trigger.axis);
CategoryAxis categoryAxis = new CategoryAxis();
categoryAxis.data(dates);
option.xAxis(categoryAxis);
option.yAxis(new ValueAxis());
Line line0 = new Line();
String type0 = types[0];
line0.name(type0);
Line line1 = new Line();
String type1 = types[1];
line1.name(type1);
Line line2 = new Line();
String type2 = types[2];
line2.name(type2);
Line line3 = new Line();
String type3 = types[3];
line3.name(type3);
for (int j = 0; j < dates.length; j++) {
String beginTime = dates[j] + Constant.beginTimeOfDay;
String endTime = dates[j] + Constant.endTimeOfDay;
int loan0 = orderLoanService.queryIsRollLoanByDate(beginTime, endTime);
line0.data(loan0);
int loan1 = orderLoanService.queryIsRollLoanByDateStatus1(beginTime, endTime);
line1.data(loan1);
int loan2 = orderLoanService.queryIsRollLoanByDateStatus5(beginTime, endTime);
line2.data(loan2);
int loan3 = orderLoanService.queryIsRollLoanByDateStatus3(beginTime, endTime);
line3.data(loan3);
}
option.series(line0.smooth(true)).color("#5374E9");
option.series(line1.smooth(true)).color("#37C2CF");
option.series(line2.smooth(true)).color("#FFA123");
option.series(line3.smooth(true)).color("#F97979");
return option.toString();
}
前端jsp代码
<div style="height:300px;border:1px solid #cccc;margin-top:20px;background-color: rgba(255, 255, 255, 1);padding:15px;position:relative;margin-botom:10px!important;">
<div id="echart4" style="height:300px;margin-top:0px;background-color: rgba(255, 255, 255, 1);padding:15px;position:absolute;top:0;left:0;right:0;bottom:0;"></div>
</div>
前端JS代码
初始化
var echarts4 = echarts.init(document.getElementById('echart4'));
function initEcharts4(){
var beginDate = $("#beginTime").val();
var endDate = $("#endTime").val();
var channelId = $("#channelId").val();
var device = $("#device").val();
echarts4.clear();
echarts4.showLoading({text: '正在努力的读取数据中...'});
$.ajax({
url:"/statistics/dataDailyReportStatistics/overDueLoanNewAndOldCustomerAnalysis",
type:"post",
data : {
beginDate : beginDate,
endDate : endDate,
channelId : channelId,
device : device,
},
success:function(data){
var data1max = eval("Math.max(" + data[1].toString() + ")");
var data2max = eval("Math.max(" + data[2].toString() + ")");
var data3max = eval("Math.max(" + data[3].toString() + ")");
var data4max = eval("Math.max(" + data[4].toString() + ")");
var data1min = eval("Math.min(" + data[1].toString() + ")");
var data2min = eval("Math.min(" + data[2].toString() + ")");
var data3min = eval("Math.min(" + data[3].toString() + ")");
var data4min = eval("Math.min(" + data[4].toString() + ")");
var arr234 = [data2max,data3max,data4max];
var max234 = max(arr234); // 最大
var min234 = min(arr234); // 最小
var option = {
title : {
text: '展期用户逾期表现',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
legend: {
data:['到期订单数','首逾率','三天逾期率','当前逾期率']
},
xAxis: [
{
type: 'category',
data: data[0],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: '逾期率',
min: min234,
max: max234, // 计算最大值
splitNumber: 4,
interval: (max234 - min234) / 4,
axisLabel: {
formatter: function (value, index) {
return value.toFixed(2)+' %';
}
}
},
{
type: 'value',
name: '到期订单数',
min: data1min,
max: data1max, // 计算最大值
splitNumber: 4,
interval: (data1max - data1min) / 4,
axisLabel: {
formatter: '{value}'
}
}
],
series: [
{
color:['#5374E9'],
name:'到期订单数',
type:'bar',
yAxisIndex: 1,
data:data[1]
},
{
/*设置线条颜色*/
color:['#FFA123'],
name:'首逾率',
type:'line',
/*设置线条形状*/
smooth: true,
data:newData(data[2])
},
{
color:['#37C2CF'],
name:'三天逾期率',
type:'line',
smooth: true,
data:newData(data[3])
},
{
color:['#F97979'],
name:'当前逾期率',
type:'line',
smooth: true,
data:newData(data[4])
}
]
};
echarts4.setOption(option);
echarts4.hideLoading();
}
})
}
函数
function max(arr){
var ret = arr[0]
for(var i = 0 ; i <arr.length;i++){
if(arr[i]>ret){
ret = arr[i]
}
}
var maxint = Math.ceil(ret / 9.5);//不让最高的值超过最上面的刻度
var maxval = maxint * 10;//让显示的刻度是整数
return maxval
}
function min(arr){
var ret = arr[0]
for(var i = 0 ; i <arr.length;i++){
if(arr[i]<ret){
ret = arr[i]
}
}
var minint = Math.floor(ret / 10);
var minval = minint * 10;//让显示的刻度是整数
return minval;
}
function newData(arr){
for (var i = 0; i < arr.length; i++) {
arr[i] = arr[i]/100;
arr[i] = arr[i].toFixed(2);
}
return arr;
}