ECharts学习--地图（一）

最新推荐文章于 2024-08-05 05:00:00 发布

有一种陪伴叫做jay

最新推荐文章于 2024-08-05 05:00:00 发布

阅读量276

点赞数

分类专栏： ECharts 文章标签：数据可视化

本文链接：https://blog.csdn.net/weixin_46198692/article/details/110382777

版权

本文介绍了ECharts中地图的基本实现，包括使用百度地图API和矢量地图的方法，并详细讲解了如何显示特定省份地图，涉及加载矢量数据、在echarts全局对象中注册地图、设置geo配置、缩放及定位等步骤。

摘要由CSDN通过智能技术生成

（一）地图的基本实现和常见配置

地图图标的使用方式：

（1）百度地图Api

（2）矢量地图

<div style="width: 700px;height: 500px;"></div>
<script src="./lib/echarts.min.js"></script>
<script src="./lib/jquery.min.js"></script> 
<script>
    var mChart = echarts.init(document.querySelector('div'));
    $.get('json/map/china.json', function (ret) { // 引入中国矢量地图的json文件 跨域使用vscode中Live Server
        // ret就是中国各个省份的矢量地图
        // console.log(ret);
        echarts.registerMap('chinaMap', ret)  // 注册地图矢量数据
        var option = {
                geo: {
                    type: 'map',
                    map: 'chinaMap'，
                    roam : true, // 设置允许鼠标的缩放与拖动 
                    label : {
                        show : true