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

news/2024/4/19 21:10:52/文章来源:https://blog.csdn.net/weixin_62996462/article/details/128100698

一、介绍环境

        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 TransferSource Server         : localhostSource Server Type    : MySQLSource Server Version : 80013Source Host           : localhost:3306Source Schema         : echartsTarget Server Type    : MySQLTarget Server Version : 80013File Encoding         : 65001Date: 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: truelog-impl: org.apache.ibatis.logging.stdout.StdOutImpl
spring:datasource:driver-class-name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://localhost:3306/jpausername: rootpassword: rootthymeleaf: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 {@Autowiredprivate 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")@ResponseBodypublic 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")@ResponseBodypublic 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 做了添加 因此可以得到分组后的countsex.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.luyixian.cn/news_show_38746.aspx

如若内容造成侵权/违法违规/事实不符，请联系dt猫网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

转扩！寻找G2022次列车“旅客”

转扩！寻找G2022次列车“旅客”

各位求职朋友大家好&#xff0c;欢迎乘坐G2022次列车 本次列车为6节编组&#xff0c;由上海开往北京&#xff0c;途径宁波、重庆 本次列车乘务组全体工作人员为您提供全方位福利待遇 上车地址&#xff1a;上海擎创信息技术有限公司 - 社会招聘 (eoitek.com) 如您还需其他帮助…
阅读更多...
Java给图片增加水印，根据图片大小自适应，右下角/斜角/平铺

Java给图片增加水印，根据图片大小自适应，右下角/斜角/平铺

Hi&#xff0c;I’m Shendi 最近写自己的文件服务器&#xff0c;上传图片时需要自动增加水印&#xff0c;在这里记录一下 文章目录效果展示读取图片从 byte[] 读取图片获取画板绘制水印根据图片大小自适应水印大小右下角文字水印斜角水印平铺水印图片水印输出图片水印就是在图片…
阅读更多...
SLAM学习笔记(二)

SLAM学习笔记(二)

5.相机与图像 相机将三维世界中的坐标点&#xff08;单位米&#xff09;映射到二维图像平面&#xff08;单位为像素&#xff09;的过程中能够用一个几何模型进行描述。 单目相机(Mono)的成像过程&#xff1a; 1、世界坐标系下有个固定的点P&#xff0c;世界坐标为 2、由于相…
阅读更多...
基于Java+SSM+Vue+ElementUi的汉语言类网上考试系统

基于Java+SSM+Vue+ElementUi的汉语言类网上考试系统

项目介绍 21世纪的今天&#xff0c;随着社会的不断发展与进步&#xff0c;人们对于信息科学化的认识&#xff0c;已由低层次向高层次发展&#xff0c;由原来的感性认识向理性认识提高&#xff0c;管理工作的重要性已逐渐被人们所认识&#xff0c;科学化的管理&#xff0c;使信…
阅读更多...
前置微小信号放大器在光声技术的血管识别研究中的应用

前置微小信号放大器在光声技术的血管识别研究中的应用

实验名称&#xff1a;前置微小信号放大器在光声技术的血管识别研究中的应用 研究方向&#xff1a;生物识别技术 测试目的&#xff1a; 利用MATLAB对光声血管进行识别&#xff1a;1、对光声血管图库的图像进行预处理包括归一化、二值化、平滑、细化和毛刺修剪得到细化图像&#…
阅读更多...
【安卓逆向】去除云注入（使用MT论坛dl的方法总结拓展）

【安卓逆向】去除云注入（使用MT论坛dl的方法总结拓展）

1 需求 因为最近使用的虚拟机突然不能用了&#xff0c;被人云注入强制弹窗&#xff0c;如下图&#xff1a;&#xff08;这一看就是云注入了&#xff09; 2 大佬的方法 如图&#xff08;MT大佬分享的&#xff0c;感兴趣的朋友可以去大佬主页看看他其他文章&#xff09;&…
阅读更多...
蓝海创意云接受【看苏州】独家专访：助力苏州数字文化行业全方位发展

蓝海创意云接受【看苏州】独家专访：助力苏州数字文化行业全方位发展

近日&#xff0c;由蓝海创意云提供渲染服务的动漫电影《老鹰抓小鸡》获金鸡奖最佳美术片提名&#xff0c;位列获奖名单的《长津湖》《独行月球》也由蓝海创意云渲染提供了后期服务。 就此&#xff0c;苏州广播电视总台旗下的苏州权威热点新闻和视频平台【看苏州】对蓝海彤翔执…
阅读更多...
[附源码]计算机毕业设计springboot基于Java的失物招领平台

[附源码]计算机毕业设计springboot基于Java的失物招领平台

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
用R Shiny生态快速搭建交互Web网页APP应用

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

什么是Shiny&#xff1f; Shiny包可以快速搭建基于R的交互网页应用。对于web的交互&#xff0c;之前已经有一些相关的包&#xff0c;不过都需要开发者熟悉网页编程语言&#xff08;html,CSS,JS&#xff09;。最近我们被客户要求撰写关于R Shiny的研究报告&#xff0c;包括一些…
阅读更多...
快速复现 实现 facenet-pytorch 人脸识别 windows上 使用cpu实现 人脸对比

快速复现 实现 facenet-pytorch 人脸识别 windows上 使用cpu实现 人脸对比

