fourcal/src/main/resources/templates/admin/monthly_settle_statistics.ftl

<#assign base=request.contextPath />
<#import "../common/defaultLayout.ftl" as defaultLayout>
<@defaultLayout.layout>
    <link rel="stylesheet" href="../assets/css/amazeui.switch.css"/>
    <div class="admin-content">
        <div class="admin-content-body">
            <div class="am-cf am-padding">
                <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">项目统计</strong> /
                    <small>项目汇总统计</small></div>
            </div>

            <div class="am-u-sm-10">
                <div class="am-form am-form-inline">
                    <div class="am-form-group am-form-icon">
                        <input type="text" id="time" name="time" autocomplete="off" readonly value="${time!}">
                    </div>
                </div>
            </div>
            <br/>
            <br/>

            <div class="am-u-sm-12 am-u-md-12" style="padding:0 1.6rem 1.6rem 1rem;margin:0;">
                <form class="am-form" id="listForm" action="#" method="POST">
                    <input type="hidden" id="keywords" name="keywords" value='${keywords!""}'/>
                    <div class="am-btn-toolbar" style="padding-left:.5rem;">
                        <div class="am-btn-group am-btn-group-xs">
                            <div class="am-btn-group am-btn-group-xs am-form-file">
                                <div id="chartmain" style="width:800px; height: 400px;margin:20px auto"></div>
                                <div id="chartmain2" style="width:800px; height: 400px;margin:20px auto"></div>
                                <div id="chartmain3" style="width:800px; height: 400px;margin:20px auto"></div>
                                <div id="chartmain4" style="width:800px; height: 400px;margin:20px auto"></div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</@defaultLayout.layout>
<script src="${base}/assets/js/echarts.min.js"></script>
<script src="${base}/layui/layui.js"></script>
<script type="text/javascript">
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        laydate.render({
            elem: '#time',
            type: 'month',
            btns: ['confirm'],
            trigger: 'click',
            ready: function(){
                console.log($(this.elem).val());
            },
            done: function() {
                var time = $(this.elem).val();
                console.log("time:" + time)
                setKeywords(time);
                $("#listForm").attr("action","${base}/monthlySettleStatistics/list");
                $("#listForm").submit();
            }
        });
    });

    function setKeywords(time) {
        var keywordsObj = {};
        keywordsObj.time = time;
        var keywords = "";
        if (!$.isEmptyObject(keywordsObj)) {
            keywords = JSON.stringify(keywordsObj);
        }
        console.log("keywords = " + keywords);

        $("#keywords").val(keywords);
    }

    $(function () {
        $("body").on('click', '.list-item', function () {
            $(".list-item").removeClass("tr-selected");
            $(this).addClass('tr-selected');
        });
    });

    const colors = ['#5470C6', '#91CC75', '#EE6666'];
    var option = {
        title: {
            text: '累计已收款'
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            axisLabel: {
                interval:0,
                rotate:40
            },
            data: []
        },
        yAxis: [
            {
                type: 'value',
                name: '万元',
                position: 'left',
                alignTicks: true,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: colors[0]
                    }
                },
                axisLabel: {
                    formatter: '{value}'
                },
                minInterval: 1,
                max: function(value) {
                    return value.max + 5;
                }
            }
        ],
        series: [
            {
                type: 'bar',
                yAxisIndex: 0,
                data: []
            }
        ]
    };

    var option2 = {
        title: {
            text: '已采购累计付款'
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            axisLabel: {
                interval:0,
                rotate:40
            },
            data: []
        },
        yAxis: [
            {
                type: 'value',
                name: '万元',
                position: 'left',
                alignTicks: true,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: colors[0]
                    }
                },
                axisLabel: {
                    formatter: '{value}'
                },
                minInterval: 1,
                max: function(value) {
                    return value.max + 5;
                }
            }
        ],
        series: [
            {
                type: 'bar',
                yAxisIndex: 0,
                data: []
            }
        ]
    };

    var option3 = {
        title: {
            text: '实际收款金额'
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            axisLabel: {
                interval:0,
                rotate:40
            },
            data: []
        },
        yAxis: [
            {
                type: 'value',
                name: '万元',
                position: 'left',
                alignTicks: true,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: colors[0]
                    }
                },
                axisLabel: {
                    formatter: '{value}'
                },
                minInterval: 1,
                max: function(value) {
                    return value.max + 5;
                }
            }
        ],
        series: [
            {
                type: 'bar',
                yAxisIndex: 0,
                data: []
            }
        ]
    };

    var option4 = {
        title: {
            text: '实际欠收金额'
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            axisLabel: {
                interval:0,
                rotate:40
            },
            data: []
        },
        yAxis: [
            {
                type: 'value',
                name: '万元',
                position: 'left',
                alignTicks: true,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: colors[0]
                    }
                },
                axisLabel: {
                    formatter: '{value}'
                },
                minInterval: 1,
                max: function(value) {
                    return value.max + 5;
                }
            }
        ],
        series: [
            {
                type: 'bar',
                yAxisIndex: 0,
                data: []
            }
        ]
    };

    window.onload = function(){
        loadDate(option, option2, option3, option4);
    };
    //初始化echarts实例
    var myChart = echarts.init(document.getElementById('chartmain'));
    var myChart2 = echarts.init(document.getElementById('chartmain2'));
    var myChart3 = echarts.init(document.getElementById('chartmain3'));
    var myChart4 = echarts.init(document.getElementById('chartmain4'));
    function loadDate(option){
        var time  = $("#time").val();
        var params = {
            time : time
        };
        $.ajax({
            url : "${base}/monthlySettleStatistics/listData",
            dataType : "json",
            type : "post",
            data : params,
            async:false,
            success : function(data){
                $.each(data, function (index, value) {
                    option.xAxis.data.push(value.manager);
                    option2.xAxis.data.push(value.manager);
                    option3.xAxis.data.push(value.manager);
                    option4.xAxis.data.push(value.manager);
                });

                $.each(data, function (index, value) {
                    option.series[0].data.push(value.totalCollect);
                });

                $.each(data, function (index, value) {
                    option2.series[0].data.push(value.totalPurchasedPaid);
                });

                $.each(data, function (index, value) {
                    option3.series[0].data.push(value.collectActualAmount);
                });

                $.each(data, function (index, value) {
                    option4.series[0].data.push(value.uncollectActualAmount);
                });

                myChart.setOption(option);
                myChart2.setOption(option2);
                myChart3.setOption(option3);
                myChart4.setOption(option4);
            },
            error : function(msg) { // 若Ajax处理失败后回调函数，msg是返回的错误信息
                console.log(msg);
            }
        });
    }

</script>