创建父实体类
package com.example.demo.pojo;
public class BaseCompanyDto {
// 表名
private String tableName;
// 关联的表名
private String partTableName;
}
普通实体类继承
public class Everything extends BaseCompanyDto {}
Dao层编写
List<Everything> CompanyList(Everything everything);
Mapper实现层[分组列表]
<select id="CompanyList" resultType="com.example.demo.pojo.Everything">
select (select ${partTableName}.dName
from ${partTableName}
where ${tableName}.deptld = ${partTableName}.deptNo) as DepartMent, count(${tableName}.eName) as NumberOfPeople
from ${tableName}
group by ${tableName}.deptld;
</select>
Controller调用Dao
@RequestMapping("/Company")
@ResponseBody
public Object Company() {
Map<Object, Object> map = new HashMap<>();
Everything company = new Everything();
company.setTableName("Staff");
company.setPartTableName("StaffDept");
map.put("code", 2);
map.put("count", staffDao.CompanyList(company).size());
map.put("$data", staffDao.CompanyList(company));
return map;
}
{
"code": 2,
"$data": [
{
"numberOfPeople": 1,
"departMent": "研发部"
},
{
"numberOfPeople": 2,
"departMent": "技术部"
},
{
"numberOfPeople": 2,
"departMent": "市场部"
}
],
"count": 3
}
前端ECharts处理
- 代码展示
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4.5.0/dist/echarts.min.js"></script>
<script type="text/javascript" src="${path}/js/jquery.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style=" 600px;height:400px;"></div>
<script type="text/javascript">
// 人数
var list01 = [];
// 部门
var list02 = [];
var urls = "http://localhost:8888/staff/Company";
searchEverything(urls);
function searchEverything(urls) {
$.ajax({
url: urls,
type: "POST",
data: null, // JSON.stringify()
async: false, //代表同步操作，默认为异步
contentType: "application/json",
success: function (data) {
//
$.each(data.$data, function (index, value) {
list01.push(value.numberOfPeople);
});
$.each(data.$data, function (index, value) {
list02.push(value.departMent);
});
}
});
}
// 利用dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据 图标的数据可以从后台构造 然后传回前台
var option = {
title: {
text: 'ECharts 部门人数统计'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: list02
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: list01
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
- 如图
