做数据可视化的兄弟，谁没被 Echart 的 geo 组件折磨过？尤其是那个标注，密密麻麻的 label，看着就头疼。我见过太多人，拿到个地图数据，直接扔进代码里，结果跑出来一片黑，或者全是字，根本看不清哪是哪。今天不整那些虚头巴脑的理论，就聊聊怎么把 Echart 标注 geo 做得既清晰又好看，顺便把那些坑给你填了。

首先，你得明白，geo 组件本身是个容器，它负责底图的渲染。而标注，通常是用 series 里的 type: 'effectScatter' 或者 'scatter' 来配合 visualMap 或者 label 属性来实现的。很多人一上来就狂堆数据，忘了清理。比如，你手里有一千个点，全标出来，那屏幕能给你糊满。这时候，你得做筛选。只标重点，或者用热度图代替散点。我上次帮一个客户做全国物流监控，他非要每个中转站都标名字，结果手机上一看，全是白点，啥也看不见。后来我把 label 的 show 属性设成只在 hover 时显示，平时只显示一个动态的波纹效果，这才像样。

再说说样式。默认的蓝色圆圈，太丑了，太官方。你得改。比如，把 symbol 改成 'circle'，symbolSize 根据数据大小动态调整。这里有个小细节，很多人不知道 symbolSize 可以是个函数，这样能做出层次感。比如，北京上海的数据量大，点就大，小城市点小。这样视觉上就有主次了。还有颜色，别用默认的渐变色，太刺眼。用低饱和度的莫兰迪色系，或者根据数据值映射到不同的色阶。比如，用 visualMap 组件，把数据映射到颜色，这样一眼就能看出哪里是热点。

然后是位置偏移。geo 的坐标是经纬度，但有时候点太密，label 会重叠。这时候，你得用 label 的 formatter 或者 position 属性来微调。比如，把 label 放在点的右上方，或者用 lineStyle 画条线连过去。这样虽然多画了几条线，但清晰多了。我有个朋友，做城市人口分布，他把 label 直接放在点上，结果重叠得厉害，最后不得不写个简单的算法，判断重叠后自动偏移，虽然代码多了点，但效果确实好。

还有性能问题。如果你数据量大，比如超过一万条，直接渲染会卡。这时候，得用 WebGL 渲染，或者分批加载。Echart 4 之后支持 WebGL，但配置稍微复杂点。你得把 series 的 rendering 设为 'webgl'，然后确保你的浏览器支持。如果不行，那就只能前端做分页或者聚合。聚合是个好办法，比如把相邻的几个点合并成一个，显示总和。这样既减少了渲染压力，又突出了整体趋势。

最后，也是最重要的，测试。别只在 Chrome 上看，得在 Safari、Firefox 甚至手机上试试。不同浏览器的渲染引擎不一样，有时候在 Chrome 上好好的，在 Safari 上就错位了。我上次就栽在这个坑里，改了半天的 CSS，最后发现是 Safari 的 bug。所以，多测几遍，总没错。

说了这么多，其实核心就一点：别为了炫技而炫技，数据可视化是为了让人看懂，不是为了让人头晕。把重点突出，把细节隐藏，把交互做好，这才是正道。

如果你还在为 Echart 标注 geo 的效果发愁，或者不知道怎么做动态效果，或者性能优化搞不定，别硬扛。你可以直接找我聊聊。我不卖课，不推销，就是帮你看看代码，给点建议。毕竟，这行干久了，见过的坑多了，有些经验，真能帮你省不少时间。

本文关键词：Echart 标注 geo