SpringBoot整合Echarts实现用户人数和性别展示功能(详细步骤)

2023-05-19 11:05:10 步骤性别人数

一、背景

在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);
}

业务逻辑层代码

@Mapper
@Component
public interface UserDao {
    int insert(User user);
    int delete(int userId);
    int update(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("/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="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
  <!-- 引入Vue -->
  <script src="Https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- 引入axiOS -->
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.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>

四、总结

本文介绍了如何使用SpringBoot集成Echarts，实现展示用户人数和性别的功能。通过数据库设计、实现数据访问层、业务逻辑层和控制层的代码编写，以及前端页面的开发，本文详细地介绍了SpringBoot整合Echarts的实现步骤和代码。

其中，使用Vue框架进行前端页面开发，增加了Web应用的可扩展性和易用性。同时，通过使用Echarts图表库，我们可以让数据呈现更为直观清晰，增强用户体验。

希望本文对读者在Web应用开发中的图表展示有所帮助。

到此这篇关于SpringBoot整合Echarts实现用户人数和性别展示的文章就介绍到这了,更多相关SpringBoot整合Echarts内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

相关文章