Echarts之map地图隐藏港澳台等区域

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/zt_fucker/article/details/72468879

只是提供一种思路:
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; 
                                }

                            },
                        }
                    },
展开阅读全文

没有更多推荐了,返回首页