搞 ECharts 的兄弟，有没有被那个 geo 标签的位置搞崩溃过？明明数据是对的，地图也渲染出来了，结果那些文字标签要么叠在一起像马赛克，要么直接飘到地图外面去了，看着就心烦。我干了七年这行，这种坑踩得比路还多。今天不整那些虚头巴脑的理论，直接说怎么把标签位置调得舒服点，让老板和客户挑不出毛病。

首先，你得明白，ECharts 里的 geo 组件，它本身是个地图容器，而标签（label）是附着在上面的。很多人一上来就死磕 series 里的 label 属性，发现怎么调都不对劲。为啥？因为 geo 有自己的 label 配置，series 也有自己的。这两者有时候会打架。特别是当你用了 roam: true 开启缩放平移后，标签的位置如果不跟着动，那体验简直烂透了。

先说最基础的。如果你想让省份或者城市的名字显示在地图块的正中间，别去算坐标。直接设置 label: { show: true, position: 'inside' }。这招最稳。但是，如果地图块太小，比如某些直辖市或者小岛，文字挤在一起根本看不清。这时候，你可以试试 position: 'top' 或者 'bottom'，让文字跑到地图块的上方或下方。不过要注意，这可能会导致标签重叠，尤其是密集的城市群。

这时候，你就得用到 formatter 了。别怕麻烦，写个简单的函数。比如，你可以判断一下地图块的面积，如果面积太小，就把标签放在外面，并用引线连起来。虽然 ECharts 原生不支持自动引线，但你可以用 graphic 组件或者自定义 series 来模拟。当然，这有点高级，新手可以先放放。

还有个坑，就是标签的样式。默认情况下，标签是黑色的，背景透明。在深色地图上，这没问题。但如果你用了浅色地图，或者地图本身颜色很杂，标签就看不见了。这时候，给 label 加个 backgroundColor，或者设置 color: '#fff'，能解决 80% 的可视性问题。别小看这个细节，用户体验就差在这点上。

再说说动态调整。很多项目要求地图缩放时，标签也要跟着变。比如缩小时，只显示省级标签；放大时，显示市级。这怎么做？用 visualMap 或者 dataZoom 的 end 事件。监听缩放级别，然后动态修改 series 的 data。比如，当 zoom > 1.5 时，把市级数据加进去，同时把省级标签隐藏。这逻辑不难，但得细心。

另外，标签的位置有时候会被地图的 roam 属性影响。如果你设置了 roam: true，标签默认是跟随地图移动的。但有些时候，你希望标签固定在屏幕的某个位置，比如右上角的图例旁边。这时候，你得用 tooltip 或者自定义的 div 层，而不是直接用 geo 的 label。geo 的 label 是绑定在地图坐标上的，没法直接固定在屏幕像素位置。这点很多人搞混，导致调了半天没效果。

最后，提醒一下，标签的字体大小也很关键。别用默认值，太小看不清，太大占地方。根据地图的缩放级别动态调整 fontSize，是个好习惯。比如，zoom 越大，fontSize 可以稍微小一点，因为地图块变大了，能容纳更多文字。反之，zoom 小的时候，字体要放大，确保可读性。

总之，调 echarts geo 标签的位置，不是靠猜，是靠试。多看看文档，多试试 position 的各种值，配合 formatter 做点自定义逻辑。别怕麻烦，用户看到的每一处细节，都决定了他们对产品的印象。希望这几招能帮到你，别再被标签位置折磨了。

本文关键词：echarts geo 标签的位置