昨晚熬夜搞那个地图大屏，差点没把我气死。真的，echarts的geo配置有时候挺反人类的。特别是那个文字位置，怎么调都不对劲。今天必须把这个坑填了，顺便给兄弟们避避雷。
咱们先说个最基础的。很多人直接用geo里的label，发现文字要么被地图挡住了，要么跑到屏幕外面去了。我一开始也是这么想的，觉得加个offset不就行了？结果试了半天，offset在geo里并不像series里那么好使。这里有个误区，很多人以为geo的label能随便动，其实它更多是控制地图本身的标签，比如省份名字。
如果你是想在地图上打点，然后显示文字，千万别去改geo的label。你要改的是series里的label。对，你没听错，是series。
我昨天就犯了这个错。我在geo里死磕那个formatter，结果文字死活飘在左上角。后来问了个老鸟，他笑我：“你那是地图标签，不是数据标签。” 瞬间悟了。
那怎么精准控制echart属性geo设置文字位置呢？其实核心在于“视觉欺骗”。
第一步，把geo里的label隐藏掉。直接设show: false。别问为什么，问就是省心。地图本身的文字太丑了，而且很难控制位置，尤其是那种不规则的省份形状，文字经常重叠。
第二步，重点来了。在series里，用symbol: 'circle'或者'image'。然后设置label。这时候，你可以用rich文本，或者简单的formatter。但是，最关键的是offset属性。
offset是个数组，[x, y]。x是横向偏移，y是纵向偏移。注意，y轴向下是正方向。所以如果你想让文字在点的上面，y得是负数。比如[-10, -20]。
我昨天调这个调得眼都花了。因为不同分辨率下，像素点的位置是不一样的。在1920x1080上看着完美的位置，拿到4k屏上可能就错位了。这时候，你得用百分比或者动态计算。
还有一个坑，就是label的formatter。如果你用函数返回html，记得加个style。比如：
formatter: function(params) {
return '
}
这样能稍微控制一下样式。但是，如果你想要更精确的位置，比如文字在点的右上方，且距离固定像素，这时候offset就不好使了，因为它是相对于symbol中心的。
这时候，你可以试试用graphic组件。对，就是echarts的graphic。你可以手动创建一个text元素，然后给它设置x和y坐标。这个坐标是相对于容器的，不是相对于series的。这样你就能做到像素级的精准控制。
我昨天就是用graphic搞定的。虽然代码多写了几行，但是效果是真的稳。不管你怎么缩放，文字都死死地钉在那个点上。
具体怎么做呢？先在option里加个graphic数组。然后定义一个text对象。
graphic: [{
type: 'text',
left: 'center',
top: 'center',
style: {
text: '我的位置',
fill: '#fff',
fontSize: 14
}
}]
这里的left和top可以是百分比，也可以是像素。如果你要动态绑定数据，就得用update或者setOption去改这个style里的text和位置。
这里有个小细节，很多人不知道，graphic里的坐标是相对于容器的左上角。所以如果你要定位到某个地图区域，你得先算出那个区域的中心点坐标。这有点麻烦，但很有效。
再说说echart属性geo设置文字位置时的常见错误。
一是z层级搞反了。有时候文字被地图色块挡住了。这时候，把series的zlevel设高一点，或者graphic的z设高一点。
二是字体太小。地图缩放后，文字看不清。这时候，可以用responsive配置，或者监听resize事件，动态调整fontSize。
三是颜色太淡。地图背景如果是深色的，文字一定要亮。最好加个阴影，或者描边。
我昨天就遇到个奇葩问题，文字在手机上显示正常，在电脑上却错位。查了半天，发现是CSS里有个margin影响了容器大小。echarts是根据容器大小算坐标的，容器一变，坐标全乱。所以，确保容器大小稳定很重要。
总结一下，想搞定echart属性geo设置文字位置，别死磕geo本身。
1. 隐藏geo的label。
2. 用series的label配合offset做基础定位。
3. 需要精准控制时，上graphic组件。
4. 注意z层级和字体样式。
5. 确保容器大小稳定。
这些经验都是我用头发换来的。希望兄弟们能少走弯路。地图可视化这东西，细节决定成败。调好一个点，看着真爽。
如果你还在为文字位置头疼，试试上面的方法。特别是graphic那个方案，虽然代码多一点，但一劳永逸。
最后提醒一句，别信网上的某些过时教程。echarts更新挺快的，有些配置早就变了。多查官方文档，多试错。
就这样吧，我去睡觉了。明天还得改需求。希望这篇文章能帮到你。如果觉得有用，点个赞再走呗。
本文关键词：echart属性geo设置文字位置
