Echarts 地图配置 拖动缩放/初始化缩放比例/不同地区显示不同颜色/地图和散点图结合

特点

主要可以帮助我们从宏观的角度快速看出不同地理位置上的数据差异。

基本使用

百度地图API

需要申请百度地图ak


矢量地图

资料
需要准备矢量地图数据
注册矢量地图数据 echarts.registerMap('map',data)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="Echarts_kaifa.js"></script>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div>
        <h4> 地图 </h4>
        <div id="map" style="width: 600px;height:400px;"></div>
    </div>
    <hr>
    <script>
        let myEchart = echarts.init(document.querySelector("#map"))
        let mapKey = 'fmap'
        $.get('json/map/china.json',ret=>{
            // 注册地图的JSON数据
            echarts.registerMap(mapKey,ret)
            let option = {
                geo:{
                    type: 'map',
                    map: mapKey 
                }
            }
            myEchart.setOption(option)
        })
        
    </script>
</body>

</html>

在这里插入图片描述

常用配置

拖动缩放 roam

geo:{
    roam: true //拖动缩放
}

名称显示

geo:{
    label:{show:true}
}

初始化缩放比例

geo:{
    zoom:2 //设置初始化缩放比例
}

设置地图中心点

geo:{
    center:[87.617733, 43.792818] //地图中心点经纬度坐标
}

在这里插入图片描述

常见效果

显示某个区域

加载该区域的矢量地图数据

$.get('json/map/province/anhui.json',ret=>{})

// 其余和矢量地图示例一样

不同地区显示不同颜色

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="Echarts_kaifa.js"></script>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div>
        <h4> 地图 </h4>
        <div id="map" style="width: 600px;height:400px;"></div>
    </div>
    <hr>
    <script>
        let myEchart = echarts.init(document.querySelector("#map"))
        let mapKey = 'fmap'
        var airData = [{
                name: '北京',
                value: 39.92
            },
            {
                name: '天津',
                value: 39.13
            },
            {
                name: '上海',
                value: 31.22
            },
            {
                name: '重庆',
                value: 66
            },
            {
                name: '河北',
                value: 147
            },
            {
                name: '河南',
                value: 113
            },
            {
                name: '云南',
                value: 25.04
            },
            {
                name: '辽宁',
                value: 50
            },
            {
                name: '黑龙江',
                value: 114
            },
            {
                name: '湖南',
                value: 175
            },
            {
                name: '安徽',
                value: 117
            },
            {
                name: '山东',
                value: 92
            },
            {
                name: '新疆',
                value: 84
            },
            {
                name: '江苏',
                value: 67
            },
            {
                name: '浙江',
                value: 84
            },
            {
                name: '江西',
                value: 96
            },
            {
                name: '湖北',
                value: 273
            },
            {
                name: '广西',
                value: 59
            },
            {
                name: '甘肃',
                value: 99
            },
            {
                name: '山西',
                value: 39
            },
            {
                name: '内蒙古',
                value: 58
            },
            {
                name: '陕西',
                value: 61
            },
            {
                name: '吉林',
                value: 51
            },
            {
                name: '福建',
                value: 29
            },
            {
                name: '贵州',
                value: 71
            },
            {
                name: '广东',
                value: 38
            },
            {
                name: '青海',
                value: 57
            },
            {
                name: '西藏',
                value: 24
            },
            {
                name: '四川',
                value: 58
            },
            {
                name: '宁夏',
                value: 52
            },
            {
                name: '海南',
                value: 54
            },
            {
                name: '台湾',
                value: 88
            },
            {
                name: '香港',
                value: 66
            },
            {
                name: '澳门',
                value: 77
            },
            {
                name: '南海诸岛',
                value: 55
            }
        ]
        $.get('json/map/china.json', ret => {
            // 注册地图的JSON数据
            echarts.registerMap(mapKey, ret)
            let option = {
                geo: {
                    type: 'map',
                    map: mapKey,
                    roam: true //拖动缩放
                },
                series: [{
                    data: airData,
                    geoIndex: 0, // 将空气质量的数据和第0个geo配置关联在一起
                    type: 'map'
                }],
                visualMap: {
                    min: 0,
                    max: 300,
                    inRange: {
                        color: ['white', 'red'] // 控制颜色渐变的范围
                    },
                    calculable: true // 出现滑块
                }
            }
            myEchart.setOption(option)
        })
    </script>
</body>

</html>

在这里插入图片描述

地图和散点图结合

series: [{
	data: airData,
	geoIndex: 0, // 将空气质量的数据和第0个geo配置关联在一起
	type: 'map'
}, {
	type: 'effectScatter',
	
	rippleEffect: {
	  scale: 10
	},
	data: [
	  {value: [117.283042, 31.861119]}
	],
	coordinateSystem: 'geo', // 使用地图坐标
}],

在这里插入图片描述

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

tianmeng1999

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值