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

文章目录特点基本使用百度地图API矢量地图常用配置拖动缩放 roam名称显示初始化缩放比例设置地图中心点常见效果显示某个区域不同地区显示不同颜色地图和散点图结合特点基本使用百度地图API需要申请百度地图ak矢量地图资料需要准备矢量地图数据注册矢量地图数据 echarts.registerMap('map',data)<!DOCTYPE html><html lang="en"&g

tianmeng1999

6432人浏览 · 2020-10-10 18:02:20

tianmeng1999 · 2020-10-10 18:02:20 发布

文章目录

特点

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

基本使用

百度地图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', // 使用地图坐标
}],