个人博客网站开发背景论文,商务网站建设与维护补考试卷,wordpress的cms主题,线上宣传有哪些好的方式方法 方法1#xff1a;单张数据表中的数据图表生成
图表统计#xff0c;查看部门人数统计这里实现的时单张表中的数据实现部门人数折线统计图展示。
script typetext/javascript// 利用AjAx来获取后台传入的数据#xff08;Responsebody注解传入的单张数据表中的数据图表生成
图表统计查看部门人数统计这里实现的时单张表中的数据实现部门人数折线统计图展示。
script typetext/javascript// 利用AjAx来获取后台传入的数据Responsebody注解传入的var deptName[];var totalCount[];var maleCount[];var femaleCount[];$.ajax({type: get,async: false, //是否异步url:ctx /admin/sortHit,contentType: application/json;charsetUTF-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 ListDepartment 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 idgetDepartmentStatistics resultTypeDepartmentSELECT 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
headmeta http-equivContent-Type contenttext/html; charsetUTF-8link relstylesheet href${ctx }/css/font_eolqem241z66flxr.cssmediaall /link relstylesheet href${ctx }/css/list.css mediaall /link relstylesheet href${ctx }/layui/css/layui.css mediaall /link relstylesheet href${ctx }/css/font-awesome-4.7.0/css/font-awesome.min.css mediaalllink relstylesheet href${ctx }/css/public.css mediaalltitle部门人员统计图/titlescriptvar ctx ${ctx};/script
/head
body
div classlayui-containerdiv classlayui-carddiv classlayui-card-headeri classfa fa-line-chart icon/i报表统计/divdiv classlayui-card-bodydiv idmain styleheight:500px;width: 1100px; margin-left: 30px ;margin: 20px auto;/div/div/div
/div
/body
!-- 引入layui和echarts --
script typetext/javascript src${ctx }/layui/layui.js/script
script typetext/javascript src${ctx }/js/jquery-1.9.1.min.js/script
script typetext/javascript src${ctx }/js/Echarts/echarts.min.js/script
script typetext/javascript// 利用AjAx来获取后台传入的数据Responsebody注解传入的var deptName[];var totalCount[];var maleCount[];var femaleCount[];$.ajax({type: get,async: false, //是否异步url:ctx /admin/sortHit,contentType: application/json;charsetUTF-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 ListDepartment countByDept() {return adminService.countByDept();}service层ListDepartment countByDept();Overridepublic ListDepartment countByDept() {return adminDao.countByDept();}dao层ListDepartment countByDept();mapper文件 select idcountByDept resultTypecom.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*//selectjava类 private Integer id;private String deptName;private int count;private int totalCount;private int maleCount;private int femaleCount;
