导航：

pre：  9.归还图书

next：11.检索图书

只挑重点的讲，具体的请看项目源码。

1.项目源码

需要源码的朋友，请捐赠任意金额后留下邮箱发送：）

2.页面设计

2.1 bookStat.html

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <title>借还统计</title>

    <link rel="stylesheet" href="/static/layui/css/layui.css" th:href="@{/static/layui/css/layui.css}">

    <script src="/static/js/jquery-1.11.3.min.js" th:src="@{/static/js/jquery-1.11.3.min.js}"></script>

    <script src="/static/layui/layui.all.js" th:src="@{/static/layui/layui.all.js}"></script>

    <script src="/static/js/util.js" th:src="@{/static/js/util.js}"></script>

    <!-- 引入 echarts.js -->

    <script src="/static/js/echarts.min.js" th:src="@{/static/js/echarts.min.js}"></script>

</head>

<body>

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->

<div id="main" style="width: 800px;height:400px;">

</div>

<!--ctx-->

<script th:replace="~{fragment::ctx}"/>

<script type="text/javascript">

    // 基于准备好的dom，初始化echarts实例

    var chart = document.getElementById('main');

    var echart = echarts.init(chart);

    $(function(){

        buildData();

    });

    //生成数据

    function buildData()

    {

        var columnLabel = ['借','还'];

        var columnName = [];

        var columnValue = [];

        echart.showLoading();

        // 请求

        $.ajax({

            url: ctx+'api/bookBorrow/getBorrowStat',

            type: 'GET',

            contentType: "application/json",

            dataType: "json",

            data: "",

            success: function (result) {

                if (result.code == 200) {

                    console.log(JSON.stringify(result.data.columnName));

                    columnName = result.data.columnName;

                    columnValue =  result.data.columnValue;

                    console.log(JSON.stringify(columnValue));

                    echart.hideLoading();

                    buildChart(columnLabel,columnName,columnValue);

                } else {

                    layer.alert(result.message);

                }

            }

        });

        /*for(var i=0;i<columLabel.length;i++)

        {

            for(var j=0;j<columName.length;j++)

            {

                arrData.push(Math.floor(Math.random()*1000+1000*j-1000*i));

            }

            console.info(arrData);

            columnValue.push(eval('(' + ("{'name':'"+columLabel[i]+"','type':'bar','data':["+arrData+"]}") + ')'));

        }*/

    }

    //生成图形

    function buildChart(columnLabel,columnName,columnValue)

    {

        var option = {

            title: {

                text: '一周借还统计'

            },

            tooltip : {

                trigger: 'axis',

                axisPointer : {

                    type : 'shadow'

                }

            },

            toolbox: {

                show : true,

                feature : {

                    saveAsImage : {show: true}

                }

            },

            legend: {

                data:columnLabel

            },

            grid: {

                left: '3%',

                right: '4%',

                bottom: '3%',

                containLabel: true

            },

            xAxis : [

                {

                    min:0,

                    type : 'category',

                    data : columnName

                }

            ],

            yAxis : [

                {

                    min:0,

                    type : 'value'

                }

            ],

            series : columnValue

        };

        echart.setOption(option);

    }

</script>

</body>

</html>

3.后台接口

@GetMapping("/getBorrowStat")

    public Result<Map<String,Object>> getBorrowStat(){

        Map<String,Object> map = new HashMap<>();

        List<String> days = DateUtil.getDaysBetwwen(6);

        map.put("columnName",days);

        BorrowStatVO borrowVO = new BorrowStatVO();

        BorrowStatVO returnVO = new BorrowStatVO();

        borrowVO.setName("借");

        returnVO.setName("还");

        borrowVO.setType("bar");

        returnVO.setType("bar");

        List<Integer> borrowData = new ArrayList<>();

        List<Integer> returnData = new ArrayList<>();

        for (String day:days) {

            borrowData.add(bookBorrowService.getBorrowCount(day));

            returnData.add(bookBorrowService.getReturnCount(day));

        }

        borrowVO.setData(borrowData);

        returnVO.setData(returnData);

        List<BorrowStatVO> list = new ArrayList<>();

        list.add(borrowVO);

        list.add(returnVO);

        map.put("columnValue",list);

        return ResultUtil.ok(map);

    }

