说明

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

设计为柱状图模式展现，自然需要用到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. [转帖]CIDR

    什么是 CIDR? 无类别域间路由 (CIDR) 是一种 IP 地址分配方法,可提高互联网上的数据路由效率.每台连接到互联网的计算机.服务器和最终用户设备都有一个与之关联的唯一编号,称为 IP 地址. ...

  2. TiDB恢复部分表的方式方法

    TiDB恢复部分表的方式方法 背景 今天同事告知误删了部分表. 因为是UAT准生产的环境, 所以仅有每天晚上11点的备份处理. 同时告知 昨天的数据也可以. 得到认可后进行了 TiDB的单表备份恢复. ...

  3. [转帖]linux之iftop命令

    https://rumenz.com/rumenbiji/linux-iftop.html Linux安装iftop > yum install iftop -y > iftop 界面如下 ...

  4. [转帖]Linux下使用 ipset 封大量IP及ipset参数说明

    https://www.cnblogs.com/xiaofeng666/p/10952627.html Linux使用iptables封IP,是常用的应对网络攻击的方法,但要封禁成千上万个IP,如果添 ...

  5. 内网CentOS7搭建ntp服务器实现内网时间同步

    内网CentOS7搭建ntp服务器实现内网时间同步 背景 公司内部有很多虚拟机,本来很简单的实现了每天晚上自动同步阿里云时间 crontab -e 1 1 * * * ntpdate ntp.aliy ...

  6. Flask四剑客

    目录 Flask四剑客 Flask四剑客 ''' 响应字符串 响应html页面 跳转页面 返回json字符串 ''' from flask import Flask, render_template, ...

  7. ngnix在linux安装并设置反向代理

    一.nginx安装 1.安装Nginx依赖的环境 安装Nginx依赖的gcc的编译环境: yum install gcc-c++ Nginx的http模块需要使用pcre来解析正则表达式,需要安装pc ...

  8. 3.4 DLL注入：全局消息钩子注入

    SetWindowHookEx 是Windows系统的一个函数,可用于让一个应用程序安装全局钩子,但读者需要格外注意该方法安装的钩子会由操作系统注入到所有可执行进程内,虽然该注入方式可以用于绕过游戏保 ...

  9. C/C++ 进程线程操作技术

    手动创建单进程: 下面通过一个实例来分别演示进程的创建函数. #include <windows.h> #include <stdio.h> BOOL WinExec(char ...

  10. LyScript 寻找ROP漏洞指令片段

    ROP绕过片段简单科普一下,你可以理解成一个可以关闭系统自身内存保护的一段机器指令,这段代码需要我们自己构造,这就涉及到在对端内存搜寻这样的指令,LyScript插件增强了指令片段的查找功能,但需要我 ...