Echarts加载地图的三种方式

最新推荐文章于 2025-02-06 10:26:57 发布

wml00000

最新推荐文章于 2025-02-06 10:26:57 发布

阅读量9.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：随笔文章标签： Echarts 加载地图

本文链接：https://blog.youkuaiyun.com/wml00000/article/details/84566180

随笔专栏收录该内容

46 篇文章

订阅专栏

本文详细介绍了在ECharts中加载地图数据的三种方法：直接引入JS文件、通过AJAX加载JSON文件以及集成百度地图。展示了具体示例代码，帮助开发者快速掌握地图组件的配置与使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考地址：http://www.echartsjs.com/option.html#geo.map

ECharts 中提供了两种格式的地图数据，一种是可以直接 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。还有一种是 JSON 文件，需要通过 AJAX 异步加载后手动注册。

下面是两种类型的使用示例：

JavaScript 引入示例：

<script src="echarts.js"></script>
<script src="map/js/china.js"></script>
<script>
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
    series: [{
        type: 'map',
        map: 'china'
    }]
});
</script>

JSON 引入示例：

$.get('map/json/china.json', function (chinaJson) {
    echarts.registerMap('china', chinaJson);
    var chart = echarts.init(document.getElementById('main'));
    chart.setOption({
        series: [{
            type: 'map',
            map: 'china'
        }]
    });
});

ECharts 使用 geoJSON 格式的数据作为地图的轮廓。

另外，其实是有第三种方式的，Echarts还可以加载百度地图，参考示例：http://gallery.echartsjs.com/editor.html?c=effectScatter-bmap

http://www.echartsjs.com/faq.html#baidu-map