【亲测免费】 ECharts 高德地图扩展使用教程

2026-01-17 09:29:32作者：羿妍玫Ivan

项目介绍

echarts-extension-amap 是一个为 Apache ECharts 提供的高德地图扩展，允许用户在高德地图上展示各种可视化图表，如散点图、线图、热力图和饼图等。该项目通过集成高德地图的API，使得ECharts的图表可以直接在地图上进行展示，极大地丰富了数据可视化的表现形式。

项目快速启动

安装

首先，通过 npm 安装 echarts-extension-amap：

npm install echarts-extension-amap --save

引入和初始化

在你的项目中引入 ECharts 和高德地图扩展：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 高德地图扩展示例</title>
    <!-- 引入高德地图API -->
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=你的高德地图API密钥"></script>
    <!-- 引入ECharts主文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <!-- 引入ECharts高德地图扩展 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts-extension-amap/dist/echarts-extension-amap.min.js"></script>
</head>
<body>
    <div id="map" style="width: 100%; height: 600px;"></div>
    <script type="text/javascript">
        // 初始化地图
        var map = new AMap.Map('map', {
            zoom: 4,
            center: [105, 34]
        });

        // 初始化ECharts实例
        var myChart = echarts.init(document.getElementById('map'));

        // 配置项和数据
        var option = {
            series: [{
                type: 'scatter',
                coordinateSystem: 'amap',
                data: [[120, 30]] // 示例数据
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>