SpringBoot、EasyPoi、Echarts 实现文档导入、出、图表显示 (饼状图、柱状图) 保姆级教程

news2024/11/25 0:25:46

一、介绍环境

        EasyPOI:                   

              现在我们就来介绍下EasyPoi,首先感谢EasyPoi 的开发者​。EasyPoi开源               

              easypoi 是为了让开发者快速的实现excel，word,pdf的导入导出，基于Apache poi基础上的一个工具包。easypoi教程

        Echarts:

              echarts（Enterprise Charts，商业级数据图表）是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。echarts 官网

二、代码环节

        1.导入数据库

/*
 Navicat Premium Data Transfer

 Source Server         : localhost
 Source Server Type    : MySQL
 Source Server Version : 80013
 Source Host           : localhost:3306
 Source Schema         : echarts

 Target Server Type    : MySQL
 Target Server Version : 80013
 File Encoding         : 65001

 Date: 29/11/2022 17:14:00
*/

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for user
-- ----------------------------
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user`  (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `password` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `sex` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `age` int(11) NULL DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 1016 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of user
-- ----------------------------
INSERT INTO `user` VALUES (1, '张三', '123', '男', 19);
INSERT INTO `user` VALUES (2, '李四', '123', '男', 21);
INSERT INTO `user` VALUES (3, '王五', '123', '男', 24);
INSERT INTO `user` VALUES (4, '赵六', '123456', '男', 34);
INSERT INTO `user` VALUES (1002, '火狐', '123456', '男', 44);
INSERT INTO `user` VALUES (1003, '微三', '123456', '男', 32);
INSERT INTO `user` VALUES (1004, '以某', '123123', '其他', 56);
INSERT INTO `user` VALUES (1005, '中某', '123456', '女', 43);
INSERT INTO `user` VALUES (1006, '霍某', '123123', '女', 21);
INSERT INTO `user` VALUES (1007, '赵莫', '123456', '女', 22);
INSERT INTO `user` VALUES (1008, '阿里', '123123', '男', 45);
INSERT INTO `user` VALUES (1009, '腾讯', '123456', '男', 67);
INSERT INTO `user` VALUES (1010, '服务', '123123', '男', 33);
INSERT INTO `user` VALUES (1011, '维子', '123456', '男', 25);

SET FOREIGN_KEY_CHECKS = 1;

        2.创建boot项目(内容过于简单，忽略...)

        3.修改pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.5</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.gitkeki</groupId>
    <artifactId>excel</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>excel</name>
    <description>excel</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>com.mysql</groupId>
            <artifactId>mysql-connector-j</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

      
        <dependency>
            <groupId>cn.afterturn</groupId>
            <artifactId>easypoi-spring-boot-starter</artifactId>
            <version>4.1.2</version>
        </dependency>

        <!--poi-->
        <dependency>
            <groupId>cn.afterturn</groupId>
            <artifactId>easypoi-base</artifactId>
            <version>4.1.0</version>
        </dependency>
        <dependency>
            <groupId>cn.afterturn</groupId>
            <artifactId>easypoi-web</artifactId>
            <version>4.1.0</version>
        </dependency>
        <dependency>
            <groupId>cn.afterturn</groupId>
            <artifactId>easypoi-annotation</artifactId>
            <version>4.1.0</version>
        </dependency>


        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.4.2</version>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.83</version>
        </dependency>
    </dependencies>
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

        <!--核心依赖-->

        <dependency>
            <groupId>cn.afterturn</groupId>
            <artifactId>easypoi-spring-boot-starter</artifactId>
            <version>4.1.2</version>
        </dependency>

        <!--poi-->
        <dependency>
            <groupId>cn.afterturn</groupId>
            <artifactId>easypoi-base</artifactId>
            <version>4.1.0</version>
        </dependency>
        <dependency>
            <groupId>cn.afterturn</groupId>
            <artifactId>easypoi-web</artifactId>
            <version>4.1.0</version>
        </dependency>
        <dependency>
            <groupId>cn.afterturn</groupId>
            <artifactId>easypoi-annotation</artifactId>
            <version>4.1.0</version>
        </dependency>

        4.修改yml 

mybatis-plus:
  configuration:
    map-underscore-to-camel-case: true
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/jpa
    username: root
    password: root
  thymeleaf:
    cache: false

        5.创建好相对应的包

        6.实体层

@Data
public class User {
    @TableId(value = "id", type = IdType.AUTO)
    private Integer id;
    @Excel(name = "用户名称")
    private String username;
    @Excel(name = "用户密码")
    private String password;
    @Excel(name = "用户性别")
    private String sex;
    @Excel(name = "用户年龄")
    private Integer age;
    @TableField(exist = false)
    private Integer count;  //用于存储分组数据
}

        7.mapper层、service层

@Mapper
public interface UserMapper extends BaseMapper<User> {
}
public interface UserService extends IService<User> {
}
@Service
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService {
}

        8.工具类

public class ExcelUtils {
    /**
     * excel 导出
     *
     * @param list      数据
     * @param title     标题
     * @param sheetName sheet名称
     * @param pojoClass pojo类型
     * @param fileName  文件名称
     * @param response
     */
    public static void exportExcel(List<?> list, String title, String sheetName, Class<?> pojoClass, String fileName, HttpServletResponse response) throws IOException {
        defaultExport(list, pojoClass, fileName, response, new ExportParams(title, sheetName, ExcelType.XSSF));
    }

    /**
     * 默认的 excel 导出
     *
     * @param list         数据
     * @param pojoClass    pojo类型
     * @param fileName     文件名称
     * @param response
     * @param exportParams 导出参数
     */
    private static void defaultExport(List<?> list, Class<?> pojoClass, String fileName, HttpServletResponse response, ExportParams exportParams) throws IOException {
        Workbook workbook = ExcelExportUtil.exportExcel(exportParams, pojoClass, list);
        downLoadExcel(fileName, response, workbook);
    }

    /**
     * 下载
     *
     * @param fileName 文件名称
     * @param response
     * @param workbook excel数据
     */
    private static void downLoadExcel(String fileName, HttpServletResponse response, Workbook workbook) throws IOException {
        try {
            response.setCharacterEncoding("UTF-8");
            response.setHeader("content-Type", "application/vnd.ms-excel");
            response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(fileName + "." + ExcelTypeEnum.XLSX.getValue(), "UTF-8"));
            workbook.write(response.getOutputStream());
        } catch (Exception e) {
            throw new IOException(e.getMessage());
        }
    }

    /**
     * Excel 类型枚举
     */
    enum ExcelTypeEnum {
        XLS("xls"), XLSX("xlsx");
        private String value;

        ExcelTypeEnum(String value) {
            this.value = value;
        }

        public String getValue() {
            return value;
        }
    }

}

        9.controller控制层

@Controller
@RequestMapping("/excel")
public class excelController {

    @Autowired
    private UserService userService;

    //上传文件保存接口
    @PostMapping("/save")
    public String excel(@RequestParam("file") MultipartFile file, HttpServletRequest request){
        try {
            // 准备导入的参数
            ImportParams params = new ImportParams();
            params.setTitleRows(0); //标题列占几行
            params.setHeadRows(1); //header列占几行

            List<User> list = ExcelImportUtil.importExcel(file.getInputStream(), User.class, params);
            list.forEach(item -> {
                userService.save(item);
            });
            return "redirect:/index.html";
        } catch (Exception e) {
            e.printStackTrace();
            return "redirect:/err.html";
        }
    }

    //导出文件保存接口
    @PostMapping("/export")
    @ResponseBody
    public String export(HttpServletResponse response){
        List<User> list = userService.list();
        try {
            ExcelUtils.exportExcel(list, "用户信息", "用户信息", User.class, "用户信息", response);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return "success";
    }


    //图表数据获取接口
    @PostMapping("/chart")
    @ResponseBody
    public String chart(){
        QueryWrapper<User> userQueryWrapper = new QueryWrapper<User>();
        userQueryWrapper.select("count(*) as count,sex");
        userQueryWrapper.groupBy("sex");
        List<User> list = userService.list(userQueryWrapper);
        List<User> userList = userService.list();
        userList.stream().forEach(item ->{
            list.add(item);
        });
        String jsonString = JSON.toJSONString(list);
        return jsonString;
    }
}

        10.前端页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>文件导入、导出、图形展示Demo</title>
</head>
<body>
<form th:action="@{/excel/save}" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit">
</form>
<form th:action="@{/excel/export}" method="post">
    <input type="submit" value="导出">
</form>
<h3>柱状图</h3>
<div id="main" style="width: 1000px;height:500px;"></div>  <!--柱状图-->
<h3>饼状图</h3>
<div id="mains" style="width: 600px;height:400px;"></div> <!--饼状图-->

</body>
<!--导入Echarts-->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<!--导入jquery-->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    window.onload = function() {
        $.ajax({
            type: 'post',
            url: '/excel/chart',
            dataType:'json',
            success: function (data) {
                console.log(data)
                //存放柱状图名称
                var chartName = [];
                //存放柱状图值
                var chartValue = [];
                //存放饼状图值
                var sex = [];
                for (let i = 0; i < data.length; i++) {
                    if (data[i].count != null){  //后台使用stream 做了添加 因此可以得到分组后的count
                        sex.push({"value": data[i].count,"name":data[i].sex})
                    }else{
                        chartName.push(data[i].username);
                        chartValue.push(data[i].age);
                    }
                }
                //初始化状图
                var myChart = echarts.init(document.getElementById('main'));
                var option = {
                    tooltip: {},
                    xAxis: {
                        data: chartName  //赋值
                    },
                    yAxis: {},
                    series: [{
                        name: '数量',
                        type: 'bar',
                        data: chartValue //赋值
                    }]
                };
                myChart.setOption(option);

                //初始化饼图
                var myChart = echarts.init(document.getElementById('mains'));
                myChart.setOption({
                    series : [
                        {
                            type: 'pie',
                            radius: '55%',
                            data: sex //赋值
                        }
                    ]
                })
            }
        })


    }

</script>
</html>

三、测试环节

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/45764.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

c++ - 第15节 - 二叉树进阶

c++ - 第15节 - 二叉树进阶

1. 二叉搜索树 1.1.二叉搜索树概念 二叉搜索树又称二叉排序树&#xff0c;它或者是一棵空树&#xff0c;或者是具有以下性质的二叉树: 若它的左子树不为空&#xff0c;则左子树上所有节点的值都小于根节点的值若它的右子树不为空&#xff0c;则右子树上所有节点的值都大于根节…
阅读更多...
一次 Netty 代码不健壮导致的大量 CLOSE_WAIT 连接原因分析

一次 Netty 代码不健壮导致的大量 CLOSE_WAIT 连接原因分析

背景 我们线上有一个 dubbo 的服务&#xff0c;出现大量的 CLOSE_WAIT 状态的连接&#xff0c;这些 CLOSE_WAIT 的连接出现以后不会消失&#xff0c;这就有点意思了&#xff0c;于是做了一下分析记录如下。 首先从 TCP 的角度看一下 CLOSE_WAIT CLOSE_WAIT 状态出现在被动关闭…
阅读更多...
数据分析之金融数据分析

数据分析之金融数据分析

一 前言 金融业是一个持续发展的行业&#xff0c;金融业正在使用数据分析进行金融&#xff0c;以最大程度地减少管理各种金融活动所需的精力和时间。这些公司正在利用数据分析和机器学习原理的力量。这有助于他们发现金融行业各个领域所需的进步&#xff0c;以重塑其业务战略。…
阅读更多...
虹科分享 | 网络仿真器 | 预测云中对象存储系统的实际性能

虹科分享 | 网络仿真器 | 预测云中对象存储系统的实际性能

对象存储是一种在云中存储非结构化数据的方法&#xff0c;从理论上讲&#xff0c;它使得以其原始格式存储几乎无限量的数据成为可能。在这种存储架构中&#xff0c;数据被作为对象进行管理&#xff0c;而传统的系统则将数据作为块或分层文件进行处理。对象存储可以在内部使用&a…
阅读更多...
一条Select语句在MySQL-Server层的执行过程

一条Select语句在MySQL-Server层的执行过程

select customer_id,first_name,last_name from customer where customer_id14;先连接到数据库&#xff0c;连接器 负责跟客户端建立连接、获取权限、维持和管理连接。 客户端再次发送请求&#xff0c;就会使用同一个连接&#xff0c;客户端如果长时间没动静&#xff0c;就会断…
阅读更多...
用R Shiny生态快速搭建交互Web网页APP应用

用R Shiny生态快速搭建交互Web网页APP应用

什么是Shiny&#xff1f; Shiny包可以快速搭建基于R的交互网页应用。对于web的交互&#xff0c;之前已经有一些相关的包&#xff0c;不过都需要开发者熟悉网页编程语言&#xff08;html,CSS,JS&#xff09;。最近我们被客户要求撰写关于R Shiny的研究报告&#xff0c;包括一些…
阅读更多...
使用 Huggingface Trainer 对自定义数据集进行文本分类

使用 Huggingface Trainer 对自定义数据集进行文本分类

文本分类是一项常见的 NLP 任务&#xff0c;它根据文本的内容定义文本的类型、流派或主题。Huggingface&#x1f917; Transformers 提供 API 和工具来轻松下载和训练最先进的预训练模型。Huggingface Transformers 支持 PyTorch、TensorFlow 和 JAX 之间的框架互操作性。模型还…
阅读更多...
JAVA学习-java基础讲义01

JAVA学习-java基础讲义01

java基础讲义一 java语言1.1 java语言介绍1.1.1 什么是java1.1.2 java之父1.1.3 java语言发展史1.2 java语言的特点二 java环境搭建相关2.1 Java环境介绍2.1.1 虚拟机介绍2.1.2 JVM介绍2.2 Java跨平台2.2.1 跨平台2.2.2 跨平台原理2.3 java运行过程2.4 JDK、JRE、JVM关系图2.4.…
阅读更多...
JaVers：自动化数据审计

JaVers：自动化数据审计

在开发应用程序时&#xff0c;我们经常需要存储有关数据如何随时间变化的信息。此信息可用于更轻松地调试应用程序并满足设计要求。在本文中&#xff0c;我们将讨论 JaVers 工具&#xff0c;该工具允许您通过记录数据库实体状态的更改来自动执行此过程。 Javers如何工作&#x…
阅读更多...
RT-thread lts-v3.1.x版本，GD32F450以太网,上电之后有一定概率ping不通问题处理。

RT-thread lts-v3.1.x版本，GD32F450以太网,上电之后有一定概率ping不通问题处理。

先给结论 官方驱动没有按照GD32F4XX手册要求&#xff0c;等待ENET_DMA_CTL第20bit清0后再写 synopsys_emac.c 文件&#xff0c;void EMAC_FlushTransmitFIFO(struct rt_synopsys_eth * ETHERNET_MAC)函数&#xff0c;增加一句判断即可解决。 /*** Clears the ETHERNET transm…
阅读更多...
Kotlin高仿微信-第4篇-主页-消息

Kotlin高仿微信-第4篇-主页-消息

Kotlin高仿微信-项目实践58篇详细讲解了各个功能点&#xff0c;包括&#xff1a;注册、登录、主页、单聊(文本、表情、语音、图片、小视频、视频通话、语音通话、红包、转账)、群聊、个人信息、朋友圈、支付服务、扫一扫、搜索好友、添加好友、开通VIP等众多功能。 Kotlin高仿…
阅读更多...
Android Studio / IDEA 调试金手指：live template自动打印方法名以及所有变量

Android Studio / IDEA 调试金手指：live template自动打印方法名以及所有变量

ctrl alt s 搜设置&#xff0c;template&#xff0c;结果是在 live template 区域设置代码模板的&#xff0c;不知这功能和直播有何关系&#xff0c;live stream&#xff1f; live template 就是自动完成一段代码。比如输入 fori&#xff0c;然后ctrl空格补全循环体&#xf…
阅读更多...
Apache-DButils以及Druid(德鲁伊) 多表连接查询的解决方案：两种

Apache-DButils以及Druid(德鲁伊) 多表连接查询的解决方案：两种

Apache-DButils以及Druid(德鲁伊) 多表连接查询的问题 每博一文案 张爱玲说&#xff0c;于千万人之中&#xff0c;遇到你所要遇到的人&#xff0c;于千万年之中&#xff0c;时间的无涯的荒野里&#xff0c;没有 早一步&#xff0c;也没有晚一步&#xff0c;刚巧赶上了。 人生海…
阅读更多...
iPhone开机密码什么时候会用到？忘记了怎么办？

iPhone开机密码什么时候会用到？忘记了怎么办？

iPhone的开机密码也是屏幕解锁密码&#xff0c;它的作用还是很重要的。一般用在&#xff1a; 解锁手机手机重启后解锁手机系统更新后第一次解锁手机手机连接电脑需要信任设备Face ID或指纹解锁失败三次后连接Apple Watch后第一次解锁手机 虽然我们现在经常使用其他的解锁方式&…
阅读更多...
马斯克特斯拉内部邮件火了：痛恨开会，少说黑话

马斯克特斯拉内部邮件火了：痛恨开会，少说黑话

金磊 羿阁 发自 凹非寺量子位 | 公众号 QbitAI马斯克给员工的一封内部邮件火了。鼓励员工拒绝开会、公司规定不合理可以不遵守……俨然一个为员工着想的好老板。一开始人们还奇怪马斯克的画风怎么变这么快&#xff0c;后来才发现原来这是他6年前写的。对象也不是推特员工&#…
阅读更多...
BCN点击试剂：1516551-46-4，BCN-succinimidylester，BCN NHS

BCN点击试剂：1516551-46-4，BCN-succinimidylester，BCN NHS

●中文名&#xff1a;丙烷环辛炔-活性酯&#xff0c;BCN-琥珀酰亚胺酯 ●英文名&#xff1a;BCN-NHS&#xff0c; BCN-NHS 酯&#xff0c;BCN-活性酯&#xff0c;BCN-succinimidylester 【产品理化指标】&#xff1a; CAS号&#xff1a; 1516551-46-4 分子式&#xff1a;C15H17…
阅读更多...
58 - 类模板的概念和意义

58 - 类模板的概念和意义

---- 整理自狄泰软件唐佐林老师课程 1. 思考 在C中是否能够将泛型的思想应用于类&#xff1f; 1.1 类模板 一些类主要用于存储和组织数据元素类中数据组织的方式和数据元素的具体类型无关 如&#xff1a;数组类、链表类、Stack类、Queue类&#xff0c;等 C中模板的思想应用于…
阅读更多...
【LeetCode】No.103. Binary Tree Zigzag Level Order Traversal -- Java Version

【LeetCode】No.103. Binary Tree Zigzag Level Order Traversal -- Java Version

题目链接&#xff1a;https://leetcode.com/problems/binary-tree-zigzag-level-order-traversal/ 1. 题目介绍&#xff08;Binary Tree Zigzag Level Order Traversal&#xff09; Given the root of a binary tree, return the zigzag level order traversal of its nodes’…
阅读更多...
【网络编程】第二章 网络套接字（socket+UDP协议程序）

【网络编程】第二章 网络套接字（socket+UDP协议程序）

&#x1f3c6;个人主页&#xff1a;企鹅不叫的博客 ​ &#x1f308;专栏 C语言初阶和进阶C项目Leetcode刷题初阶数据结构与算法C初阶和进阶《深入理解计算机操作系统》《高质量C/C编程》Linux ⭐️ 博主码云gitee链接&#xff1a;代码仓库地址 ⚡若有帮助可以【关注点赞收藏】…
阅读更多...
html实训大作业《基于HTML+CSS+JavaScript红色文化传媒网站(20页)》

html实训大作业《基于HTML+CSS+JavaScript红色文化传媒网站(20页)》

&#x1f389;精彩专栏推荐 &#x1f4ad;文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业&#xff1a; 【&#x1f4da;毕设项目精品实战案例 (10…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023