导航：

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. SpringMVC04——数据处理及跳转

    结果跳转 1.ModelAndView 设置ModelAndView对象,根据view的名称,和试图解析器跳到指定的页面. 页面:{视图解析器前缀} + viewName + {视图解析器后缀} &l ...

  2. 【转帖】BGP:全穿透，半穿透，静态代播有什么区别

    一. 什么是BGP二. 具体实现方案2.1BGP的优点2.2 真伪BGP在使用效果上有什么差异​​​​​​​​​​​​​​2.2.1 真BGP实现了用户最佳路径的自动选择​​​​​​​​​​​​​​​ ...

  3. [转帖]Chrome 109发布，最后一个支持Windows 7/8的版本

    https://www.163.com/dy/article/HQR3QQFD0511CUMI.html 出品 | OSC开源社区(ID:oschina2013) Google 在去年 12 月 1 ...

  4. 【转帖】sqlserver 在高并发的select,update,insert的时候出现死锁的解决办法

    最近在使用过程中使用SqlServer的时候发现在高并发情况下,频繁更新和频繁查询引发死锁.通常我们知道如果两个事务同时对一个表进行插入或修改数据,会发生在请求对表的X锁时,已经被对方持有了.由于得不 ...

  5. Sysbench 开启超线程/关闭超线程以及容器运行数据库的性能损耗

    Sysbench 开启超线程/关闭超线程性能损耗 摘要 Stress-NG 测试完之后 突然想 使用sysbenchen也进行一次压测 验证一把 超线程对数据的性能影响. 压测命令 ./sysbenc ...

  6. 编译打包rabbitmq然后一键部署的简单方法

    摘要 之前总结过一版,但是感觉不太全面 想着本次能够将使用中遇到的问题总结一下. 所以本次是第二版 介质下载 rabbitmq 不区分介质的打包文件 rabbitmq-server-generic-u ...

  7. 【K哥爬虫普法】微信公众号爬虫构成不正当竞争，爬虫er面对金山，如何避免滥用爬虫？

    我国目前并未出台专门针对网络爬虫技术的法律规范,但在司法实践中,相关判决已屡见不鲜,K 哥特设了"K哥爬虫普法"专栏,本栏目通过对真实案例的分析,旨在提高广大爬虫工程师的法律意识, ...

  8. 给python脚本传递命令行参数

    记录一下给python脚本传参数的几种方式 最简单的方式 在cmd/bat脚本中调用python脚本传递参数 #传递参数 python test.py arg1 arg2 arg3 #在python中 ...

  9. 【六】强化学习之DQN---PaddlePaddlle【PARL】框架｛飞桨｝

    相关文章: [一]飞桨paddle[GPU.CPU]安装以及环境配置+python入门教学 [二]-Parl基础命令 [三]-Notebook.&pdb.ipdb 调试 [四]-强化学习入门简 ...

  10. C/C++ 结构体与指针笔记

    结构体的定义与使用: #include <stdio.h> #include <stdlib.h> struct Student { int num; char name[30 ...