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="width: 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>

如图

posted on 2021-03-02 17:32 (Play) 阅读(733) 评论(0) 编辑收藏举报

随笔档案

创建父实体类

普通实体类继承

Dao层编写

Mapper实现层[分组列表]

Controller调用Dao

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

前端ECharts处理

常用链接

我的标签

积分与排名

随笔档案

相册

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	package com.example.demo.pojo;

	public class BaseCompanyDto {
	// 表名
	private String tableName;
	// 关联的表名
	private String partTableName;
	}

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

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

	<!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="width: 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>