做地图可视化，最烦的就是数据对不上号，或者名字显示得乱七八糟。
你是不是也遇到过这种情况？
明明数据是北京的，地图上却标成了河北，或者干脆不显示名字。
别急，今天我就把压箱底的干货掏出来。
干了6年geo，这种坑我踩过无数回。
咱们直接上硬货，不整那些虚头巴脑的理论。
核心思路其实就两点：
一是拿到正确的geo json数据，二是用formatter函数去定制显示。
第一步，搞定geo json。
很多新手直接用网上随便找的json，结果发现坐标系不对，或者省份名字是英文的。
这绝对不行。
建议去阿里云DataV或者高德地图开放平台下载最新的geo json。
一定要确认里面的name字段是你想要的中文名称。
比如“北京市”而不是“Beijing”。
这一步错了，后面全白搭。
第二步，配置series里的geo组件。
在echarts的配置项里，找到series数组。
添加一个type为'geo'的系列。
重点来了，这里要用到visualMap或者直接用markPoint。
但我推荐用markPoint，因为更灵活，能精确控制每个点显示什么。
在markPoint的data数组里，你可以指定每个点的name和value。
name就是你要显示在地图上的文字。
value就是那个数值。
第三步，关键中的关键，使用formatter。
光有name和value还不够，你得告诉echarts怎么把它们拼在一起。
这时候就要用到formatter函数了。
它支持字符串模板，比如'{b}: {c}'。
{b}代表name，{c}代表value。
你可以自定义样式，比如加个换行符，或者改变颜色。
这里有个小细节，很多人不知道formatter还能接收回调函数。
这样你就能根据value的大小，动态改变显示的文字颜色或大小。
比如，超过100万的标红，否则标绿。
这样做出来的地图，才叫专业，才叫有“人味”。
第四步，处理坐标映射。
有时候你的数据只有城市名，没有经纬度。
这时候需要做一个映射表。
把城市名对应到geo json里的name。
然后用geo.coord方法获取经纬度。
再把这个经纬度传给markPoint。
这样就能确保点的位置是准确的。
别小看这一步，很多地图点飘在半空，就是坐标没对上。
第五步，调试和优化。
写完后，一定要在真机上测试。
手机屏幕小，文字太大会遮挡地图。
建议把字体设小一点，或者只在hover的时候显示详细信息。
平时只显示一个关键数值。
我有个客户，之前用的地图密密麻麻全是字，用户根本看不清。
后来我帮他优化了formatter，只在大城市显示名称，小城市只显示点。
结果用户停留时长提升了30%。
这就是细节的力量。
最后，再啰嗦一句。
echarts自定义geo显示名称和值，不仅仅是改个样式那么简单。
它涉及到数据的清洗、坐标的转换、样式的定制。
每一个环节都不能马虎。
希望这篇分享能帮你少走弯路。
如果还有问题，欢迎在评论区留言，咱们一起探讨。
记住，代码是冷的，但做出来的东西要有温度。
别为了炫技而炫技，要为用户体验着想。
这才是我们做技术的初心。
好了，今天就聊到这。
记得点赞收藏，不然下次找不到。
咱们下期见。
本文关键词：echarts自定义geo显示名称和值
