基于SpringBoot的请假系统,通过数据库的视图,使用echarts的堆叠柱状图可视化1-12月的请假次数统计
时间: 2024-02-11 10:06:52 浏览: 81
请假管理系统
3星 · 编辑精心推荐
好的,我了解了你的要求。基于SpringBoot的请假系统,你可以使用MySQL数据库创建一个视图,来汇总每个月的请假次数。下面是一个简单的视图创建语句:
```sql
CREATE VIEW leave_count AS
SELECT
MONTH(leave_date) AS month,
COUNT(*) AS count
FROM
leave_record
GROUP BY month;
```
这个视图将 leave_record 表中的请假记录按照月份分组,并统计每个月的请假次数。
接下来,你可以使用 Java 的 echarts 组件来实现堆叠柱状图的可视化。首先,你需要在项目中添加 echarts 的依赖:
```xml
<dependency>
<groupId>org.webjars</groupId>
<artifactId>echarts</artifactId>
<version>4.9.0</version>
</dependency>
```
然后,你可以编写一个 Spring MVC 的 Controller,来处理数据和渲染模板。下面是一个简单的 Controller 示例:
```java
@Controller
public class LeaveController {
@Autowired
private JdbcTemplate jdbcTemplate;
@GetMapping("/leave/chart")
public String leaveChart(Model model) {
List<Map<String, Object>> data = jdbcTemplate.queryForList("SELECT * FROM leave_count");
List<Integer> months = new ArrayList<>();
List<Integer> counts = new ArrayList<>();
for (Map<String, Object> row : data) {
months.add((Integer) row.get("month"));
counts.add(((Long) row.get("count")).intValue());
}
model.addAttribute("months", months);
model.addAttribute("counts", counts);
return "leave_chart";
}
}
```
这个 Controller 从数据库中读取 leave_count 视图的数据,并将每个月的请假次数存储在两个 ArrayList 中,分别是 months 和 counts。
最后,你需要编写一个 Thymeleaf 模板来渲染堆叠柱状图。下面是一个简单的模板示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Leave Chart</title>
<script th:src="@{/webjars/echarts/echarts.min.js}"></script>
</head>
<body>
<div id="chart" style="width: 800px; height: 600px;"></div>
<script>
var chart = echarts.init(document.getElementById('chart'));
var option = {
title: {
text: 'Leave Count',
subtext: 'by Month'
},
tooltip: {},
legend: {
data: ['Leave Count']
},
xAxis: {
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {},
series: [{
name: 'Leave Count',
type: 'bar',
stack: 'total',
data: /*[[${counts}]]*/
}]
};
chart.setOption(option);
</script>
</body>
</html>
```
这个模板使用 Thymeleaf 的语法将数据传递给 JavaScript,然后使用 echarts 组件来渲染堆叠柱状图。请注意,xAxis 的 data 属性指定了每个月的名称,而 series 的 data 属性则使用了 Thymeleaf 的表达式来引用 counts ArrayList。
这样,你就可以通过浏览器访问 /leave/chart 路径,查看堆叠柱状图了。
阅读全文