目录0 前言1 搭建环境与项目2 人脸预测与结果展示0 前言 这一次要复现的是人脸识别中的 facenet-pytorch 参考了&#xff1a; Pytorch 搭建自己的Facenet人脸识别网络&#xff08;Bubbliiiing 深度学习 教程&#xff09; https://gitee.com/xiaozhao123666/facenet-pytorch ht…
阅读更多...
分布式消息中间件RabbitMQ解析

分布式消息中间件RabbitMQ解析

RabbitMQ作为分布式消息存储和转发系统&#xff0c;已广泛使用于分布式系统中。本文简要介绍RabbitMQ相关概念、集群架构和消息转发流程&#xff0c;并与Kafka做了简要对比&#xff0c;以加深理解。 1、RabbitMQ相关概念 1.1 AMQP介绍 消息&#xff08;Message&#xff09;是…
阅读更多...
Zookeeper（一）- Zookeeper介绍与集群部署

Zookeeper（一）- Zookeeper介绍与集群部署

文章目录一、Zookeeper 介绍1. Zookeeper概述2. Zookeeper工作机制3. Zookeeper特点4. Zookeeper数据结构5. Zookeeper应用场景&#xff08;1&#xff09;统一命名服务&#xff08;2&#xff09;统一配置管理&#xff08;3&#xff09;统一集群管理&#xff08;4&#xff09;服…
阅读更多...
低代码与mes生产管理系统：功能篇

低代码与mes生产管理系统：功能篇

随着信息技术的发展和应用,信息系统在企业中的使用也越来越广泛。不仅可以使企业内部和企业间的信息流通更为便捷和频繁&#xff0c;同时可以提高管理的水平&#xff0c;有助于提高企业的生产效益。其中mes生产管理系统就是美豳的调查资询公司AMR(Advanced Manufacturing Resea…
阅读更多...
【目标检测】Faster R-CNN的几点理解

【目标检测】Faster R-CNN的几点理解

目录&#xff1a;Faster R-CNN的几点理解一、Faster R-CNN概述二、R-CNN、Fast R-CNN、Faster R-CNN的对照2.1 R-CNN2.1.1 R-CNN的检测步骤2.1.2 R-CNN的主要缺点2.2 Fast R-CNN2.2.1 Fast R-CNN的检测步骤2.2.2 Fast R-CNN的缺点2.3 R-CNN、Fast R-CNN、Faster R-CNN的比较三、…
阅读更多...
（二）devops持续集成开发——jenkins的权限管理配置

（二）devops持续集成开发——jenkins的权限管理配置

前言 jenkins作为目前主流的devops工具&#xff0c;受到了广大开发用户的追捧。由于其丰富的插件库&#xff0c;其可插拔的功能使得其功能和生态都十分强大。本节内容是关于jenkins的权限管理组件Role-based Authorization Strategy的安装及使用。 正文 下载安装Role-based A…
阅读更多...
ThinkPHP5文档学习——配置

ThinkPHP5文档学习——配置

文章目录一、配置目录二、配置格式PHP数组定义其它格式的支持二级配置三、配置加载惯例配置应用配置拓展配置场景配置四、读取配置参数五、动态配置设置配置参数六、独立配置独立配置文件V5.0.1版本已经废除该写法自动读取扩展配置七、配置作用域八、环境变量配置一、配置目录 …
阅读更多...
历届图灵奖得主盘点

历届图灵奖得主盘点

图灵奖&#xff0c;全称A.M.图灵奖&#xff08;ACM A.M Turing Award&#xff09;&#xff0c;是由美国计算机协会于1966年设立的计算机奖项&#xff0c;名称取自艾伦麦席森图灵&#xff0c;旨在奖励对计算机事业作出重要贡献的个人 。图灵奖对获奖条件要求极高&#xff0c;评奖…
阅读更多...
第十三章《集合》第3节：Set集合

第十三章《集合》第3节：Set集合

Set也是Collection的子接口，它定义了另一种形式的集合，专业上称之为Set集合。Set集合的特点如图13-9所示。 图13-9 Set类型集合 从图13-9可以看出：Set类型的集合就像是一个装苹果的筐子，程序员只要把元素存入这个筐子即可。集合中的元素像是胡乱堆积在一起，因此元素没有索…
阅读更多...
12【MyBatis注解开发】

12【MyBatis注解开发】

文章目录三、Mybatis注解开发3.1 快速入门3.1.1 常用注解说明3.1.2 注解实现开发3.2 注解实现一对一映射3.2.1 接口3.2.2 测试类3.3 注解实现一对多映射3.2.1 接口3.2.2 测试类三、Mybatis注解开发 3.1 快速入门 3.1.1 常用注解说明 注解功能Insert新增Update更新Delete删除…
阅读更多...
小学生python游戏编程arcade----单词对错检测及记录写入excel中

小学生python游戏编程arcade----单词对错检测及记录写入excel中

小学生python游戏编程arcade----单词对错检测及记录写入excel中前言单词对错检测及记录写入excel中1、excel读取修改1.1 excel读取1.2 修改用到的库1.3 获取Excel表格名称的三种方式1.4 excel格式问题excel文件保存2.1 保存函数2.2 实验2.3 游戏中调用修改2.4 升级时保存字典内…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023