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…...
大数据技术之Hadoop：提交MapReduce任务到YARN执行（八）
目录 一、前言 二、示例程序 2.1 提交wordcount示例程序 2.2 提交求圆周率示例程序 三、写在最后 一、前言 我们前面提到了MapReduce，也说了现在几乎没有人再写MapReduce代码了，因为它已经过时了。然而不写代码不意味着它没用，当下很火…...
[论文笔记]BiMPM
引言 这又是一篇文本匹配的论文Bilateral Multi-Perspective Matching for Natural Language Sentences阅读笔记。 论文题目为自然语言文本中双向多视角匹配。 提出了BiMPM(bilateral multi-perspective matching)模型： 基于匹配-聚合(比较-聚合)框架； 采用双向匹配提取交…...
JS判断当前是早上，中午，下午还是晚上
<!DOCTYPE html> <html><head><meta charset"utf-8" /><title></title></head><body><div></div><script>function getTimeState() {// 获取当前时间let timeNow new Date();// 获取当前小时let…...
使用Docker部署Gitlab的记录
docker版本 使用docker -v查看 Docker version 1.13.1, build 7d71120/1.13.1运行容器镜像 映射本机的9980端口为Docker内部的80端口 映射本机的9922端口为Docker内部的22端口 使用root用户启动 映射本机目录/mnt/sda/gitlab/log为Docker内部的/var/log/gitlab 映射本机目录…...
Spark【Spark SQL（二）RDD转换DataFrame、Spark SQL读写数据库 】
从 RDD 转换得到 DataFrame Saprk 提供了两种方法来实现从 RDD 转换得到 DataFrame： 利用反射机制推断 RDD 模式使用编程方式定义 RDD 模式 下面使用到的数据 people.txt ： Tom, 21 Mike, 25 Andy, 18 1、利用反射机制推断 RDD 模式 在利用反射机制…...
LabVIEW检测润滑油中的水分和铁颗粒
LabVIEW检测润滑油中的水分和铁颗粒 润滑油广泛应用于现代机械设备，由于工作环境日益恶劣，润滑油经常被水分乳化，加速对机械设备的腐蚀。此外，润滑油还受到机械零件摩擦中产生的Fe颗粒的污染，削弱了其机械润滑效果。润…...
【新版】系统架构设计师 - 软件架构设计＜SOA与微服务＞
个人总结，仅供参考，欢迎加好友一起讨论 架构 - 软件架构设计＜SOA与微服务＞ 考点摘要 面向服务SOA（★★★★）微服务（★★★★） 基于/面向服务的（SOA） 在SO…...
React+Typescript+react-router 6 创建路由操作
本文我们来看看路由的安装 其实路由的操作没有什么变化 但是还是给大家讲一下 那么我们打开项目 在项目终端输入 npm install --save react-router react-router-dom安装 一下 react-router 和 react-router-dom 这都是react开发很基本的插件了 不过大家安装前先注意好我的版…...
前端list.push，封装多个对象
js var fruit [apple, banana];fruit.push(pear);console.log(fruit); // [apple, banana, pear]现在为对象 data1:{addUser: 1,editUser: 1,addTime: null,editTime: 1527410579000,userId: 3,systemNo: mc,userName: zengzhuo,userPassword: e10adc3949ba59abbe56e057f20f88…...
指令延迟隐藏
一、指令延迟隐藏 1. 延迟和延迟隐藏 指令延迟指计算指令从调度到指令完成所需的时钟周期如果在每个时钟周期都有就绪的线程束可以被执行，此时GPU处于满符合状态指令延迟被GPU满负荷计算状态所掩盖的现象称为延迟隐藏延迟隐藏对GPU编程开发很重要，GPU设…...
怎么做网站架构/国内的搜索引擎有哪些
MySQL(Percona Server) 5.6.15主库：192.168.2.21从库：192.168.2.22例如我们同步的数据库为：test。 如果需要同步多个数据库下面会有说明。MySQL 主从复制原理1.master将改变记录到二进制日志(binary log)中(这些记录叫做二进制日志事件&#…...
免费1级做爰片在线观看 历史网站/seo流量的提升的软件
Windows系统是迄今为止使用频率最高的操作系统，虽然其安全性随着版本的更新不断提高，但由于人为编写的缘故始终存在漏洞和缺陷。但Mircosoft公司通过发布漏洞补丁来提高系统的安全性，使Windows系统不再被攻破。因此，用户不仅需了解…...
怎么把其他网站视频放到自己网站/注册百度推广账号
当我们初接触云原生技术时，可能会觉得它有些复杂和混乱。不过，我们可以先来了解一个开放，活力的软件社区，即云原生计算基金会（CNCF）。它为数不清的云原生技术项目提供了持续不断的支持和贡献。而且…...
做门户网站用什么程序/链接平台
进入终端首先是这样的： 要输入cd /才能进入根目录： 然后即可通过ls查看文件了：...
wordpress上显示pdf/郑州seo顾问外包公司
js 如何校验手机号码呢? 手机号有如下规则: (1)必须全为数字; (2)必须是11位.(有人说还有10位的手机号,这里先不考虑); (3)必须以1开头(有人见过以2开头的手机号吗?) (4)第2位是34578中的一个. js方法如下: Js代码 /*** * check mobile phone:(1)must be digit;(2)must be …...
学校网站制作方案/腾讯企点客服
一. JDBC的批量插入使用MySQL的Batch批量处理,JDBC驱动版本需要5.1.13或以上测试使用的JDBC驱动版本:mysql-connector-java-5.1.18-bin(一开始我忽略掉这个jar包的条件要求了,使用的是mysql-connector-java-5.1.6-bin.jar在批处理插入时候效率和普通一样)测试表结构如下:CREATE…...