ECharts 高德地图扩展使用教程

最新推荐文章于 2025-04-23 07:27:09 发布

贡秀丽

最新推荐文章于 2025-04-23 07:27:09 发布

阅读量705

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00427/article/details/141206539

ECharts 高德地图扩展使用教程

项目地址:https://gitcode.com/gh_mirrors/ec/echarts-extension-amap

项目介绍

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>