说明

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

设计为柱状图模式展现，自然需要用到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. Linux-进程动态监控-top

  2. 幻兽帕鲁 Palworld 私有服务器一键部署教程

    <幻兽帕鲁>(日语:パルワールド,英语:Palworld) 是由日本开发商 Pocket Pair 推出的一款动作冒险生存游戏.游戏设定在一个由类似动物的生物 "帕鲁" ...

  3. [转帖]Region Merge Config

    TiKV replicates a segment of data in Regions via the Raft state machine. As data writes increase, a ...

  4. [转帖]JMETER结果分析

    https://www.cnblogs.com/a00ium/p/10462892.html 我相信你同意:有很多方法可以收集和解释JMeter结果,你会感到迷茫. 嗯,看完这篇文章后,您将了解收集和 ...

  5. [转帖]ELKStack入门篇（二）之Nginx、Tomcat、Java日志收集以及TCP收集日志使用

    https://www.cnblogs.com/linuxk/p/9273160.html 1.收集Nginx的json格式日志 1.1.Nginx安装   1.2.配置logstash [root@ ...

  6. [转帖]一起来体验96核心、192线程CPU——第四代AMD EPYC处理器独家测试

    http://k.sina.com.cn/article_1882475282_70344b12027010s1x.html 与第三代EPYC 7003系列处理器相比,新一代EPYC 9004系列处理 ...

  7. Jumper Server 堡垒机搭建过程

    Jumper Server 堡垒机搭建过程 背景说明 公司组织考核, 要对一套系统进行安全设置.有一个项目是使用堡垒机进行登录 堡垒机有多种用途,可以实现日志审计和安全设置等. 买商业设备的话太困难了 ...

  8. vue启动报错_interopRequireDefault is not a function

    起因 今天接触一个项目vue. 在安装好环境之后,启动的时候报错_interopRequireDefault is not a function 解决的办法:我觉得可能是因为node_modules安 ...

  9. 【JS 逆向百例】XHR 断点调试，Steam 登录逆向

    声明 本文章中所有内容仅供学习交流,抓包内容.敏感网址.数据接口均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关,若有侵权,请联系我立即删除! 逆向目标 目标:Steam ...

  10. 微信小程序-常用弹窗

    官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showToast.html showToast ...