Echarts 中國地圖各個省市自治區自定義顏色

HoChine發表於2018-04-26
Echarts地圖

前言

最近接了一個外包的專案，其中有個需求是這樣的，
需要展示一箇中國的統計地圖，要求每個省市區都是不一樣的顏色，必須特別區分開。以及隱藏南海部分。
看了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
    }]
}

總結

這是我目前發現的兩種方案，各有優劣， 第一種需要後臺支援，返回你需要的資料，但是返回的資料中攜帶的資料量大很多。 不過也可以返回到前段自己迴圈組裝資料。跟第二種方法差不多的迴圈方式，都可以。

相關文章