fourcal/src/main/resources/templates/admin/space_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-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:1000px; height: 600px;margin:20px auto"></div>
                                <div id="chartmain2" style="width:1000px; height: 600px;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">

    const colors = ['#5470C6', '#91CC75', '#EE6666'];
    var domOption = {
        title: {
            text: '项目数量',
            subtext: '',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        color:[colors[0], colors[1], colors[2]],
        sum: 0,
        graphic: {
            type: 'text',
            left: 'center',
            //left: '37%',
            top: 'center',
            style: {
                text:
                    '项目总数' +
                    '\n\n' +
                    String(this.sum).replace(/(\d)(?=(?:\d{6})+$)/g, '$1.'),
                textAlign: 'center',
                fill: '#333',
                width: 30,
                height: 30,
                fontSize: 14
            }
        },
        series: [
            {
                name: '把握度',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: true,
                data: [],
                label: {
                    normal: {
                        formatter: '{b}:{d}%'
                    }
                },
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    var option = {
        title: {
            text: '项目金额及平均毛利率情况'
        },
        tooltip: {
            trigger: 'axis'
        },
        color:[colors[0], colors[1]],
        xAxis: {
            type: 'category',
            name: '项目把握度',
            axisLabel: {
                interval:0
            },
            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;
                }
            },
            {
                type: 'value',
                name: '%',
                position: 'right',
                alignTicks: true,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: colors[1]
                    }
                },
                axisLabel: {
                    formatter: '{value}'
                },
                minInterval: 1,
                max: function(value) {
                    return value.max + 5;
                }
            }
        ],
        series: [
            {
                type: 'bar',
                yAxisIndex: 0,
                data: []
            },
            {
                type: 'bar',
                yAxisIndex: 1,
                data: []
            }
        ]
    };

    window.onload = function(){
        loadDate(domOption, option);
    };
    //初始化echarts实例
    var myChart = echarts.init(document.getElementById('chartmain'));
    var myChart2 = echarts.init(document.getElementById('chartmain2'));
    function loadDate(domOption, option){
        $.ajax({
            url : "${base}/space/listData",
            dataType : "json",
            type : "post",
            async:false,
            success : function(data){
                var list = data.list;
                $.each(list, function (index, value) {
                    option.xAxis.data.push(value.columns.name);
                });

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

                $.each(list, function (index, value) {
                    option.series[1].data.push(value.columns.average);
                });

                var map = data.map;
                $.each(map, function (index, value) {
                    domOption.series[0].data.push({"value":value.columns.sum,"name":value.columns.name,"id":value.columns.certainty});
                    domOption.sum += value.columns.sum;
                });

                domOption.graphic.style.text = '项目总数\n\n' + String(domOption.sum).replace(/(\d)(?=(?:\d{6})+$)/g, '$1.');
                myChart.setOption(domOption);
                myChart2.setOption(option);
            },
            error : function(msg) { // 若Ajax处理失败后回调函数，msg是返回的错误信息
                console.log(msg);
            }
        });
    }

    myChart.on('click', function (param) {
        var certainty = param.data.id;
        window.location.href = "${base}/space/list?certainty=" + certainty;
    });

</script>