说明

最近做了个图书管理系统，里面有个模块是统计最近一周借书和还书的情况。

设计为柱状图模式展现，自然需要用到echarts。

实现效果

开发步骤

1.页面和JS

<!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);

                }

            }

        });

    }

    //生成图形

    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>

2.后台接口

@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携手echarts实现双柱状图实战的更多相关文章

  1. Spring Boot 集成 Mybatis 实现双数据源

    这里用到了Spring Boot + Mybatis + DynamicDataSource配置动态双数据源,可以动态切换数据源实现数据库的读写分离. 添加依赖 加入Mybatis启动器,这里添加了D ...

  2. Spring Boot 2.0 返回JSP页面实战

    1. 模板引擎JSP的限制 在开始之前呢,我觉得我们有必要先去了解下 Spring Boot 2.0 官方文档中提到的如下内容: 模板引擎 除了REST Web服务之外,还可以使用Spring MVC ...

  3. spring boot 2.0 配置双数据源 MySQL 和 SqlServer

    参考:https://www.cnblogs.com/xiaofengfeng/p/9552816.html 安装 org.mybatis.spring.boot:mybatis-spring-boo ...

  4. Spring Boot WebFlux 增删改查完整实战 demo

    03:WebFlux Web CRUD 实践 前言 上一篇基于功能性端点去创建一个简单服务,实现了 Hello .这一篇用 Spring Boot WebFlux 的注解控制层技术创建一个 CRUD ...

  5. Spring Boot Admin 2.1.4最新实战教程

    环境的搭建 首先搭建eruka的注册中心 pom.xml <?xml version="1.0" encoding="UTF-8"?> <pr ...

  6. Spring Boot之AOP面向切面编程-实战篇

    目录 前言 编程范式主要有以下几类 引入pom依赖 aop注解 实现日志分割功能 前言 AOP是一种与语言无关的程序思想.编程范式.项目业务逻辑中,将通用的模块以水平切割的方式进行分离统一处理,常用于 ...

  7. 一个比Spring Boot快44倍的Java框架！

    最近栈长看到一个框架,官方号称可以比 Spring Boot 快 44 倍,居然这么牛逼,有这么神奇吗?今天带大家来认识一下. 这个框架名叫:light-4j. 官网简介:A fast, lightw ...

  8. Spring Boot 2.x（十四）：整合Redis，看这一篇就够了

    目录 Redis简介 Redis的部署 在Spring Boot中的使用 Redis缓存实战 寻找组织 程序员经典必备枕头书免费送 Redis简介 Redis 是一个开源的使用 ANSI C 语言编写 ...

  9. Spring Boot 之整合 EasyUI 打造 Web 应用

    SpringBootTutorial :: Web :: UI :: EasyUI EasyUI 是一个简单的用户界面组件的集合.由于 EasyUI 已经封装好大部分 UI 基本功能,能帮用户减少大量 ...

  10. Spring Boot 2.x 学习专栏

    Spring Boot 2.0 入门指南 Spring Boot 2.0 返回JSP页面实战 Spring Boot 2.0 热部署指南 Spring Boot 2.0 整合FreeMarker模板引 ...

随机推荐

  1. Redis和Springboot在Windows上面设置开机启动的方法

    Redis和Springboot在Windows上面设置开机启动的方法 背景 同事遇到一个问题 Windows 晚上自动更新服务 然后第二天 Springboot开发的程序没有启动起来. 所以基于此想 ...

  2. [转帖]《Linux性能优化实战》笔记（六）—— Linux 软中断与对应故障分析方法

    中断是系统用来响应硬件设备请求的一种机制,它会打断进程的正常调度和执行,然后调用内核中的中断处理程序来响应设备的请求. 一. 为什么要有中断 举个生活中的例子,让你感受一下中断的魅力.比如说你订了一份 ...

  3. [转帖]LTP测试

    https://zhuanlan.zhihu.com/p/381538099   整体测试 直接运行runltp命令,将测试/opt/ltp/scenario_groups/default文件中所有的 ...

  4. Bash 脚本发送消息到企业微信的办法

    1. Study From https://www.cnblogs.com/elvi/p/11444388.html 2. 申请或者使用已经有的企业微信. 首先是获取一下企业id 方法如图: 3. 创 ...

  5. HEVC扩展备用安装方法

    这个玩意微软商店免费但是下架了,购买需要RMB 安装 转到 https://store.rg-adguard.net/ 在左侧的下拉菜单选择"ProductId" 把链接中&quo ...

  6. SSM项目创建步骤（随手记）

    一.mybatis项目创建 1:创建maven项目 2:导入pom坐标 3:resources下创建SqlMapConfig.xml配置文件(主配置文件,配置数据库信息,映射配置文件等) 4:创建包及 ...

  7. 火山引擎ByteHouse：分析型数据库如何设计并发控制？

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 分析型数据库设计并发控制的主要原因是为了确保数据的完整性和一致性,同时提高数据库的吞吐量和响应速度.并发控制可以防 ...

  8. 5个前端开源项目带你在Web上体验Windows

    本文来分享五个 yyds 的开源项目,这些项目把 Windows 带到了 Web 平台上.让我们一起感受这些项目带来的回忆和创新,重温 Windows 93.98.XP 和 7 的经典界面,甚至探索现 ...

  9. 模式识别实验：基于主成分分析（PCA）的人脸识别

    前言 本文使用Python实现了PCA算法,并使用ORL人脸数据集进行了测试并输出特征脸,简单实现了人脸识别的功能. 1. 准备 ORL人脸数据集共包含40个不同人的400张图像,是在1992年4月至 ...

  10. java线程池实现多任务并发执行

    Java线程池实现多任务并发执行 1️⃣ 创建一些任务来落地多任务并发执行 每一个数组里面的数据可以看成任务,或者是需要并发的业务接口, 数组与数组之间,可以看作为他们之间有血缘关系,简单来说就是: ...