javaweb怎么使用echart
时间: 2025-01-15 17:14:22 浏览: 6
如何在 Java Web 项目中集成 ECharts 实现数据可视化
创建 Maven 工程
为了方便管理依赖项,建议创建一个基于 Maven 的工程。这有助于简化第三方库的引入。
添加所需依赖
在 pom.xml
文件中添加 Spring Boot 和 Jackson 库的相关依赖:
<dependencies>
<!-- Spring Boot Starter -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- JSON处理 -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
</dependency>
</dependencies>
编写 Controller 层代码
编写用于返回 JSON 数据的服务端接口,在此示例中假设要显示柱状图的数据[^1]。
@RestController
public class ChartController {
@GetMapping("/getData")
public Map<String, Object> getData() {
List<Integer> xAxisData = Arrays.asList(2017, 2018, 2019);
List<Double> yAxisData = Arrays.asList(3.4, 5.6, 7.8);
Map<String, Object> result = new HashMap<>();
result.put("xAxis", xAxisData);
result.put("yAxis", yAxisData);
return result;
}
}
配置前端页面
接下来配置 HTML 页面加载 ECharts 并调用上述服务获取数据渲染图表。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts Example</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
fetch('/getData')
.then(response => response.json())
.then(data => {
option = {
title: { text: '简单折线图' },
tooltip: {},
xAxis: { data: data.xAxis },
yAxis: {},
series: [{
name: '销量',
type: 'line',
data: data.yAxis,
}]
};
myChart.setOption(option);
});
</script>
</body>
</html>
以上即是在 Java Web 中利用 ECharts 进行数据可视化的基础流程介绍。