1.先看效果圖

2.說一下整體的思路

        因為地圖暫無內外邊框分開設定邊框的屬性，所以我們可以利用地理極座標元件，採用--雙層地圖-覆蓋--思想，底層的地圖設定自己需要的邊框顏色和加陰影與否，頂層的地圖設定內邊框的屬性和加陰影與否，最後將頂層的覆蓋到底層上。

      PS:需要注意的是兩層地圖都要設定禁止縮放和平移(roam:false【預設就是禁止的】)，不然的話會導致地圖的各種偏移(有興趣的可以自己試試”不正常”的效果)

3.就說到這裡，接下來看程式碼

①：第一步，先匯入地圖所需要的json或js檔案（此處用的是beijing.js）,緊接著匯入繪製圖表的echarts檔案（此處用的是4.0.4版本的echarts.js）

<script type="text/javascript"  src="echarts-4.0.4/echarts.js"></script>
<script type="text/javascript"  src="map/beijing.js"></script>

②：第二步，編寫具體繪製圖表的程式碼(程式碼有詳細備註，方便理解；使用過程中可根據需要刪除註釋)

<script type="text/javascript">
 option = {
        geo:{
		map : '北京', //為保證圖表的準確性，這裡的一些屬性需要和下面的一致
		aspectScale : 0.75, 
		zoom : 1.2,
		left : '8%',  
		itemStyle : {//外邊框(底層地圖)的一些屬性
			borderColor : '#fff',
			borderWidth :6,
			shadowBlur:10,
			shadowColor: '#fff',
		 },
    	   },
	   series : [{
		name : '北京各區',
		type : 'map',//type必須宣告為 map 說明該圖示為echarts 中map型別
		map : '北京', //這裡需要特別注意。如果是中國地圖，map值為china，如果為各省市則為中文。這裡用北京
		aspectScale : 0.75, //長寬比. default: 0.75
		zoom : 1.2,
		selectedMode :'single',//選中模式，表示是否支援多個選中，預設關閉，字串取值可選'single'表示單選，或者'multiple'表示多選。
		left : '8%', //圖表距離左邊的位置
		label : {
			normal : {
				show : true,
			},
		},
		itemStyle : {
			normal : {//未選中的正常狀態
				shadowBlur:1, //圖形陰影的模糊大小
				shadowColor: 'rgba(0,0,0,1)',     //陰影顏色
				areaColor : 'rgba(23,161,250,1)', //區域顏色
				label : { //標籤(豐臺區、密雲區....字型)的屬性
					show : true,
					textStyle : {
						fontSize : 14,
					}
				},
			},
			emphasis : {// 也是選中樣式
				shadowBlur:4,
				shadowColor: '#85E3FF',
				shadowOffsetX:5, //不同軸上的陰影
				shadowOffsetY:5, //體現凹凸效果
				borderWidth :2, //邊框的寬度
				borderColor : '#85E3FF',//邊框的顏色
				areaColor : 'rgba(23,161,250,1)',
				label : {
					show : true,
					textStyle : {
						color : '#fff'
					}
				}
			}
		},
		data : [
		    {
			name : '東城區',
			value : 1800,
		    }, {
		        name : '西城區',
		        value : 1700,
		    }, {
			name : '朝陽區',
			value : 1600,
		    }, {
			name : '豐臺區',
			value : 1400,
		    }, {
			name : '石景山區',
			value : 1200,
		    }, {
			name : '海淀區',
		        value : 1000,
		    }, {
			name : '門頭溝區',
			value : 800,
		    }, {
			name : '房山區',
			value : 600,
		    }, {
			name : '通州區',
			value : 400,
		    }, {
			name : '順義區',
			value : 200,
		    }, {
			name : '昌平區',
			value : 100,
		    }, {
			name : '大興區',
			value : 300,
		    }, {
			name : '懷柔區',
			value : 500,
		    }, {
		    	name : '平谷區',
			value : 700,
		    }, {
			name : '密雲區',
			value : 900,
			selected:true,
		    }, {
			name : '延慶區',
			value : 1100,
		    } ]
	    }]
	};  

</script>
 

PS：標籤位置的改變

    因為地圖的位置和大小的不同可能會導致標籤的位置不合理，此時可以去beijing.js檔案中通過修改經(上下)緯(左右)度來改變標籤的位置