使用 ECharts 创建柱形图与 Java 后台数据连接
ECharts 是一个开源的图表库，广泛用于实现各种可视化图形，柱形图是其中最基础也是最常用的图表类型之一。本文将展示如何使用 ECharts 创建柱形图，并通过 Java 后台获取数据。
一、ECharts 概述
ECharts 是一个基于 JavaScript 的可视化图表库，可以提供丰富的图表类型，如柱形图、折线图、饼图等。它具有简单易用的 API 和高效的性能，可以方便地与后端数据进行连接。
二、后端数据准备
为了展示 ECharts 的柱形图，我们需要一个简单的 Java 后台服务来提供数据。以下是一个使用 Spring Boot 的示例，我们将实现一个 REST API 来返回柱形图需要的数据。
1. 创建 Java 后台服务
使用 Spring Boot 创建一个项目，接着在项目中创建一个 REST 控制器来返回数据：
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.Arrays;
import java.util.List;
import java.util.Map;
@RestController
public class ChartDataController {
@GetMapping("/api/data")
public List<Map<String, Object>> getChartData() {
return Arrays.asList(
Map.of("name", "A", "value", 120),
Map.of("name", "B", "value", 200),
Map.of("name", "C", "value", 150),
Map.of("name", "D", "value", 80),
Map.of("name", "E", "value", 70),
Map.of("name", "F", "value", 110)
);
}
}
2. 启动服务
确保在 application.properties 文件中配置好端口，然后启动 Spring Boot 应用。
三、前端集成 ECharts
1. HTML 页面
创建一个 HTML 文件，在其中引入 ECharts 库，并编写 JS 代码向 Java 后台请求数据绘制柱形图。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts Example</title>
<script src="
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script>
// 初始化图表
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
// 从后台获取数据
fetch('/api/data')
.then(response => response.json())
.then(data => {
const names = data.map(item => item.name);
const values = data.map(item => item.value);
// 配置图表
const option = {
title: {
text: '柱形图示例'
},
tooltip: {},
xAxis: {
data: names
},
yAxis: {},
series: [{
name: '数量',
type: 'bar',
data: values
}]
};
// 使用制定的配置项和数据显示图表
myChart.setOption(option);
});
</script>
</body>
</html>
2. 运行前端页面
在本地服务器上运行此 HTML 文件，访问页面，即可看到从后端获取的数据动态生成的柱形图。
四、可视化示例与分析
旅程图（Journey）
接下来，展示一个旅程图的示例，表示一个旅行的不同阶段。
journey
title 旅行路线示例
section 从出发到达目的地
起点: 5: 经历愉快的时间
中途休息: 3: 享受阳光
到达目的地: 4: 快乐结束上海
甘特图（Gantt）
另外我们创建一个甘特图，展示项目计划的时间进度。
gantt
title 项目甘特图示例
dateFormat YYYY-MM-DD
section 阶段一
任务一 :a1, 2023-01-01, 30d
任务二 :after a1 , 20d
section 阶段二
任务三 :2023-02-01 , 12d
任务四 : 24d
五、总结
通过以上步骤，我们成功地使用 ECharts 创建了一个柱形图，并通过 Java 后台传递数据。ECharts 的灵活性和强大的功能使得数据可视化变得简单和高效。同时，结合 Java 的强大后台服务能力，可为大规模的数据分析与展示提供有力支持。
希望本文对您使用 ECharts 进行数据可视化有所帮助。如有任何问题或想要了解更多内容，请随时留言。
