SpringBoot整合Echarts实现用户人数和性别展示

编程入门行业动态更新时间:2024-10-10 13:13:19

SpringBoot整合Echarts实现用户人数和<a href=https://www.elefans.com/category/jswz/34/1763785.html style= 性别展示"/>

SpringBoot整合Echarts实现用户人数和性别展示

一、背景

在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
@Component
public interface UserDao {int insert(User user);int delete(int userId);int update(User user);List<User> selectAll();int countByGender(int gender);
}

业务逻辑层代码

@Service
public class UserService {@Autowiredprivate UserDao userDao;public void addUser(User user) {userDao.insert(user);}public void deleteUser(int userId) {userDao.delete(userId);}public void updateUser(User user) {userDao.update(user);}public List<User> getAllUsers() {return userDao.selectAll();}public Map<String, Integer> getUserGenderRatio() {int maleCount = userDao.countByGender(1);int femaleCount = userDao.countByGender(0);Map<String, Integer> resultMap = new HashMap<>();resultMap.put("male", maleCount);resultMap.put("female", femaleCount);return resultMap;}
}

控制层代码

@RestController
@RequestMapping("/users")
public class UserController {@Autowiredprivate UserService userService;@PostMapping("/add")public String addUser(@RequestBody User user) {userService.addUser(user);return "success";}@PostMapping("/delete")public String deleteUser(@RequestParam("userId") int userId) {userService.deleteUser(userId);return "success";}@PostMapping("/update")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 --><script src="@4.9.0/dist/echarts.min.js"></script><!-- 引入Vue --><script src=".js"></script><!-- 引入axios --><script src=".min.js"></script>
</head>
<body><div id="app"><!-- 显示用户总数 --><p>共有{{ userList.length }}个用户</p><!-- 显示用户性别比例 --><div id="genderRatio" style="width: 600px;height:400px;"></div></div><script>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);})}}});</script>
</body>
</html>