ECharts前后台交互获取数据

最新推荐文章于 2024-05-28 11:11:34 发布

Eddie-Wang

最新推荐文章于 2024-05-28 11:11:34 发布

阅读量5.2k

点赞数 1

分类专栏： javascript 文章标签： echarts前后台交互

本文链接：https://blog.csdn.net/wangchaox123/article/details/90486774

版权

javascript 专栏收录该内容

10 篇文章 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>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
                                    class="fa fa-refresh"></i>&nbsp;重置</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>>

Eddie-Wang

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
ECharts前后台交互获取数据

<!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/...
复制链接

扫一扫