做数据大屏的兄弟，谁没被echarts的默认地图字体坑过？
那天晚上十点，客户突然说要把地图上的地名看清楚点。我一看，好家伙，那字体细得像蚂蚁腿，放在4K大屏上，离远点根本看不清。
我第一反应是改fontSize。设成14，还是小。设成18，字间距挤在一起，像一团乱麻。
这就是很多新手踩的坑。以为改个数字就行，其实geo地图的字体渲染逻辑，跟普通图表完全不一样。
如果你也在为echarts geo地图字体头疼，听我一句劝，别瞎试了。
先说个最容易被忽视的问题：字体文件。
很多人直接在代码里写fontFamily: 'Arial'或者'Microsoft YaHei'。结果在有些服务器上，或者某些浏览器里，直接显示成宋体，甚至乱码。
这不是bug，是环境差异。
我的经验是，一定要用webfont，或者确保服务器上有对应的字体文件。别偷懒，直接引用本地ttf文件，虽然麻烦点，但稳。
再说说样式。
geo地图的label样式，默认是关闭的。你得在series里把label.show设为true。
这时候，你会发现字体颜色跟背景混在一起。
这时候就要用到textStyle。
这里有个细节，很多人不知道。textStyle里的color，如果不设，它会继承全局颜色。但如果你设了rich属性，那就要小心了，rich里的样式优先级更高，有时候会覆盖掉你设置的color。
我上次就栽在这个坑里。rich里写了个背景色，结果文字被盖住了，找了半天才发现是层级问题。
还有，字体大小不是越大越好。
地图上的地名，太多太密。如果你把字体设到20px，那地图就变成一张白底黑字的表格，毫无美感可言。
我的做法是，根据缩放级别动态调整。
在dataZoom事件里，监听缩放状态。
缩小时，字体变小，甚至隐藏部分次要地名。
放大时，字体变大，显示更多细节。
这样用户体验才好。不然用户一直缩放，字体忽大忽小，看着眼晕。
另外，关于echarts geo地图字体 的抗锯齿问题。
在某些高分屏上，字体边缘会有毛刺。
这时候，试试在CSS里加一句-webkit-font-smoothing: antialiased;。
虽然这是CSS属性，但能影响echarts渲染出来的文字清晰度。亲测有效，比你在JS里调参数管用。
还有，别忽略textStyle里的lineHeight。
默认行高有时候会导致文字上下重叠，特别是当你要显示多行标签的时候。
设一个合适的lineHeight，比如1.5倍，文字看起来就舒服多了。
最后，也是最重要的一点。
别指望echarts默认配置能解决所有问题。
每个项目的需求都不一样。
有的要科技感，字体得锐利；有的要亲和力，字体得圆润。
你得自己调。
多试几次，看看效果。
别怕麻烦，数据大屏是给人看的，不是给机器跑的。
字看不清楚，再炫酷的动画也是白搭。
如果你还在为echarts geo地图字体 的显示效果发愁，或者调出来的样式总是不对劲，别硬扛。
有时候，换个思路，或者找个懂行的人问问，能省不少时间。
我这儿有些常用的配置模板，还有踩过坑后的优化方案。
如果你需要，可以聊聊。
毕竟，代码是死的，人是活的。
把字调舒服了，客户满意了，你也能早点下班。
这才是正经事。
别再去百度上搜那些千篇一律的教程了，大部分都过时了。
现在的浏览器环境，字体渲染机制都在变。
你得跟上节奏。
实在搞不定，就找个靠谱的同行交流一下。
别不好意思，大家都是从坑里爬出来的。
互相帮衬，才能走得更远。
希望这点经验，能帮你省下几个熬夜的夜晚。
毕竟，头发比代码重要。
