[TOC]
* * * * *
## `Echarts-China` 实现中国地图
> 这个Demo可以实现的内容是：
> 1.绘制基本的中国地图，标识每个省的颜色，放大和缩小及拖动；
> 2.可以在地图上标出某个坐标（经纬度），并用不同的样式显示；
> 3.点击地图上某个区域后会触发点击事件
### 1. 效果图
* * * * *
### 2. 需要的`js`包
~~~
jquery-2.1.4.min.js
echarts-4.0.2.min.js
如果要看错误提示等，可以下载源码包，2M多；压缩版的687KB
china.js
这里定义了绘制中国地图所需要的数据。
也可以调用百度的接口获取数据，但我此时不需要那些东西，就想要个简单的地图。
map-china.js
我自定义
~~~
* * * * *
### 3. `map-china.html`
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>map-china</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style type="text/css">
html,body{ margin: 0; padding: 0; font-size: 12px; }
.wrap{
padding: 2rem; margin: 2rem;
border: solid 1px grey; border-radius: 0.5rem;
}
</style>
</head>
<body>
<!-- 长度和宽度必须设置 -->
<div class="wrap" id="map" style="width: 500px; height: 375px;"></div>
<!-- required-begin -->
<script src="libs/jquery-2.1.4.min.js"></script>
<script src="libs/echarts-4.0.2.js"></script>
<script src="libs/china.js"></script>
<!-- required-end -->
<!-- 自定义配置-begin -->
<script src="js/map-china.js"></script>
<!-- 自定义配置-end -->
</body>
</html>
~~~
* * * * *
### 4. `map-china.js`
~~~
var wrap= document.getElementById('map'),
wrapW=wrap.getBoundingClientRect().width,
chart = echarts.init(wrap);
var option = {
backgroundColor: '#33a3dc',
title: {
show: true,
text: '中国地图显示',
subtext: '数据中心统计',
left: 'center',
textStyle: {
color: 'white',
fontSize: '16'
},
subtextStyle: {
color: 'smokewhite',
fontSize: '13'
}
},
tooltip: {
trigger: 'item'
},
geo: { //绘制基本的地图
map: 'china',
roam: true, //是否可手势或者鼠标滚轮放大缩小
left: 10, //如果为0可最大化的在画布上显示地图，但也可能边缘处有的被隐藏，所以留一定的距离
right: 10,
label: {
normal: {
show: true,
formatter: '{b}',
textStyle: {
color: 'red'
}
}
},
itemStyle: {
normal: {
borderColor: 'rgba(0, 0, 0, 0.2)'
}
},
emphasis: {
itemStyle: {
areaColor: '#ffe600' //鼠标移动到省份上或手指点击到省份上之后高亮的颜色
}
},
regions: [ //这里可自定义每一个省的颜色
{ name: '甘肃', itemStyle: { areaColor: '#faa755' } },
{ name: '新疆', itemStyle: { areaColor: '#ea66a6' } },
{ name: '浙江', itemStyle: { areaColor: 'green' } },
{ name: '北京', itemStyle: { areaColor: '#ffc20e' } }
],
},
series: [{ //如果要在中国地图这一坐标里的特定位置做标记，就需要这些配置
name: '我想标出的点',
type: 'effectScatter',
coordinateSystem: 'geo',
symbol: 'circle',
symbolSize: 15, //这里也是可以用一个函数的，根据数据来决定标记的大小
label: {
show: true,
position: 'bottom',
formatter: function(params) {
console.log(params)
let data=params.data;
return params.name + '-' + data.capital+'：'+data.man;
},
fontSize: 11,
color: 'white',
backgroundColor: 'rgba(242,50,18,1)',
borderRadius: 4,
padding: [1, 2, 1, 2]
},
tooltip: {
show: false,
},
itemStyle: {
normal: {
color: '#f4e925',
shadowBlur: 25,
}
},
data: [ //在地图按照坐标找出点
{name: '新疆', capital: '库尔勒', value: [86.06,41.68], man: '帆帆挖金' },
{name: '甘肃', capital: '兰州', value: [103.73,36.03,9], man: '未来建筑师' }
],
zlevel: 3
}]
};
chart.setOption(option);
chart.on('click', function(params) {
//这里可以根据参数的不同确定点击的区域，作出不同反应
});
~~~
