ECharts前后台交互获取数据

绝地灬酷狼 2022-01-28 09:13 357阅读 0赞

<!DOCTYPE HTML>
    <html lang="zh" xmlns:th="http://www.thymeleaf.org">
    <meta charset="utf-8">
    <head th:include="include :: header"></head>
    <script th:src="@{/ajax/libs/echarts/echarts.js}"></script>
    <body class="gray-bg">
    <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="formId">
                    <div class="select-list">
                        <ul>
                            <li class="select-time">
                                <label>选择日期：</label>
                                <input type="text" class="time-input" id="dataTransferDate"
                                       name="date"/>
                            </li>
    
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm"
                                   onclick="buildData()"><i class="fa fa-search"></i> 搜索</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
                                        class="fa fa-refresh"></i> 重置</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>
    
            <div class="col-sm-12 search-collapse">
                <div id="airportDataPerDay4System" style="width: 100%; height: 500px;"
                     align="center"></div>
            </div>
        </div>
    </div>
    <div th:include="include :: footer"></div>
    <script th:inline="javascript">
        var prefix = ctx + "sjzxmonitor/datastatisticalanalysis";
        var echart;
    
        $(function () {
            buildData();
        });
    
        //生成数据
        function buildData() {
            var data = $("#dataTransferDate").serialize();
            $.ajax({
                async: false,
                url: prefix + "/querydataperday4system",
                type: 'post',
                dataType: 'json',
                data: data,
                success: function (echartDatas) {
                    if (isNotEmpty(echartDatas)) {
                        var columLabel = new Array();
                        var columName = new Array();
                        var columnValue = new Array();
                        var arrData;
                        var i = 0;
                        for (var echartData in echartDatas) {
                            columLabel.push(echartData);
                            if (i == 0) {
                                for (var dataCount in echartDatas[echartData]) {
                                    columName.push(dataCount);
                                }
                            }
                            arrData = new Array();
                            for (var dataCount in echartDatas[echartData]) {
                                arrData.push(echartDatas[echartData][dataCount]);
                            }
                            columnValue.push(eval('(' + ("{'name':'" + echartData + "','type':'bar','data':[" + arrData + "]}") + ')'));
                            i = i + 1;
                        }
    
                        buildChart(columLabel, columName, columnValue);
                    } else {
                        $("#airportDataPerDay4System").html("暂无数据");
                    }
                },
                error: function (errorMsg) {
                    alert("加载数据失败");
                }
            });
    
            // var columLabel = ['咸阳机场', '银川机场', '西宁机场'];
            // var columName = ['ACDM', '地调', '安检', '航班'];
            // var columnValue = new Array();
            // var arrData;
            //
            // for (var i = 0; i < columLabel.length; i++) {
            //     arrData = new Array();
            //     for (var j = 0; j < columName.length; j++) {
            //         arrData.push(Math.floor(Math.random() * 1000 + 1000 * j - 1000 * i));
            //     }
            //     columnValue.push(eval('(' + ("{'name':'" + columLabel[i] + "','type':'bar','data':[" + arrData + "]}") + ')'));
            // }
    
            // buildChart(columLabel, columName, columnValue);
        }
    
        //生成图形
        function buildChart(columLabel, columName, columnValue) {
            if (null != echart && "" != echart && undefined != echart) {
                echart.dispose();
            }
            echart = echarts.init(document.getElementById('airportDataPerDay4System'));
            var option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                toolbox: {
                    show: true,
                    right: '1%',
                    feature: {
                        dataView: {show: true, readOnly: true},
                        saveAsImage: {show: true}
                    }
                },
                legend: {
                    data: columLabel
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        min: 0,
                        type: 'category',
                        data: columName
                    }
                ],
                yAxis: [
                    {
                        min: 0,
                        type: 'value'
                    }
                ],
                series: columnValue
            };
    
            echart.setOption(option);
    
        }
    
        function isNotEmpty(obj) {
            for (var i in obj) { // 如果不为空，则会执行到这一步，返回true
                return true
            }
            return false // 如果为空,返回false
        }
    </script>
    </body>
    </html>

这边后台返回的数据为map，Map<String,Map<String,Integer>>