SpringBoot+ECharts+Html 地图案例详解
以下是一个简化的示例，展示如何在Spring Boot项目中集成ECharts生成地图，并展示如何在HTML页面中加载和显示地图：
// 在Spring Boot的Controller中返回HTML页面和相关的JS资源
@Controller
public class MapController {
@GetMapping("/map")
public String showMap(Model model) {
// 假设已经有了ECharts库和中国地图数据的引用
model.addAttribute("echarts", "https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js");
model.addAttribute("chinaMap", "chinaMapData"); // 假设已经有了中国地图的GeoJSON数据
return "map";
}
}
<!-- map.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>中国地图示例</title>
<!-- 引入ECharts库 -->
<script src="${echarts}"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
</head>
<body>
<div id="map" style="width: 600px; height: 400px;"></div>
<script type="text/javascript">
// 初始化ECharts实例
var myChart = echarts.init(document.getElementById('map'));
// 指定图表的配置项和数据
var option = {
series: [
{
type: 'map',
map: 'china' // 指定使用中国地图
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>在这个例子中，我们创建了一个名为MapController的Spring Controller，它提供了一个映射/map，该映射返回一个名为map.html的HTML页面。在HTML页面中，我们通过<script>标签引入了ECharts库和中国地图的数据。然后，我们使用ECharts的init方法初始化了一个图表实例，并通过setOption方法设置了图表的配置项和数据，显示了一个简单的中国地图。
评论已关闭