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;
      }