地图（用ECharts绘制）
Posted So istes immer
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了地图（用ECharts绘制）相关的知识，希望对你有一定的参考价值。
地图帮助我们快速看出不同地理位置上数据的差异
地图图表的两种使用方式
①百度地图API ②矢量地图数据
基本实现
1.ECharts最基本的代码结构
2.准备中国地图的矢量数据
3.使用Ajax获取矢量地图数据
4.在Ajax的回调函数中注册地图矢量数据，名字为chinaMap
5.配置geo的type为'map'，map为'chinaMap'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="lib/echarts.min.js"></script>
<script src="lib/jquery-3.6.0.min.js"></script>
</head>
<body>
<div style="width: 600px;height: 400px;"></div>
<script>
var mCharts = echarts.init(document.querySelector('div'))
$.get('json/map/china.json', function(ret){
echarts.registerMap('chinaMap', ret)
var option = {
geo: {
type: 'map',
map: 'chinaMap', //这里的值要和上面registerMap的第一个参数一致
}
}
mCharts.setOption(option)
})
</script>
</body>
</html>
常用配置
缩放拖动 roam
名称显示 label
设置初始缩放比例 zoom
设置地图中心点 center
//其它代码和上面一样
<body>
<div style="width: 600px;height: 400px;border: 1px solid red;"></div>
<script>
var mCharts = echarts.init(document.querySelector('div'))
$.get('json/map/china.json', function(ret){
echarts.registerMap('chinaMap', ret)
var option = {
geo: {
type: 'map',
map: 'chinaMap', //这里的值要和上面registerMap的第一个参数一致
roam: true,
label: {
show: true,
},
zoom: 2,
center: [100,35]
}
}
mCharts.setOption(option)
})
</script>
</body>
常见效果
不同城市颜色不同
例子：显示中国各省的空气质量
1.显示基本的中国地图
2.城市的空气质量数据设置给series
3.将series下的数据和geo关联起来
4.结合visualMap使用
// 其它代码和上面一样
<script>
//注意：airData中的name要和china.json中的name一致
var airData = [
{ name: '北京市', value: 39.92 },
{ name: '天津市', value: 39.13 },
{ name: '河北省', value: 147 },
{ name: '山西省', value: 39 },
{ name: '内蒙古自治区', value: 58 },
{ name: '辽宁省', value: 50 },
{ name: '吉林省', value: 51 },
{ name: '黑龙江省', value: 114 },
{ name: '上海市', value: 31.22 },
{ name: '江苏省', value: 67 },
{ name: '浙江省', value: 84 },
{ name: '安徽省', value: 117 },
{ name: '福建省', value: 29 },
{ name: '江西省', value: 96 },
{ name: '山东省', value: 92 },
{ name: '河南省', value: 113 },
{ name: '湖北省', value: 273 },
{ name: '湖南省', value: 175 },
{ name: '广东省', value: 38 },
{ name: '广西壮族自治区', value: 59 },
{ name: '海南省', value: 54 },
{ name: '重庆市', value: 66 },
{ name: '四川省', value: 58 },
{ name: '贵州省', value: 71 },
{ name: '云南省', value: 25.04 },
{ name: '西藏自治区', value: 24 },
{ name: '陕西省', value: 61 },
{ name: '甘肃省', value: 99 },
{ name: '青海省', value: 57 },
{ name: '宁夏回族自治区', value: 52 },
{ name: '新疆维吾尔自治区', value: 84 },
{ name: '台湾省', value: 88 },
{ name: '香港特别行政区', value: 66 },
{ name: '澳门特别行政区', value: 77 },
{ name: '南海诸岛', value: 55 },
]
var mCharts = echarts.init(document.querySelector('div'))
$.get('json/map/china.json', function(ret){
echarts.registerMap('chinaMap', ret)
console.log(ret)
var option = {
geo: {
type: 'map',
map: 'chinaMap', //这里的值要和上面registerMap的第一个参数一致
roam: true,
label: {
show: true, //展示标签
},
zoom: 1.2,
},
series: [
{
data: airData,
geoIndex: 0, //将空气质量的数据和第0个geo配置关联在一起
type: 'map',
}
],
visualMap: {
min: 0,
max: 300,
inRange: {
color: ['white', 'red'] //控制颜色渐变的范围
},
calculable: true //出现滑块
}
}
mCharts.setOption(option)
})
</script>
地图和散点图结合
1.给series增加新的对象
2.准备好散点数据，设置给新对象的data
3.配置新对象的type:effectScatter
4.让散点图使用地图坐标系统
5.让涟漪的效果更明显 rippleEffect: { scale:10 }
//其它代码和上面一样
var scatterData = [
{
value: [114.298572, 30.584355]
}
]
var mCharts = echarts.init(document.querySelector('div'))
$.get('json/map/china.json', function(ret){
echarts.registerMap('chinaMap', ret)
console.log(ret)
var option = {
geo: {
type: 'map',
map: 'chinaMap',
roam: true,
label: {
show: true,
},
zoom: 1.2,
},
series: [
{
data: airData,
geoIndex: 0,
type: 'map',
},
{
type: 'effectScatter',
data: scatterData, //配置散点的坐标数据
coordinateSystem: 'geo', //指明散点使用的坐标系统
rippleEffect: {
scale: 10
}
}
],
visualMap: {
min: 0,
max: 300,
inRange: {
color: ['white', 'red']
},
calculable: true
}
}
mCharts.setOption(option)
}) 
以上是关于地图（用ECharts绘制）的主要内容，如果未能解决你的问题，请参考以下文章