矢量地图的实现步骤
echarts最基本的代码结构：
引入js文件，DOM容器，初始化对象，设置option准备中国的矢量地图json文件，放到json/map/的目录下
china.json
json文件下载地址：DataV.GeoAtlas地理小工具系列 (aliyun.com)使用Ajax获取china.json
$.get('./json/map/china.json',(chinaJson)=>{ })
- 在回调函数中往echarts全局对象注册地图的json数据
echarts.registerMap('chinaMap',chinaJson)
- 在geo下设置
type:'map',
map:'chinaMap'
image.png
常用配置
-
缩放拖动 roam
roam:true
-
名称显示 label
label: {
show: true
}
image.png
-
初始缩放比例 zoom
zoom: 1.2
-
地图中心点 center
image.png
示例代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>echarts地图</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="lib/echarts.js"></script>
</head>
<body>
<!-- 步骤2：准备一个呈现图标的盒子 -->
<div style="width: 1000px; height: 600px; border:1px solid red;"></div>
<script>
let mCharts = echarts.init(document.querySelector('div'));
$.get('./json/map/china.json',(chinaJson)=>{
console.log(chinaJson);
echarts.registerMap('chinaMap',chinaJson)
let option = {
geo: {
type: 'map',
map: 'chinaMap', //chinaMap需要和registerMap中的第一个参数保持一致
roam: true, // 设置允许缩放以及拖动的效果
label: {
show: true //展示标签
},
zoom: 1.2, //设置初始化的缩放比例
center: [87.617733,43.792818] //设置地图中心点的坐标 （图为将新疆设置为地图中心点）
}
}
mCharts.setOption(option)
})
</script>
</body>
</html>
常见效果
-
显示某个区域：
- 加载该区域的矢量地图数据
- 通过registerMap注册到echarts全局对象中
- 指明geo配置下的type和map属性
- 通过zoom放大该区域
-
通过center定位中心点
image.png
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>echarts地图常见效果</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="lib/echarts.js"></script>
</head>
<body>
<!-- 步骤2：准备一个呈现图标的盒子 -->
<div style="width: 1000px; height: 600px; border:1px solid red;"></div>
<script>
let mCharts = echarts.init(document.querySelector('div'));
$.get('./json/map/shanxi.json',(chinaJson)=>{
console.log(chinaJson);
echarts.registerMap('chinaMap',chinaJson)
let option = {
geo: {
type: 'map',
map: 'chinaMap', //chinaMap需要和registerMap中的第一个参数保持一致
roam: true, // 设置允许缩放以及拖动的效果
label: {
show: true //展示标签
},
zoom: 1.2, //设置初始化的缩放比例
//center: [87.617733,43.792818] //设置地图中心点的坐标 （图为将新疆设置为地图中心点）
}
}
mCharts.setOption(option)
})
</script>
</body>
</html>
-
不同城市颜色不同
1.显示基本的中国地图
2.城市的空气质量数据设置给series
3.将series下的数据和geo关联起来
4.结合visualMap配合使用
image.png
示例代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>echarts地图</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="lib/echarts.js"></script>
</head>
<body>
<!-- 步骤2：准备一个呈现图标的盒子 -->
<div style="width: 1000px; height: 600px; border:1px solid red;"></div>
<script>
let mCharts = echarts.init(document.querySelector('div'));
let airData = [
{name:'北京市',value:39.93},
{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.23},
{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},
{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},
]
$.get('./json/map/china.json',(chinaJson)=>{
console.log(chinaJson);
echarts.registerMap('chinaMap',chinaJson)
let option = {
geo: {
type: 'map',
map: 'chinaMap', //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>
</body>
</html>
-
地图和散点图结合
1.给series下增加新的对象
2.准备好散点数据，设置给新对象的data （坐标信息）
3.配置新对象的type
type: effectScatter
4.让散点图使用地图坐标系统
coordinateSystem:'geo'
5.让涟漪的效果增加明显
rippleEffect:{
scale: 10
}
image.png
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>echarts地图</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="lib/echarts.js"></script>
</head>
<body>
<!-- 步骤2：准备一个呈现图标的盒子 -->
<div style="width: 1000px; height: 600px; border:1px solid red;"></div>
<script>
let mCharts = echarts.init(document.querySelector('div'));
let scatterData = [
{
value: [112.549248, 37.857014]
},
{
value:[117.283042, 31.86119]
}
]
let airData = [
{name:'北京市',value:39.93},
{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.23},
{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},
{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},
]
$.get('./json/map/china.json',(chinaJson)=>{
console.log(chinaJson);
echarts.registerMap('chinaMap',chinaJson)
let option = {
geo: {
type: 'map',
map: 'chinaMap', //chinaMap需要和registerMap中的第一个参数保持一致
roam: true, // 设置允许缩放以及拖动的效果
label: {
show: true //展示标签
},
zoom: 1.2, //设置初始化的缩放比例
},
series: [
{
data: airData,
geoIndex: 0, //将空气质量的数据和第0个geo配置关联在一起
type:'map',
},
{
type: 'effectScatter',
data: scatterData, //配置散点的坐标数据
coordinateSystem:'geo', //指明散点使用的坐标系统 geo的坐标系统
rippleEffect:{
scale: 10
}
}
],
visualMap:{
min:0,
max:300,
inRange:{
color:['white', 'red'], //控制颜色渐变的范围
},
calculable: true //出现滑块
}
}
mCharts.setOption(option)
})
</script>
</body>
</html>
地图特点
- 地图主要可以帮助我们从宏观的角度快速看出不同地理位置上数据的差异
