layui（echarts实现）

表格 echarts图同时刷新，提交的时候刷新表格，ajax获取echarts图所需的json（两个方法），前端获取的json重新处理传入echarts

 

 

复制代码
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="../head.jsp" %>
<html>
<head>
    <meta charset="utf-8">
    <title>实验室成员统计</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">


</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>实验室成员</legend>
</fieldset>
<div class="layuimini-container">
    <div class="layuimini-main">
        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <form class="layui-form layui-form-pane" action="">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">院系</label>
                        <div class="layui-input-inline">
                            <select name="college" id="college" lay-filter="college">
                                <option value="">请选择</option>
                                <c:forEach items="${collegeList}" var="college">
                                    <option value="${college.collegeId}">${college.collegeName} </option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">专业</label>
                        <div class="layui-input-inline">
                            <select name="major" id="major">
                                <option value="">-请选择-</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">年级</label>
                        <div class="layui-input-inline">
                            <input type="text" id="grade" name="grade" class="layui-input" readonly>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">状态</label>
                        <div class="layui-input-inline">
                            <select id="status" name="status" lay-filter="major">
                                <option value=""></option>
                                <option value="1">正常</option>
                                <option value="2">毕业</option>
                                <option value="3">退出</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button type="submit" class="layui-btn layui-btn-primary" lay-submit=""
                                lay-filter="queryBtn">
                            <i class="layui-icon"></i>查询
                        </button>
                    </div>
                    <div class="layui-inline">
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </fieldset>
        <table class="layui-hide" id="myTable" lay-filter="myTable"></table>
        <div style="width:90%;margin:0rem auto 0.7rem auto;font-size:0.28rem">
            <div id="container" style=" height:500px;"></div>
        </div>
    </div>
</div>


<script>
    layui.use(['form', 'table', 'flow', 'laydate'], function () {
        var form = layui.form;
        var table = layui.table;
        let laydate = layui.laydate;
        var flow = layui.flow;
        $ = layui.$;
        // 渲染年级日期控件
        laydate.render({
            elem: '#grade',
            trigger: 'click',
            type: 'year',
        })
        // 表格的渲染searchList
        table.render({
            elem: '#myTable'
            , url: 'BaseServlet.do?servlet=MemberServlet&method=searchList'
            , where: {college: 'null'}
            , text: {none: '请搜索数据'}
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , cols: [[
                {field: 'college', title: '院系', templet: college}
                , {field: 'major', title: '专业', templet: major}
                , {field: 'memberId', title: '人数'}
            ]]
            , page: true
            , toolbar: '#headToolbar'

        });
        form.on('select(college)', function (data) {
            var college = $("select[name='college']").val();
            var url = "BaseServlet.do?servlet=MajorServlet&method=searchListAll&college=" + college;
            $.get(url, function (resp) {
                var arr = resp.split(",");
                $("select[name='major']").empty();
                $("select[name='major']").append("<option value=''>-请选择-</option>")
                for (let i = 0; i < arr.length; i++) {
                    let major = arr[i];
                    let arr2 = major.split("-");
                    $("select[name='major']").append("<option value='" + arr2[0] + "'>" + arr2[1] + "</option>")
                }
                form.render("select");
            })
        });
        // 监听搜索操作
        form.on('submit(queryBtn)', function (data) {
            var form_result = JSON.stringify(data.field);
            var resdata;
            var grade = $('#grade').val()
            var college = $('#college').val()
            var major = $('#major').val()
            var status = $('#status').val()
            // if (college == '' && major == '' && grade == '' && status == '') {
            //     layer.msg("搜索信息不能有空")
            // } else {
            // 执行搜索重载
            table.reload('myTable', {
                    url: 'BaseServlet.do?servlet=MemberServlet&method=selectCount',
                    where: {
                        college: college,
                        major: major,
                        grade: grade,
                        status: status
                    },
                    limits: [1, 10, 15, 30, 50, 100]
                    , limit: 10
                    , page: true
                    , done: function (res, curr, count) {
                        //如果是异步请求数据方式，res即为你接口返回的信息。
                        //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                        console.log(res);
                        //得到当前页码
                        console.log(curr);
                        //得到数据总量
                        console.log(count);



                    }
                    , data: resdata
                    , text: {
                        none: '暂无相关数据'                   //默认：无数据。
                    }

                },
                'data'
            );
            var dom = document.getElementById("container");
            var myChart = echarts.init(dom);
            var app = {};
            option = null;
            option = {
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '人数',
                        type: 'bar',
                        barWidth: '60%',
                        data: [10, 52, 200, 334, 390, 330, 220]
                    }
                ]
            };
            var majors = [];
            var people = [];
            $.ajax({
                type: "post",
                async: true,
                url: "BaseServlet.do?servlet=MemberServlet&method=echars",  //重点说明！！这个url是后续servlet的映射地址，请相对应。
                data: {
                    college: college,
                    major: major,
                    grade: grade,
                    status: status
                },
                dataType : "json",
                success: function (data) {
                    // var newData = JSON.stringify(data);
                    // alert(newData)
                    for(var i=0;i<data.length;i++){
                        people.push(data[i].memberId);
                    }
                    for(var i=0;i<data.length;i++){
                        majors.push(data[i].major.majorName);
                    }
                    myChart.hideLoading();
                    myChart.setOption({
                        xAxis:{data:majors},
                        series:[{
                            name:'人数',
                            data: people
                        }]
                    })
                },
                error: function (errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                    myChart.hideLoading();
                }

            });
            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
            // }
            return false;
        });
    });


    //院系的解析
    function college(row) {
        if (row.college != null) {
            return row.college.collegeName;
        }
    }

    //专业的解析
    function major(row) {
        if (row.major != null) {
            return row.major.majorName;
        }
    }


    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
        color: ['#3398DB'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: [],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '人数',
                type: 'bar',
                barWidth: '60%',
                data: []
            }
        ]
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
</body>
</html>
复制代码

 

posted @   想学前端的小李  阅读(1600)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· .NET10 - 预览版1新功能体验（一）
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