Springboot使用LayUI将Ajax发送请求获取的返回数据用ECharts图表显示

后端使用Springboot，前端框架使用LayUI，前端页面一个日期控件，一个下拉框控件，实现选择日期，以及选择下拉框，点击提交，layui发送ajax请求到后端，请求数据返回后，在控件下方用echarts图表显示出来。

HTML代码：

<form class="layui-form" action="/">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">选择日期</label>
            <div class="layui-input-inline">
                <input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input date_selected">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">选择企业</label>
            <div class="layui-input-inline">
                <select name="company_name" lay-filter="company_name" class="com_selected">
                    <option value=""></option>
                    <option value="0">选项一</option>
                    <option value="1">选项二</option>
                    <option value="2">选项三</option>
                    <option value="3">选项四</option>
                </select>
            </div>
        </div>
        <div class="layui-inline view_history" style="margin-left: 70px;">
            <div class="layui-input-inline">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即查看</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </div>
</form>

Javascript代码：

<script>
    layui.use(['form', 'layedit', 'laydate', 'element', 'echarts', 'jquery'], function () {
        var form = layui.form
            , $ = layui.jquery
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate
            , element = layui.element
            , echarts = layui.echarts;
        //日期
        laydate.render({
            elem: '#date'
        });
        
        //监听提交
        var ndData = null;
        
        form.on('submit(demo1)', function (data) {
            var date_user = $(".date_selected").val();
            var name_user = $(".com_selected").find("option:selected").text();
            $.ajax({
                url: "/history/getlist",
                type: "GET",
                data: {
                    date: date_user,
                    name: name_user
                },
                dataType: "JSON",
                async: false,
                success: function (res) {
                    /**
                     * Echarts显示
                     */
                    var echartsRecords = echarts.init(document.getElementById('EchartZhu'), 'walden');
                    var optionRecords = {
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['油烟浓度', '颗粒物', '非甲烷总烃']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: ['周一'，'周二','周三','周四','周五','周六','周日']
                        },
                        yAxis: {
                            type: 'value',
                        },
                        dataZoom: [
                            {
                                type: 'inside',
                                show: true,
                                top: '90%',
                                realtime: true,
                                start: 85,
                                end: 100
                            }
                        ],
                        series: [{
                            name: '油烟浓度',
                            type: 'line',
                            data: res
                        }
                        ]
                    };
                    echartsRecords.setOption(optionRecords);
                    // echarts 窗口缩放自适应
                    window.onresize = function () {
                        echartsRecords.resize();
                    }
                }
            });
            return false;
        });
    });
</script>

这里有一个要注意的地方就是form.on监听提交的方法里面一定要有 return false来禁用表单跳转，不然的话，点击提交以后，iframe就会跳转，我这里是变成了首页，也就是iframe里面变成了另一个刚打开的系统首页

对于Echarts的引入，个人不建议使用LayUI集成的，因为我用了集成的ECharts总有各种小毛病出现，什么 EchartsTheme.js找不到等等，我当时已经将EchartsTheme.js复制到每一个可能的文件夹下都还是这样抱错。最后我是直接在要显示ECharts的页面引入，而不是在一开始的整个LayUI框架首页引入。

请求API返回的是登录页
刚开始，我写好接口以后，尝试着自己创造链接，没有从前端页面获取用户选择的情况下测试下接口行不行。我发现浏览器上登录系统后，再从输入链接的话是能够返回数据的。但是，我要是清楚数据，或者说没有登录的情况下去访问，系统回跳转到登录页（PS：用Postman测试的时候也是返回的登录页的HTML代码）。

在我这里是因为，在Security的配置中设置了除了登录页以及静态资源外都要登录后访问，于是我修改了security的配置文件，加了一行代码 web.ignoring().mvcMatchers("/history/**");

@Override
    public void configure(WebSecurity web) throws Exception {
        web.ignoring().mvcMatchers("/lib/**", "/css/**", "/js/**");
        web.ignoring().mvcMatchers("/history/**");
    }

放行该API路径后，使用postman已经layui中用ajax发送http请求都可以获取数据，而不用先登录。（可能不安全，大家看着办）