---

前言

最近接了一個外包的項目，其中有個需求是這樣的，
需要展示一個中國的統計地圖，要求每個省市區都是不一樣的顏色，必須特別區分開。以及隱藏南海部分。
看了Echats相關文檔，發現有類似的demo，但不是特別符合要求。於是自己仔細讀文檔研究。找到解決問題於是分享一下。

正文

廢話不多少，直接上代碼

方法1 （在數據中直接添加樣式）

需要后台配合的data數據結構如下:

data: { {name: '北京',value: 11,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}}, {name: '天津',value: 22,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}}, {name: '上海',value: 33,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}}, {name: '重慶',value: 44,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}}, {name: '河北',value: 55,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}}, {name: '河南',value: 66,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}}, {name: '雲南',value: 77,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}}, {name: '遼寧',value: 88,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}}, {name: '湖南',value: 99,itemStyle:{normal:{areaColor:#fff,label:{show:false}}}}, {name: '南海諸島',value: 99,itemStyle:{normal:{opacity:0,label:{show:false}}}}, .......... } // areaColor 就是省的自定義顏色值 // opacity 就是某個省透明，一般有業務需求要求隱藏南海諸島（雖然業務有要求，但是一定要記住南海永遠是中國的一部分，南海永遠是中國的一部分，南海永遠是中國的一部分，重要的事情說三遍！） 

前端配置信息

option = { ....... 省略大堆配置 series: [{ type: 'map', name: 'tips名字', data: data }] } 

方法2 （在配置中添加樣式，數據中定義顏色）

需要后台配合的data數據結構如下:

data: { {"name": "北京", "value": 34, "count": 500, "color": "#f00"}, {"name": "天津", "value": 33, "count": 300, "color": "#ff0"}, {"name": "上海", "value": 32, "count": 50, "color": "#f0f"}, {"name": "重慶", "value": 31, "count": 50, "color": "#0f0"}, {"name": "河北", "value": 30, "count": 120, "color": "#00f"}, ........ } 

前端配置信息

// data需要進行一次循環,填入設置。 var customSettings = []; data.forEach(function (item, index) { customSettings.push({  name: item.name,  itemStyle: {  areaColor: item.color,  color: item.color } }) }) // 南海單獨設置，push 進數組 customSettings.push( {  name: '南海諸島',  itemStyle: {  normal: {  opacity: 0,  label: {  show: false } } } } ) option = { ....... 省略大堆配置  geo: {  map: 'china',  top: 0,  bottom: 0,  regions: customSettings // 設置單獨的樣式。 }  series: [{  type: 'map',  name: 'tips名字',  data: data }] } 

總結

這是我目前發現的兩種方案，各有優劣， 第一種需要后台支持，返回你需要的數據，但是返回的數據中攜帶的數據量大很多。 不過也可以返回到前段自己循環組裝數據。跟第二種方法差不多的循環方式，都可以