echarts自定义geo显示名称和值，老鸟教你避开那些坑

做地图可视化，最烦的就是数据对不上号，或者名字显示得乱七八糟。

你是不是也遇到过这种情况？

明明数据是北京的，地图上却标成了河北，或者干脆不显示名字。

别急，今天我就把压箱底的干货掏出来。

干了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显示名称和值