springboot整合echarts
时间: 2023-09-05 11:08:34 浏览: 104
Spring Boot 是一个非常流行的 Java Web 开发框架,而 ECharts 是一个非常流行的可视化图表库。Spring Boot 可以轻松地整合 ECharts,以下是整合的步骤:
1. 在 pom.xml 中添加 ECharts 的依赖:
```xml
<dependency>
<groupId>org.webjars</groupId>
<artifactId>echarts</artifactId>
<version>{echarts-version}</version>
</dependency>
```
2. 创建一个 Spring Boot 控制器类,用于渲染 ECharts 图表:
```java
@Controller
public class EChartsController {
@GetMapping("/echarts")
public String echarts(Model model) {
// 构造图表数据
List<Integer> data = Arrays.asList(1, 2, 3, 4, 5);
// 将数据传递给模板引擎
model.addAttribute("data", data);
// 返回模板名称
return "echarts";
}
}
```
3. 创建一个 Thymeleaf 模板文件,用于渲染 ECharts 图表:
```html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>ECharts Demo</title>
<!-- 引入 ECharts 的 CSS 文件 -->
<link rel="stylesheet" th:href="@{/webjars/echarts/{echarts-version}/echarts.min.css}"/>
</head>
<body>
<!-- 渲染 ECharts 图表 -->
<div id="chart"></div>
<!-- 引入 ECharts 的 JS 文件 -->
<script th:src="@{/webjars/echarts/{echarts-version}/echarts.min.js}"></script>
<script th:inline="javascript">
// 获取数据
var data = [[${data}]];
// 初始化图表
var chart = echarts.init(document.getElementById('chart'));
chart.setOption({
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {
type: 'value'
},
series: [{
data: data,
type: 'bar'
}]
});
</script>
</body>
</html>
```
以上就是 Spring Boot 整合 ECharts 的基本步骤。在实际开发中,还需要根据具体需求进行一些配置和修改。
阅读全文