Echarts之map地圖隱藏港澳臺等區域

只是提供一種思路:
china.js中找到echarts.registerMap(‘china’, {中的”features”KEY值
形如:

{
            "id": "710000",
            "geometry": {
                "type": "MultiPolygon",
                "coordinates": [
                    ["@@°Ü¯Û", "@@ƛĴÕƊÉɼģºðʀ\\ƎsÆNŌÔĚäœnÜƤɊĂǀĆĴžĤNJŨxĚĮǂƺòƌ‚–âÔ®ĮXŦţƸZûЋƕƑGđ¨ĭMó·ęcëƝɉlÝƯֹÅŃ^Ó·śŃNjƏďíåɛGɉ™¿IċããF¥ĘWǬÏĶñÄ", "@@\\p|WoYG¿¥I†j@ž", "@@…¡‰@ˆV^RqˆBbAŒnTXe„†žQr™©C", "@@ÆEE—„kWqë Iœ"]
                ],
                "encodeOffsets": [
                    [
                        [122886, 24033],
                        [123335, 22980],
                        [122375, 24193],
                        [122518, 24117],
                        [124427, 22618]
                    ]
                ]
            },
            "properties": {
                "cp": [121, 24],
                "name": "臺灣",
                "childNum": 5
            }
        }

刪掉或者註釋掉。其他兩個地方同樣。
然後是南海諸島,數據中沒有展示的數據的話,恰巧又是自定義顯示的對應的數值出現在下方的時候,會出現NAN,影響美觀

南海自古以來就是中國的領土!!

思路一:隱藏不顯示南海諸島;打開echarts.js ,找到

 module.exports = function (geo) {
            if (geo.map === 'china') {
                geo.regions.push(new Region(
                    '南海諸島', points, geoCoord
                ));
            }
        };

將geo.map ===’china’ 改爲 ‘china1’即可(不推薦,原因見標題

思路二:後臺傳遞數據的時候將南海諸島手動的添加到json中,賦值爲0,然後echarts中進行判斷,達到同樣的效果,區域置灰,但是還會出現在地圖上。

itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            formatter:function(params){
                                console.log(params);
                                if(params.name == '南海諸島' || params.name == '臺灣' || params.name == '澳門' || params.name == '香港'){
                                    return " ";
                                }else{
                                return params.name+"\r\n"+params.value; 
                                }

                            },
                        }
                    },
發佈了154 篇原創文章 · 獲贊 41 · 訪問量 63萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章