Java ECharts 图表使用指南
ECharts 是一款由百度推出的开源可视化库，能够帮助开发者轻松创建各类美观的图表。结合 Java 后端技术，使用 ECharts 可以实现动态数据可视化效果。在这篇文章中，我们将探讨如何在 Java 中整合 ECharts，并通过代码示例来展示如何使用不同类型的图表，包括甘特图。
ECharts 简介
ECharts 是一个基于 JavaScript 的图表库，支持多种类型的图表，例如折线图、柱状图、饼图以及甘特图等。其主要特性包括：
- 丰富的图表类型
- 自适应的布局
- 可定制的交互效果
- 强大的数据绑定能力
技术栈
在本示例中，我们使用以下技术栈：
- Java（Spring Boot作为后端框架）
- ECharts（前端图表库）
- Thymeleaf（模板引擎）
项目结构
我们将创建一个简单的 Spring Boot 项目，其结构如下：
echtarts-demo
├── src
│ ├── main
│ │ ├── java
│ │ │ └── com
│ │ │ └── demo
│ │ │ └── DemoApplication.java
│ │ ├── resources
│ │ │ ├── templates
│ │ │ │ └── index.html
│ │ │ └── application.properties
└── pom.xml
代码示例
1. 创建 Spring Boot 应用
首先，我们创建一个基本的 Spring Boot 应用。在 DemoApplication.java 中：
package com.demo;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class DemoApplication {
public static void main(String[] args) {
SpringApplication.run(DemoApplication.class, args);
}
}
2. 配置 Thymeleaf
在 application.properties 文件中配置 Thymeleaf（可选）：
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
3. 创建控制器
接下来，我们需要创建一个控制器来处理请求。在 DemoController.java 中：
package com.demo;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class DemoController {
@GetMapping("/")
public String index(Model model) {
model.addAttribute("data", new int[]{10, 20, 30, 40});
return "index";
}
}
4. 创建前端页面
在 index.html 中，我们使用 ECharts 的基本语法创建图表：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts Demo</title>
<script src="
</head>
<body>
<h2>柱状图示例</h2>
<div id="barChart" style="width: 600px; height: 400px;"></div>
<script>
var myChart = echarts.init(document.getElementById('barChart'));
var options = {
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D']
},
yAxis: {
type: 'value'
},
series: [{
data: {{ data | toJson }},
type: 'bar'
}]
};
myChart.setOption(options);
</script>
<h2>甘特图示例</h2>
<div class="mermaid">
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2023-10-01, 30d
Another task :after a1 , 20d
section Another
Task in sec : 2023-10-15 , 12d
another task : 24d
</div>
</body>
</html>
5. 添加 Mermaid 支持
为了在网页上显示甘特图，我们需要在头部引入 Mermaid：
<script type="text/javascript" src="
<script>
mermaid.initialize({startOnLoad:true});
</script>
6. 项目构建与运行
在项目目录下，使用 Maven 命令构建并运行项目：
mvn clean install
mvn spring-boot:run
在浏览器中访问 http://localhost:8080，你将看到柱状图和甘特图的展示。
总结
通过这篇文章，我们成功地将 ECharts 与 Java 后端结合，展示了如何快速创建简单、直观的图表。柱状图和甘特图示例不仅展现了 ECharts 的灵活性，还利用了 Mermaid 来呈现项目管理中的任务进度。
ECharts 作为一种强大的可视化工具，适用于多种场景，特别是在数据分析、报表生成等领域。而结合 Java 后端，可以实现实时数据的可视化，让应用更加生动有趣。希望这篇文章能够帮助你理解 ECharts 的基本用法，并为你的项目添加图表功能。
