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

这篇具有很好参考价值的文章主要介绍了SpringBoot整合Echarts实现用户人数和性别展示。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、背景

在Web应用开发中,经常需要使用图表来展示数据,而Echarts是一个非常优秀的图表库。SpringBoot是一个非常流行的Java Web框架,它可以快速搭建Web应用。本文将介绍如何使用SpringBoot集成Echarts,实现展示用户人数和性别的功能。
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 {

    @Autowired
    private 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 {

    @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应用开发中的图表展示有所帮助。文章来源地址https://www.toymoban.com/news/detail-436238.html

到了这里,关于SpringBoot整合Echarts实现用户人数和性别展示的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Listener监听器,实现一个显示在线用户人数

    目录 Listener监听器,实现一个显示在线用户人数 每博一文案 1. Listener 监听器的概述 2. Listener 监听器在 Servlet 的体系结构 3. 编写一个 Listener 监听器的过程 3.1 ServletContextListener 4. 其他Listener 监听器的使用: 4.1 ServletRequestListener 4.2 HttpSessionListener 4.3 HttpSessionAttributeListener 4.4 H

    2024年02月03日
    浏览(43)
  • springboot整合security,mybatisPlus,thymeleaf实现登录认证及用户,菜单,角色权限管理

    本系统为springboot整合security,mybatisPlus,thymeleaf实现登录认证及用户,菜单,角色权限管理。页面为极简模式,没有任何渲染。 源码:https://gitee.com/qfp17393120407/spring-boot_thymeleaf 架构截图 此处以用户表为例,其他表数据可在源码获取。 用户表 共用属性 共用属性自动填充配置

    2024年02月07日
    浏览(54)
  • SpringBoot整合echarts,前后端逻辑

    ​官方网站:https://echarts.apache.org/examples/zh/index.html 0.安装echarts 1.编写html 用来显示图表,触发显示图标的按钮 2.引入echart 四版本 五版本 3.编写调用方法 编写方法getDataSta(),用来获取后端数据 4.编写JS showChart():用来获取后端传来的数据 其中格式必须为json数组格式 setChart(

    2024年02月05日
    浏览(40)
  • 【项目实战】一、Spring boot整合JWT、Vue案例展示用户鉴权

    【项目实战】Spring boot整合JWT、Vue案例展示用户鉴权 【微服务实战】JWT

    2024年02月09日
    浏览(52)
  • echarts——实现自动轮播展示tooltips——技能提升

    最近在做 echarts 看板的时候,经常会遇到下面的这种情况,给出的数值比较相近,所以在页面的展示上会出现重叠的情况。但是又无法保证数值能够有很大程度的分开。(如何数值有很大的分离,必须10以下,200以上这种的,就不会有这种问题出现)。 如果遇到这种数值相近

    2024年02月03日
    浏览(42)
  • ChatGPT HTML JS Echarts实现热力图展示

    热力图 是一种常用的数据可视化图表,主要用于展示数据的分布和密度情况。它通过使用不同颜色的热点来表示数据在地理或二维空间上的分布情况,从而直观地显示出数据的密集程度和趋势。 热力图的功能和作用如下: 1. 数据分布展示: 热力图可以将大量数据以热点的形

    2024年02月10日
    浏览(41)
  • SpringBoot整合调用微信模板方法实现微信公众号消息通知推送,Java实现微信公众号给关注用户推送自定义消息通知(手把手从0到1)

    目录 概述 公众号给关注用户推送自定义消息 一、申请公众号模板消息 二、获取安装“web开发者工具” 三、微信网页授权说明 四、微信网页授权 - 流程时序图 五、HTTPClient 实现微信公众号消息推送与发布(四步走) 六、通过weixin-java-mp SDK实现微信公众号消息推送与发布(七

    2024年02月10日
    浏览(44)
  • Spring Boot整合Kafka+SSE实现实时数据展示

    2024年3月10日 不使用Rabbitmq或者Rocketmq是因为Kafka是Hadoop集群下的组成部分,对于大数据的相关开发适应性好,且当前业务场景下不需要使用死信队列,不过要注意Kafka对于更新时间慢的数据拉取也较慢,因此对与实时性要求高可以选择其他MQ。 使用消息队列是因为该中间件具有

    2024年04月24日
    浏览(39)
  • Hadoop项目案例:电影网站用户性别预测

    学习目标:        (1)理解掌握KNN算法的原理        (2)掌握以MapReducer编程实现KNN算法        (3)掌握以MapReducer编程实现KNN分类器评估 实现的Hadoop框架如下:     任务背景                XX网站是一个深受用户欢迎的电影网站,它提供了大量的电音介绍及评论

    2024年02月08日
    浏览(75)
  • 【Spark+Hadoop+Hive+MySQL+Presto+SpringBoot+Echarts】基于大数据技术的用户日志数据分析及可视化平台搭建项目

    点我获取项目数据集及代码 随着我国科学技术水平的不断发展,计算机网络技术的广泛应用,我国已经步入了大数据时代。在大数据背景下,各种繁杂的数据层出不穷,一时难以掌握其基本特征及一般规律,这也给企业的运营数据分析工作增添了不小的难度。在大数据的背景

    2024年02月10日
    浏览(62)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包