SpringBoot整合Echarts实现用户人数和性别展示功能(详细步骤)
目录
- 一、背景
- 二、功能实现流程
- 1. 创建数据库表
- 2. 创建SpringBoot项目
- 3. 实现数据访问层
- 4. 实现业务逻辑层
- 5. 实现控制层
- 6. 实现前端页面
- 三、代码实现
- 四、总结
一、背景
在Web应用开发中，经常需要使用图表来展示数据，而Echarts是一个非常优秀的图表库。SpringBoot是一个非常流行的Java Web框架，它可以快速搭建Web应用。本文将介绍如何使用SpringBoot集成Echarts，实现展示用户人数和性别的功能。
二、功能实现流程
1. 创建数据库表
首先，我们需要创建数据库表，用于存储用户信息。本文中，我们创建一个名为“user”的表，用于存储用户的id、姓名、性别等信息。
2. 创建SpringBoot项目
使用IDEA等工具，创建一个SpringBoot项目，并加入相应的依赖。本文中，我们加入的主要依赖有SpringBoot、MyBatis、MySQL等。
3. 实现数据访问层
使用MyBatis框架，实现对用户信息的增删改查等操作。同时，我们也需要实现一个接口用于查询用户的性别比例。
4. 实现业务逻辑层
在业务逻辑层中，我们需要完成对应的功能代码。主要包括：添加用户、删除用户、修改用户信息、查询所有用户、查询用户性别比例等操作。其中，查询用户性别比例的操作需要使用Echarts来生成相应的图表。
5. 实现控制层
在控制层中，我们需要编写对应的接口，用于接收前端的请求，并调用相应的业务逻辑层方法来完成相应的操作。同时，我们也需要编写相应的HTML页面，用于展示用户人数和性别比例的图表。
6. 实现前端页面
使用Vue框架，实现前端页面，并通过接口调用，将后台数据展示到前端页面上。
三、代码实现
本文提供一个示例代码，代码实现过程中，使用了SpringBoot、MyBatis、MySQL等主流技术，实现了基本的增删改查操作、以及查询用户性别比例并用Echarts展示的功能。示例代码中的表名为“user”，根据实际情况可做相应修改。
数据库设计
CREATE TABLE `user` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(255) NOT NULL, `gender` int(11) NOT NULL, PRIMARY KEY (`id`)) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4;
数据访问层代码
@Mapper@Componentpublic interface UserDao { int ｉｎｓｅｒｔ(User user); int ｄｅｌｅｔｅ(int userId); int ｕｐｄａｔｅ(User user); List<User> selectAll(); int countByGender(int gender);}业务逻辑层代码
@Mapper@Componentpublic interface UserDao { int ｉｎｓｅｒｔ(User user); int ｄｅｌｅｔｅ(int userId); int ｕｐｄａｔｅ(User user); List<User> selectAll(); int countByGender(int gender);}控制层代码
@RestController@RequestMapping("/users")public class UserController { @Autowired private UserService userService; @PostMapping("/add") public String addUser(@RequestBody User user) { userService.addUser(user); return "success"; } @PostMapping("/ｄｅｌｅｔｅ") public String deleteUser(@RequestParam("userId") int userId) { userService.deleteUser(userId); return "success"; } @PostMapping("/ｕｐｄａｔｅ") public String updateUser(@RequestBody User user) { userService.updateUser(user); return "success"; } @GetMapping("/all") public List<User> getAllUsers() { return userService.getAllUsers(); } @GetMapping("/ratio") public Map<String, Integer> getUserGenderRatio() { return userService.getUserGenderRatio(); }}前端页面代码
<!DOCTYPE html><html><head> <title>用户信息展示</title> <meta charset="utf-8"> <!-- 引入Echarts --> <ｓｃｒｉｐｔ src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></ｓｃｒｉｐｔ> <!-- 引入Vue --> <ｓｃｒｉｐｔ src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></ｓｃｒｉｐｔ> <!-- 引入axios --> <ｓｃｒｉｐｔ src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></ｓｃｒｉｐｔ></head><body> <div id="app"> <!-- 显示用户总数 --> <p>共有{{ userList.length }}个用户</p> <!-- 显示用户性别比例 --> <div id="genderRatio" style="width: 600px;height:400px;"></div> </div> <ｓｃｒｉｐｔ> new Vue({ el: '#app', data: { userList: [] }, mounted() { this.getUserList(); this.showGenderRatio(); }, methods: { getUserList() { axios.get('/users/all') .then(response => { this.userList = response.data; }) .catch(error => { console.log(error); }) }, showGenderRatio() { axios.get('/users/ratio') .then(response => { let maleCount = response.data.male; let femaleCount = response.data.female; // 使用Echarts生成图表 let chart = echarts.init(document.getElementById('genderRatio')); chart.setOption({ title: { text: '用户性别比例', subtext: '男性/女性' }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, legend: { orient: 'vertical', left: 'left', data: ['男性', '女性'] }, series: [ { name: '性别', type: 'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '30', fontWeight: 'bold' } }, labelLine: { show: false }, data: [ {value: maleCount, name: '男性'}, {value: femaleCount, name: '女性'} ] } ] }); }) .catch(error => { console.log(error); }) } } }); </ｓｃｒｉｐｔ></body></html>四、总结
本文介绍了如何使用SpringBoot集成Echarts，实现展示用户人数和性别的功能。通过数据库设计、实现数据访问层、业务逻辑层和控制层的代码编写，以及前端页面的开发，本文详细地介绍了SpringBoot整合Echarts的实现步骤和代码。
其中，使用Vue框架进行前端页面开发，增加了Web应用的可扩展性和易用性。同时，通过使用Echarts图表库，我们可以让数据呈现更为直观清晰，增强用户体验。
希望本文对读者在Web应用开发中的图表展示有所帮助。
原文地址：https://blog.csdn.net/weixin_65950231/article/details/130539760猜你喜欢
联络方式：
400-123-789
邮箱：xiachao@163.com
Q Q：12345678