ssm实现折线统计图
方法1：单张数据表中的数据图表生成
图表统计，查看部门人数统计这里实现的时单张表中的数据实现部门人数折线统计图展示。
<script type="text/javascript">// 利用AjAx来获取后台传入的数据（@Responsebody注解传入的）var deptName=[];var totalCount=[];var maleCount=[];var femaleCount=[];$.ajax({type: "get",async: false, //是否异步url:ctx+ "/admin/sortHit",contentType: "application/json;charset=UTF-8",dataType: "json", //跨域json请求一定是jsonsuccess: function (response) {for (var index = 0; index < response.length; index += 1) {deptName.push(response[index].deptName);totalCount.push(response[index].totalCount);maleCount.push(response[index].maleCount);femaleCount.push(response[index].femaleCount);}},error: function (response) {console.log("请求失败")}});//Echarts展示数据$(function () {{// 基于准备好的dom，初始化echarts图表var myChart = echarts.init(document.getElementById('main'));option = {title: {text: '部门人数统计图'},tooltip: {trigger: 'axis',axisPointer: {type: 'line',}},toolbox: {show: true,feature: {saveAsImage: {}}},legend: { // 添加线条标识说明data: ['总人数', '男性人数', '女性人数'],top: 30},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: [{type: 'category',// boundaryGap: false,data: deptName,axisLabel: {interval: 0,textStyle: {color: '#666'}},axisLine: {lineStyle: {color: '#ccc'}},axisTick: {show: false}}],yAxis: [{type: 'value',minInterval: 1,axisLine: {lineStyle: {color: '#ccc'}},axisTick: {lineStyle: {color: '#ccc'}}}],series: [{name: '总人数',type: 'line',itemStyle: {color: '#a9dffb'},data: totalCount},{name: '男性人数',type: 'line',itemStyle: {color: '#5fb7f9'},data: maleCount},{name: '女性人数',type: 'line',itemStyle: {color: '#289df5'},data: femaleCount}]};// 为echarts对象加载数据myChart.setOption(option);// echarts 窗口缩放自适应window.onresize = function () {echartsRecords.resize();}}})
</script>
这里是后端方法，这里只有mybatis和controller层的代码其他代码可自行生成。
// 后端SSM方法
@RequestMapping(value = "/admin/sortHit", method = RequestMethod.GET)
@ResponseBody
public List<Department> getDepartmentStatistics() {return departmentService.getDepartmentStatistics();
}// Department类
public class Department {private String deptName;private int totalCount;private int maleCount;private int femaleCount;// getters and setters
}// DepartmentMapper.xml
<select id="getDepartmentStatistics" resultType="Department">SELECT deptName, COUNT(*) AS totalCount,SUM(CASE WHEN gender = 'male' THEN 1 ELSE 0 END) AS maleCount,SUM(CASE WHEN gender = 'female' THEN 1 ELSE 0 END) AS femaleCountFROM departmentGROUP BY deptName
</select>
方法二：多张图表生成部门人数统计图，在图表中显示部门总人数，男性人数，女性人数。
前端页面代码
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link rel="stylesheet" href="${ctx }/css/font_eolqem241z66flxr.css"media="all" /><link rel="stylesheet" href="${ctx }/css/list.css" media="all" /><link rel="stylesheet" href="${ctx }/layui/css/layui.css" media="all" /><link rel="stylesheet" href="${ctx }/css/font-awesome-4.7.0/css/font-awesome.min.css" media="all"><link rel="stylesheet" href="${ctx }/css/public.css" media="all"><title>部门人员统计图</title><script>var ctx = "${ctx}";</script>
</head>
<body>
<div class="layui-container"><div class="layui-card"><div class="layui-card-header"><i class="fa fa-line-chart icon"></i>报表统计</div><div class="layui-card-body"><div id="main" style="height:500px;width: 1100px; margin-left: 30px ;margin: 20px auto;"></div></div></div>
</div>
</body>
<!-- 引入layui和echarts -->
<script type="text/javascript" src="${ctx }/layui/layui.js"></script>
<script type="text/javascript" src="${ctx }/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="${ctx }/js/Echarts/echarts.min.js"></script>
<script type="text/javascript">// 利用AjAx来获取后台传入的数据（@Responsebody注解传入的）var deptName=[];var totalCount=[];var maleCount=[];var femaleCount=[];$.ajax({type: "get",async: false, //是否异步url:ctx+ "/admin/sortHit",contentType: "application/json;charset=UTF-8",dataType: "json", //跨域json请求一定是jsonsuccess: function (response) {for (var index = 0; index < response.length; index += 1) {deptName.push(response[index].deptName);totalCount.push(response[index].totalCount);maleCount.push(response[index].maleCount);femaleCount.push(response[index].femaleCount);}},error: function (response) {console.log("请求失败")}});//Echarts展示数据$(function () {{// 基于准备好的dom，初始化echarts图表var myChart = echarts.init(document.getElementById('main'));option = {title: {text: '部门人数统计图'},tooltip: {trigger: 'axis',axisPointer: {type: 'line',}},toolbox: {show: true,feature: {saveAsImage: {}}},legend: { // 添加线条标识说明data: ['部门总人数', '男性人数', '女性人数'],top: 30},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: [{type: 'category',// boundaryGap: false,data: deptName,axisLabel: {interval: 0,textStyle: {color: '#666'}},axisLine: {lineStyle: {color: '#ccc'}},axisTick: {show: false}}],yAxis: [{type: 'value',minInterval: 1,axisLine: {lineStyle: {color: '#ccc'}},axisTick: {lineStyle: {color: '#ccc'}}}],series: [{name: '部门总人数',type: 'line',itemStyle: {color: '#38e913'},data: totalCount},{name: '男性人数',type: 'line',itemStyle: {color: '#0c1c61'},data: maleCount},{name: '女性人数',type: 'line',itemStyle: {color: '#8f0d21'},data: femaleCount}]};// 为echarts对象加载数据myChart.setOption(option);// echarts 窗口缩放自适应window.onresize = function () {echartsRecords.resize();}}})
</script>
</html>
后端代码
controller层@RequestMapping("/sortHit")@ResponseBodypublic List<Department> countByDept() {return adminService.countByDept();}service层List<Department> countByDept();@Overridepublic List<Department> countByDept() {return adminDao.countByDept();}dao层List<Department> countByDept();
mapper文件
<select id="countByDept" resultType="com.nucleic.acid.manager.entity.DeptEchart">/*方法1：查询部门人数并将总人数里面的男女性别分别显示*/SELECT d.deptName, COUNT(*) AS totalCount,SUM(CASE WHEN a.sex = '1' THEN 1 ELSE 0 END) AS maleCount,SUM(CASE WHEN a.sex = '0' THEN 1 ELSE 0 END) AS femaleCountFROM sys_admin a JOIN tb_department d ON a.dept_name = d.deptNameGROUP BY deptName/* -- 方式一根据部门名称和管理员所属部门名称进行统计人数SELECT d.deptName, COUNT(*) countFROM sys_admin a JOIN tb_department d ON a.dept_name = d.deptNameGROUP BY d.deptName*//* 方式二根据部门id进行生成统计图SELECT d.deptName, COUNT(*) countFROM sys_admin a JOIN tb_department d ON a.department_id = d.de_idGROUP BY d.deptName*/</select>
java类
private Integer id;private String deptName;private int count;private int totalCount;private int maleCount;private int femaleCount;
相关文章：
ssm实现折线统计图
方法1：单张数据表中的数据图表生成 图表统计，查看部门人数统计这里实现的时单张表中的数据实现部门人数折线统计图展示。 <script type"text/javascript">// 利用AjAx来获取后台传入的数据（Responsebody注解传入的&…...
GLSL ES着色器 精度限定字
目录 前言 WebGL支持的三种精度 数据类型的默认精度 float类型没有默认精度 预处理指令 在GLSL ES中常用的三种预处理指令。 预定义的内置宏 前言 GLSL ES新引入了精度限定字，目的是帮助着色器程序提高运行效率，削减内存开支。顾名思义…...
webrtc的FULL ICE和Lite ICE
1、ICE的模式 分为FULL ICE和Lite ICE： FULL ICE:是双方都要进行连通性检查，完成的走一遍流程。 Lite ICE: 在FULL ICE和Lite ICE互通时，只需要FULL ICE一方进行连通性检查， Lite一方只需回应response消息。这种模式对于部署在公网…...
flink的几种常见的执行模式
背景 在运行flink时，我们经常会有几种不同的执行模式，比如在IDE中启动时，通过提交到YARN上，还有通过Kebernates启动时，本文就来记录一下这几种模式 flink的几种执行模式 flink嵌入式模式： 这是一种我们在…...
蓝桥杯备赛Day8——队列
大家好，我是牛哥带你学代码，本专栏详细介绍了蓝桥杯备赛的指南，特别适合迎战python组的小白选手。专栏以天作为单位，定期更新，将会一直更新，直到所有数据结构相关知识及高阶用法全部囊括，欢迎大家订阅本专栏！ 队列也属于基础数据结构。 队列概念 队列是一种数据结构，…...
用滑动条做调色板---cv2.getTrackbarPos()，cv2.creatTrackbar()
滑动轨迹栏作调色板 cv.createTrackbar(‘R’, ‘image’, 0, 255, nothing) 参数：哪个滑动轨迹栏，哪个窗口，最小值，最大值，回调函数 cv.getTrackbarPos(‘R’, ‘image’) 参数：轨迹栏名，窗口…...
dubbo 服务注册使用了内网IP,而服务调用需要使用公网IP进行调用
一、问题描述： 使用dubbo时，提供者注册时显示服务地址ip为[内网IP:20880]，导致其他消费者在外部连接的情况下时，调用dubbo服务失败 二、解决办法 方法一、修改hosts文件 （1）. 先查询一下服务器的hostna…...
外传-Midjourney的局部重绘功能
今天在抄袭。。。啊不，借鉴 midjourney 官网教程的时候，发现多了一个 局部重绘的功能，意外发觉还不错，分享一下用法。 先给大家说一下，我这段时间都在学习 SD，局部重绘是基操，而 MJ 一直是次次…...
Spring Boot 中使用 Poi-tl 渲染数据并生成 Word 文档
本文 Demo 已收录到 demo-for-all-in-java 项目中，欢迎大家 star 支持！后续将持续更新！ 前言 产品经理急冲冲地走了过来。「现在需要将按这些数据生成一个 Word 报告文档，你来安排下」 项目中有这么一个需求，需要将用户…...
Java基础（二十一）十点半游戏
十点半游戏 十点半是一种流行的纸牌游戏，可以说是一种变体的二十一点游戏。游戏的规则是，每个玩家根据所拿到的牌点数的总和来决定是否继续要牌。目标是尽量接近但不超过十点半的点数，超过十点半即为爆牌。如果两名玩家都未爆牌，…...
第8节-PhotoShop基础课程-常用快捷键汇总
文章目录 前言1.工具栏1.移动工具 V2.矩形框选工具 M3.套索工具 L4.魔棒工具 W5.裁剪工具 C6.吸管工具 I7.污点修复工具 J8.仿制图章工具 S9.历史记录画笔工具 Y10.橡皮檫工具 E11.油漆桶工具 G12 减淡工具 O13.钢笔工具 P14 横排文字工具 T15.路径选择工具 A16 椭圆工具 U17 抓…...
Redis带你深入学习数据类型set
目录 1、set 2、set相关命令 2.1、添加元素 sadd 2.2、获取元素 smembers 2.3、判断元素是否存在 sismember 2.4、获取set中元素数量 scard 2.5、删除元素spop、srem 2.6、移动元素smove 2.7、集合中相关命令：sinter、sinterstore、sunion、sunionstore、s…...
Json“牵手”易贝商品详情数据方法，易贝商品详情API接口，易贝API申请指南
易贝是一个可让全球民众在网上买卖物品的线上拍卖及购物网站，易贝（EBAY）于1995年9月4日由Pierre Omidyar以Auctionweb的名称创立于加利福尼亚州圣荷塞。人们可以在易贝上通过网络出售商品。2014年2月20日，易贝宣布收购3D虚拟试衣公…...
《AI一键生成抖音商品种草文案》让你秒变带货王！
在这个数字化的时代，我们的生活被各种应用所包围，其中，抖音作为一款短视频分享平台，已经成为了我们生活中不可或缺的一部分。然而，作为一名抖音创作者，你是否曾经遇到过这样的困扰：在创作商品种…...
博客系统（升级（Spring））(二)获取当前用户信息、对密码进行加密、设置统一数据格式、设置未登录拦截、线程池
博客系统（二） 博客系统获取当前用户的信息对密码进行加密和解密的操作设置统一的数据返回格式设置未登录拦截设置线程池 博客系统 博客系统是干什么的？ CSDN就是一个典型的博客系统。而我在这里就是通过模拟实现一个博客系统，这是…...
Postman接口测试工具
Postman接口测试工具 Postman简介Postman 发送一个请求postman创建一个集合Postman 快捷键Postman设置postman请求postman历史postman请求排错postman集合简介postman创建和共享集合postman管理集合postman数据导入导出postman测试脚本postman环境变量和全局变量...
appium+jenkins实例构建
自动化测试平台 Jenkins简介 是一个开源软件项目，是基于java开发的一种持续集成工具，用于监控持续重复的工作，旨在提供一个开放易用的软件平台，使软件的持续集成变成可能。 前面我们已经开完测试脚本，也使用bat 批处…...
c#中字段和属性的区别，委托和事件的区别
IDE眼里的字段和属性 class Test {public int age1 12;public int Age2 { get; set; } 18;public void Show(){Console.WriteLine(age1);Console.WriteLine(Age2);} }很多新人发现在类中定义变量时，有些人会在后面写上get,set。 这种写法定义出来的变量…...
香橙派使用外设驱动库wiringOP来驱动蜂鸣器
硬件接线 回顾香橙派的物理引脚对应： 所以将VCC接到1，GND接到6，I/O口接到7： 代码编写 香橙派的wiringOP库提供了很多的例程，可以将blink.c拷贝进自己的代码文件夹来修改： 小插曲---将手动对齐的Tab和自动对…...
微信小程序Day3笔记
1、页面导航 1. 什么是页面导航 页面导航指的是页面之间的相互跳转。例如：浏览器中实现页面导航的方式有如下两种： <a>链接location.href 2. 小程序中实现页面导航的两种方式： 声明式导航： 在页面上声明一个<navigat…...
[实战] 2026年CNC加工质量控制：从工程图纸数字化到检验计划生成的全流程解析
在 2026 年的精密制造环境中，cnc 加工（CNC machining）已不再仅仅是切削工艺的竞争，更是数字化协作与质量控制能力的较量。随着多品种、小批量生产模式成为主流，如何快速解析复杂的工程图纸并制定高精度的检验计划&…...
ElevenLabs免费额度使用全攻略（2024年Q2实测版）：从注册到语音生成的7个生死节点
更多请点击： https://intelliparadigm.com 第一章：ElevenLabs免费额度的核心机制与边界认知 ElevenLabs 的免费层并非基于“每月固定时长”，而是采用动态配额（Dynamic Quota）模型，其核心由三重维度共同约束…...
基于Puppeteer与GPT的微信AI助手：从自动化到智能回复的完整实现
1. 项目概述：一个能帮你自动回复微信消息的AI助手 如果你也和我一样，每天被淹没在微信的群聊、私聊和各种公众号消息里，但又不想错过重要信息，或者希望有一个“智能分身”能帮你处理一些重复性的咨询，那么这个项目你一…...
3步学会使用Tinke：免费NDS游戏资源提取与修改终极指南
3步学会使用Tinke：免费NDS游戏资源提取与修改终极指南 【免费下载链接】tinke Viewer and editor for files of NDS games 项目地址: https://gitcode.com/gh_mirrors/ti/tinke 你是否曾经想过提取NDS游戏中的精美图片、动听音乐，或者修改游戏文本…...
2025 上海 GEO 优化公司最新权威推荐：技术领航者与合作指南
一、核心关键词GEO 优化、生成式引擎优化、AI 搜索流量、上海 GEO 公司、本地服务 GEO、跨境 GEO、DeepSeek 排名优化、豆包排名优化、装修行业 GEO、B2B 获客优化、全域 AI 营销、合规 GEO 服务二、GEO 简介及上海市场现状分析1. GEO 核心定义GEO（Generative Engin…...
问卷星 vs 腾讯问卷 vs 金数据：2026主流问卷工具AI开放能力最新横评
作为问卷调研行业的深度观察者，老N近期注意到调研工具链正在发生一场静悄悄的革命。最近，问卷星正式上线了AI工具包（wjx-ai-kit），其CLI（命令行工具）支持多达67个子命令，并适配了Clau…...
MATLAB集成大语言模型：无缝融合AI能力与工程计算生态
1. 项目概述：当MATLAB遇见大语言模型如果你是一位工程师、研究员或者数据分析师，并且你的日常工作离不开MATLAB，那么你很可能已经感受到了AI浪潮的冲击。大语言模型（LLMs）如ChatGPT、Llama等，正在重塑我们处…...
NoFences：三分钟让你的Windows桌面从混乱到有序的免费开源方案
NoFences：三分钟让你的Windows桌面从混乱到有序的免费开源方案 【免费下载链接】NoFences 🚧 Open Source Stardock Fences alternative 项目地址: https://gitcode.com/gh_mirrors/no/NoFences 你是否也曾面对满屏杂乱无章的图标感到无从下手&am…...
WeChatMsg：5分钟轻松掌握微信聊天记录的终极管理方案
WeChatMsg：5分钟轻松掌握微信聊天记录的终极管理方案 【免费下载链接】WeChatMsg 提取微信聊天记录，将其导出成HTML、Word、CSV文档永久保存，对聊天记录进行分析生成年度聊天报告 项目地址: https://gitcode.com/GitHub_Trending/we/WeChat…...
华为HarmonyOS用户必看：5分钟搞定MicroG完整安装与权限配置指南
华为HarmonyOS用户必看：5分钟搞定MicroG完整安装与权限配置指南 【免费下载链接】GmsCore Free implementation of Play Services 项目地址: https://gitcode.com/GitHub_Trending/gm/GmsCore 还在为华为HarmonyOS设备无法使用Google服务而烦恼吗？…...