做数据可视化大屏的朋友十有八九都撞上过这个痛点用 Echarts 渲染中国地图右下角永远蹲着一个“南海诸岛”的小窗。单独看没毛病这是地图数据的完整性体现可一旦你的大屏空间紧张这玩意儿就会跟图例、指标卡、滚动列表抢位置叠在一起乱成一团。网上一搜问的人不少但真正把原理和坑讲透的文章不多。这篇文章就把我实际项目中反复验证过的几种隐藏方案、数据层面的处理思路、还有布局修正的细节一次性说清楚。先说结论隐藏南海诸岛最干净、最可控的办法是在注册地图数据之前把 GeoJSON 里对应的 feature 拿掉再用处理后的数据重新 registerMap。其他的方案要么会留下交互隐患要么在分辨率适配时给你挖坑。为什么这么说下面展开讲。1. 先说清楚右下角这个东西到底是什么1.1 echarts 中国地图里的“小窗”不是独立组件很多人第一次遇到这个需求时会下意识地在 Echarts 的配置项里找类似showNanHai: false这样的开关翻遍官方文档也找不到。原因很简单南海诸岛并不是一个独立的组件而是中国地图 GeoJSON 数据里的一个普通区域和广东省、黑龙江省在数据层面是平级关系。Echarts 拿到中国地图的 GeoJSON 并调用registerMap(china, geoJson)之后会按照数据里的每一个 feature 去绘制多边形。南海诸岛这个 feature 的边界特别靠南如果按照真实坐标系画出来会跟中国地图主体拉开很长一段距离。所以 Echarts 做了一个特殊处理地图数据里给南海诸岛的坐标做了一个“偏移缩放”把它单独放在右下角形成一个区别于地图主体的视觉效果。这个设计本身是为了保证地图的完整性——从数据上讲中国版图就该包含这些岛屿但从视觉上讲它又确实占了一块独立的区域而且不属于任何省级行政区。这就导致一个很尴尬的情况它既不是省又不完全等同于飞地官方也没有单独提供一个“展示/隐藏”的配置项。在 Echarts 5 的 geo 组件里你能操作的是regions可以用它给某个区域单独设置样式但没法通过一个简单的开关直接让这块区域消失。1.2 隐藏需求主要来自两类场景我自己经历过的项目里要隐藏南海诸岛的无非两种原因一种是布局冲突。大屏左下角或右下角经常放图例、轮播表格、实时告警信息南海诸岛这个小窗要不了多大地方但恰好就会跟这些组件叠在一起。尤其在大屏适配到带鱼屏、异形屏时Echarts 的坐标系会自动缩放小窗的位置并不是绝对固定的叠得很难看。另一种是风格统一。有些项目用的是自己裁剪过轮廓的中国地图素材或者地图数据本身就不带南海诸岛。这时候业务方会希望所有图表风格保持一致默认的“主图加小窗”反而显得突兀。不管哪种原因最终你需要的都不是“让这个区域颜色变透明”这么简单而是“从底层数据里把它去掉让地图的绘制范围、中心点、缩放级别都跟着正常走”。这就引出了后面要说的方案。2. 隐藏方案的横向对比别一上来就乱试2.1 方案一修改 GeoJSON 数据重注册地图推荐这是我在生产环境里最常用、也最推荐的路子。思路很简单注册地图前把 GeoJSON 的features数组里properties.name为“南海诸岛”的那一项过滤掉再把过滤后的对象传给registerMap。这个方案的好处是干净彻底——数据层面就没有这个区域Echarts 不会绘制它不会分配布局空间也不会触发任何 hover 或 tooltip 事件。而且它不会影响地图主体因为features数组里每个省份都是独立的一个 feature删掉其中一个不影响其他省份的经纬度坐标。坏处也有你必须有 GeoJSON 数据的处理权限。如果项目里用的是 CDN 上现成的 JS 文件直接引入并注册你就得先拿到数据对象在注入 Echarts 之前做一次过滤。另外过滤后地图的可视范围会发生变化因为 Echarts 在geo组件里如果不手动设置center和zoom它会根据剩余 feature 的包围盒自动计算一个视野范围。少了南海诸岛之后地图整体的包围盒往北移动了一些所以在某些容器比例下地图会感觉“变大了”或者“偏移了”这个后面单独讲。2.2 方案二用geo.regions做透明化处理不彻底Echarts 的geo组件支持regions配置可以针对特定区域设置单独样式。于是很多人会这样写geo: { map: china, regions: [{ name: 南海诸岛, itemStyle: { areaColor: transparent, borderColor: transparent }, label: { show: false }, emphasis: { itemStyle: { areaColor: transparent, borderColor: transparent }, label: { show: false } }, select: { disabled: true } }] }写完发现右下角确实看不见那块区域了视觉上达到了目的。但问题在于这个区域虽然透明它依然占据布局空间。在 Echarts 内部地图主区域和南海诸岛的相对锚定关系没有变化它只是“看不见”了实际的绘制范围和交互热区都还在。这就带来两个隐患。第一如果你在大屏上配了点击事件鼠标挪到右下角原本小窗的位置还是可能触发地图区域的 hover 或点击行为用户会觉得很奇怪——“那里明明什么都没有鼠标怎么就变手型了”。第二如果后续需要把地图整体缩放或平移透明区域的存在会影响 Echarts 对地图包围盒的计算某些版本里会导致 zoom 和 center 的表现跟预期不一致。所以这套方案我只建议用来做“临时救场”比如排期太紧没时间处理数据先透明掉应付一下视觉问题。真要上生产环境还是老老实实改数据。2.3 方案三用 CSS 定位遮罩盖住土办法谨慎还有人会直接在 echarts 容器上方叠一个定位的div背景色跟大屏底色一致把右下角小窗盖住。这个做法在小屏、固定分辨率的原型演示里能用但换个分辨率、浏览器缩放、大屏拼接后位置很容易错位而且会遮挡掉一部分正常地图区域实用性很差。我自己只在一种场景下用过这个方案当时项目用的是高德底图叠加 echarts 散点图地图底图是实时瓦片不是 GeoJSON注册地图那套逻辑走不通又急着出演示效果才临时用 CSS 遮了一下。后来还是换了矢量地图数据彻底解决。所以我的结论很明确能走数据层解决的事就不要用样式层和布局层去硬刚。3. 实操落地过滤数据、重注册、调布局的完整流程3.1 获取地图数据并过滤指定区域首先要拿到中国地图的 GeoJSON。常规来源有几个npm 包如echarts/map/json/china.jsonEcharts 4 时代自带5 之后官方不再内置地图数据、阿里云 DataV 的 GeoJSON API、第三方仓库如echarts-maps、或者自己用 QGIS 等工具导出的数据。不管来源是哪里数据结构是统一的大概是这样的{ type: FeatureCollection, features: [ { type: Feature, properties: { name: 北京市, cp: [116.4, 39.9] }, geometry: { type: MultiPolygon, coordinates: [...] } }, { type: Feature, properties: { name: 南海诸岛, cp: [108, 8] }, geometry: { type: MultiPolygon, coordinates: [...] } } ] }过滤代码非常直观// 假设 geoJson 已经加载完成 const filteredGeoJson { ...geoJson, features: geoJson.features.filter( feature feature.properties.name ! 南海诸岛 ) };注意这里的name要从数据源里核对不同来源的数据字段名可能有细微差异。有的数据源叫properties.name有的可能是properties.NAME。如果你是从 DataV 拉的数据字段一般小写如果是自己用工具裁剪的一定要先console.log看一眼数据结构再写过滤条件。过滤完之后重新注册地图echarts.registerMap(china, filteredGeoJson);如果你项目里有多处用到中国地图建议把这个逻辑封装成一个公共方法比如getChinaMap()统一返回过滤后的数据避免每个页面都重复处理一遍。我就是这么干的后面换地图数据源或者调整过滤规则时只要改一个地方。3.2 隐藏之后地图布局修正center 和 zoom这一步是被问得最多的。很多人把南海诸岛过滤掉之后发现地图整体变得比之前大了一圈或者位置往下掉、往左偏了跟图例对不齐。原因前面说了Echarts 的 geo 组件如果没有手动指定center和zoom会根据当前地图数据的包围盒自动计算可视范围。地图数据的包围盒变了自动计算出来的视野自然就变了。解决办法有两种。一种是手动固定geo.center和geo.zoomgeo: { map: china, center: [104.5, 36.5], zoom: 1.0 }这个方案需要试几次才能找到合适的值而且在不同屏幕比例下表现不完全一致。另一种更稳妥的办法是用过滤后的数据自己计算中心点和缩放级别。GeoJSON 的每个 feature 都有自己的坐标范围把所有省份的坐标合并算出整体包围盒然后取包围盒的中心作为 center再根据容器的宽高算出 zoom。这个逻辑不算复杂但为了省事大多数人还是直接手调参数。我自己习惯的做法是先用一个初始配置渲染然后在ready事件里读取 Echarts 自动计算出来的center和zoom再把这两个值写死回配置里。这样不用自己推公式实际效果也是最准的。大致代码如下const chart echarts.init(dom); chart.setOption({ geo: { map: china }, series: [] }); // 等渲染完成后读取当前视野参数 setTimeout(() { const model chart.getModel().getComponent(geo); console.log(model.getCenter(), model.getZoom()); }, 500);这个setTimeout有时候不太靠得住如果你想做得更严谨可以在chart.on(finished)事件里获取。拿到参数后后续再setOption时直接把center和zoom写死地图就不会因为数据过滤而变化位置了。3.3 大屏场景下的容器适配经验在实际大屏项目里地图一般放在中间的板块两边会放数据面板。如果你过滤了南海诸岛却没调整布局很可能会出现一种情况地图主体被拉得非常大左右两侧省份被切掉一部分。这是因为去掉了右下角小窗后地图的宽度占比变大了。这种场景下我一般不会单纯依赖zoom去缩放而是配合layoutCenter和layoutSize来限制地图的绘制区域。geo: { map: china, layoutCenter: [50%, 50%], layoutSize: 70% }layoutCenter是 geo 组件的中心点layoutSize是地图的展示尺寸比例。设置之后不管容器长宽比如何地图都固定在容器正中且最大尺寸不超过你设定的比例。这个方案比单独调center和zoom更贴合大屏场景因为它天然适配不同分辨率和缩放比例。有一点要提醒layoutCenter和center是互斥的用了前者后者会被忽略。别两个都写调了半天发现没生效。4. 常见问题与排查技巧实录4.1 过滤后地图变成空白这个问题我在新手期踩过。过滤代码写对了数据打印也没问题但地图渲染出来是空白或只显示几个点。排查下来往往是两个原因。第一个原因是数据引用问题。如果你直接修改了原对象比如geoJson.features.splice(x, 1)而原对象又被其他地方引用可能会导致 Echarts 在注册时拿到一个已经变化的引用渲染异常。解决方法是像我前面代码里写的用展开运算符创建一个新对象不要在原对象上直接修改。第二个原因是注册时机问题。registerMap必须在setOption之前调用而且如果setOption里用了lazyUpdate之类的方法注册可能没来得及生效就渲染了。我的习惯是地图数据加载完成后先注册再初始化图表最后 setOption顺序不能乱。4.2 地图整体偏移或缩放过度这个问题的根源就是前面说的包围盒变化。遇到过最夸张的一次是在一个大屏项目里过滤完南海诸岛后地图直接跑到了容器左上方右下角空了一大块。当时就是因为没手动指定 center 和 zoom完全依赖 Echarts 自动计算。排查思路很简单先打开控制台在选项里临时加一行console.log输出当前 geo 组件的_center和_zoom对比过滤前后的值你就能看到差异有多大。对比完就明白了不是代码写错是视野参数需要重新设定。4.3 过滤后 tooltip 或标签仍然出现有朋友遇到过这样的情况明明数据都过滤了地图渲染也正常但鼠标滑过南海诸岛原本的位置时还是出现了一个气泡显示“南海诸岛不存在”之类的占位信息。这就说明数据源里除了features数组还有别的地方引用了这个区域。常见的情况是项目里用了series-map的data给每个省级区域配值data里写了一个name: 南海诸岛的空数据项。Echarts 在渲染时会拿data里的 name 跟地图区域的 name 匹配找不到对应 feature 时也不会报错但部分版本会生成一个空的气泡。排查办法是把series.data里所有跟南海诸岛相关的项删掉或者统一用regions配合name去控制。4.4 新版 Echarts 5 与旧版的差异Echarts 5 之后官方不再默认内置中国地图数据需要自己引入 GeoJSON。这意味着网上很多老教程里的写法——直接import echarts/map/js/china.js然后map: china——在新版本里已经行不通了。如果你还在用旧写法首先会发现控制台报错地图未注册。另外 Echarts 5 对地图的渲染和交互逻辑做了一些调整regions的配置项行为和 4.x 略有差异。如果你是从旧版本升级过来的项目建议把隐藏方案统一改成“修改 GeoJSON 数据”这一条路省得在不同版本里调试regions的不兼容行为。4.5 多个地图实例同时存在时的数据隔离如果你的大屏上不止一个中国地图而是多个图表都引用了中国地图那就要注意一个细节registerMap是按名称全局注册的。也就是说你在 A 页面注册了一个不带南海诸岛的“china”B 页面如果再注册一个带南海诸岛的“china”A 页面已经渲染的图表不会自动变化但后续新初始化的图表就会用最后一次注册的数据。这就是个雷。我的做法是项目里统一约定使用同一种地图数据所有用到“china”的页面都走同一个过滤逻辑不允许有的过滤器有的不滤。为了避免误操作我干脆把过滤逻辑封装公共函数连地图数据源也走统一入口其他地方不直接引入 GeoJSON。5. 几个容易忽略的隐藏坑5.1 坐标点标注也会跟着消失有一种业务场景地图上要根据经纬度打点比如分布在各城市的门店这时散点图的 data 里可能也会有一条南海诸岛的坐标数据。你只过滤了 GeoJSON没过滤散点数据那么地图上还是会孤零零地出现一个点悬在右下角。排查时留意一下series的类型如果是effectScatter或scatter检查一下数据里是不是包含了这个区域。5.2 地图主题和视觉映射要重新核对过滤掉南海诸岛后如果项目用了visualMap给不同省份映射颜色省份数量没有变所以不会出现样式错乱的问题。但如果你的视觉映射组件是根据包围盒大小自动布局的右下角少了东西后visualMap的位置可能显得有点空需要微调。5.3 不要忽略“hover 高亮”和“选中”的残留效果我前面提过用regions透明化方案最烦的就是 hover 和选中仍然生效。但改数据方案虽然彻底解决了有一点要注意如果你在geo.regions里针对某个省份写了select: { disabled: true }而那个省份的name在过滤后的数据里依然存在这个配置照样生效别搞混了。5.4 数据更新后的状态管理大屏项目经常要定时刷新数据。如果你每轮刷新都重新setOption而setOption里又传了新的订单量、销售额之类这时候地图数据是不会被重新注册的。有人会误以为每次刷新都该重新registerMap一次其实没必要反而会因为频繁注册导致性能问题。地图数据固定后注册一次即可后续更新只改 series 部分就行。6. 我的最终建议做了几个大屏项目之后我的态度很明确不要再纠结有没有官方隐藏开关直接从 GeoJSON 层面动手。这套方案能治本代码量也极小一次性把数据、样式、交互、布局的问题全部解决掉。如果你是新项目建议从搭建时就把地图数据统一放到一个公共模块里过滤逻辑写在数据获取层。如果是老项目维护遇到右下角小窗问题也别急着用 CSS 去盖花十几分钟把地图数据拉出来看一遍改一行过滤代码比什么土办法都省心。最后再分享一个小技巧过滤完南海诸岛后如果地图位置还是跟你设想的不一样别死磕center和zoom的数值先把layoutCenter: [50%, 50%]和layoutSize设上让地图先“稳”在容器中央再对个别偏差做微调。这样调参速度快很多踩过几次之后你就明白我的意思了。