[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) {
//這里可以根據參數的不同確定點擊的區域，作出不同反應
});
~~~
