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; 
                                }

                            },
                        }
                    },
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值