Spring Boot图书管理系统项目实战-10.借还统计的更多相关文章

  1. Spring Boot → 11：项目实战-账单管理系统完整版

    Spring Boot → 11:项目实战-账单管理系统完整版

  2. Spring Boot → 06：项目实战-账单管理系统

    Spring Boot → 06:项目实战-账单管理系统

  3. Java 架构师+高并发+性能优化+Spring boot大型分布式项目实战

    视频课程内容包含: 高级 Java 架构师包含:Spring boot.Spring cloud.Dubbo.Redis.ActiveMQ.Nginx.Mycat.Spring.MongoDB.Zer ...

  4. 新书上线：《Spring Boot+Spring Cloud+Vue+Element项目实战：手把手教你开发权限管理系统》，欢迎大家买回去垫椅子垫桌脚

    新书上线 大家好,笔者的新书<Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统>已上线,此书内容充实.材质优良,乃家中必备垫桌脚 ...

  5. 图书-技术-SpringBoot：《Spring Boot 企业级应用开发实战》

    ylbtech-图书-技术-SpringBoot:<Spring Boot 企业级应用开发实战> Spring Boot 企业级应用开发实战,全书围绕如何整合以 Spring Boot 为 ...

  6. 从零一起学Spring Boot之LayIM项目长成记（二） LayIM初体验

    前言 接上篇,已经完成了一个SpringBoot项目的基本搭建.那么现在就要考虑要做什么,怎么做的问题.所以本篇内容不多,带大家一起来简单了解一下要做的东西,之前有很多人不知道从哪里下手,那么今天我带 ...

  7. 从零一起学Spring Boot之LayIM项目长成记（五）websocket

    前言 距离上一篇已经比较久的时间了,项目也是开了个头.并且,由于网上的关于Spring Boot的websocket讲解也比较多.于是我采用了另外的一个通讯框架 t-io 来实现LayIM中的通讯功能 ...

  8. Spring Boot会员管理系统——处理文件上传

    温馨提示 Spring Boot会员管理系统的中,需要涉及到Spring框架,SpringMVC框架,Hibernate框架,thymeleaf模板引擎.所以,可以学习下这些知识.当然,直接入门的话使 ...

  9. 使用Spring Boot开发Web项目(二)之添加HTTPS支持

    上篇博客使用Spring Boot开发Web项目我们简单介绍了使用如何使用Spring Boot创建一个使用了Thymeleaf模板引擎的Web项目,当然这还远远不够.今天我们再来看看如何给我们的We ...

  10. Spring Boot 多模块项目创建与配置 (一) （转）

    Spring Boot 多模块项目创建与配置 (一) 最近在负责的是一个比较复杂项目,模块很多,代码中的二级模块就有9个,部分二级模块下面还分了多个模块.代码中的多模块是用maven管理的,每个模块都 ...

随机推荐

  1. Grafana监控Oracle数据库的表大小等信息

    Grafana监控Oracle数据库的表大小等信息 方案 oracledb_exporter 以及 prometheus grafana 使用的SQL以及配置文件 [[metric]] context ...

  2. 【转帖】dl.google.com的国内镜像源

    dl.google.com不能访问 1.通过https://ping.chinaz.com/解析出dl.google.com的国内代理 2.C:\Windows\System32\drivers\et ...

  3. [转帖]基本系统调用性能lmbench测试方法和下载

    简介 Lmbench是一套简易,可移植的,符合ANSI/C标准为UNIX/POSIX而制定的微型测评工具.一般来说,它衡量两个关键特征:反应时间和带宽. Lmbench旨在使系统开发者深入了解关键操作 ...

  4. [转帖]overcommit_memory、overcommit_ratio、CommitLimit、Committed_AS概念

    overcommit_memory.overcommit_ratio.CommitLimit.Committed_AS概念 overcommit_memory是一个内核对内存分配的一种策略. over ...

  5. Linux的free命令与OOM的简单总结

    简介 查看操作系统配置最关键的几个命令是 lscpu 查看CPU信息 以及free 查看内存信息. 不过free信息有一个疑惑点 他的 free的值可能很小. 会让搭建产生误解. 这里简单说明一下. ...

  6. error: Your local changes to the following files would be overwritten by merge

    拉取代码出现 error: Your local changes to the following files would be overwritten by merge 解决方案 你团队其他成员修改 ...

  7. vue同步组件和异步组件的区别

    异步组件 异步组件:只在组件需要渲染(组件第一次显示)的时候进行加载渲染并缓存,缓存是以备下次访问. Vue实现按需加载 在打包的时候,会打包成单独的js文件存储在static/js文件夹里面** 在 ...

  8. Fabric升级示例

    Fabric v1.4.x升级至v2.2.0 本文首发于这里,转载请注明出处. 以fabric-samples v1.4.8为例,将v1.4.8升级至v2.2.0.注意,所有节点以滚动的方式进行升级, ...

  9. C语言输出键盘

    使用printf()函数输出样式 #include <stdio.h> int main() { printf("┌───┬───┬───┬───┬───┬───┬───┬─── ...

  10. .NET MAUI 简介

    欢迎使用.NET 多平台应用程序 UI.此版本标志着我们在统一 .NET 平台的多年旅程中的新里程碑.现在,您和超过 500 万其他 .NET 开发人员拥有面向 Android.iOS.macOS 和 ...