SpringBoot+ECharts+Html 地图案例详解

这篇文章距离上次修改已过454天，其中的内容可能已经有所变动。

以下是一个简化的示例，展示如何在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方法设置了图表的配置项和数据，显示了一个简单的中国地图。

SpringBoot+ECharts+Html 地图案例详解

评论已关闭

推荐阅读