select * from ${tableName}

创建父实体类

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;
}

访问：http://localhost:8888/XXX/Company

{
    "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>

如图