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:600px; height: 500px;margin:20px auto"></div>
                                <div id="chartmain2" style="width:600px; height: 500px;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',
            formatter: '{b}<br/>项目数占比：{d}%'
        },
        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: ['30%', '50%'],
                avoidLabelOverlap: true,
                data: [],
                label: {
                    show: true,
                    position: 'inside',
                    color: 'black',
                    formatter: '{c}'
                },
                // 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',
            axisPointer: {
                type: 'shadow'
            }
        },
        color:[colors[0], colors[1]],
        xAxis: {
            type: 'category',
            name: '把握度',
            // triggerEvent: true,
            axisLabel: {
                interval:0
            },

            nameGap: 30,  // x轴name与横坐标轴线的间距
            // nameLocation: "middle", // x轴name处于x轴的什么位置
            offset: 0,
            data: []
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        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: [],
                label: {
                    show: true,
                    position: 'inside',
                    color: 'black'
                }
            },
            {
                type: 'bar',
                yAxisIndex: 1,
                data: [],
                label: {
                    show: true,
                    position: 'inside',
                    color: 'black',
                    formatter: '{c}%'
                }
            }
        ]
    };

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

    myChart2.on('click', function (param) {
        // for (const key in param) {
        //     console.log('key is ' + key + ', value is ' + param[key]);
        // }

        const certaintyStr = param.name.slice(0, 1);
        console.log("certaintyStr : " + certaintyStr);
        window.location.href = "${base}/space/list?certaintyStr=" + certaintyStr + "&certainty=0";
    });

</script>