本文关键词：echarts geo left
说实话，刚接触 ECharts 的时候，我差点被那个 geo 组件的布局给逼疯。真的，不是夸张。那时候我觉得自己挺懂 JS 的，结果在地图上放个散点图，死活对不齐。心里那个火啊，蹭蹭往上冒，恨不得把键盘砸了。今天我就把这坑填了，顺便吐吐槽，给那些还在为 echarts geo left 属性抓狂的兄弟姐妹们一点真实建议。
事情是这样的，上周接了个活儿，要做个全国疫情分布图。老板要求很高，地图必须居中，而且要在地图左边留出一块地方放图例和数据面板。我心想，简单啊，setOption 里加个 geo: { left: '10%' } 不就完了？结果一渲染，好家伙，地图直接贴到了屏幕最左边，右边空出一大截，丑得我想哭。这时候我才意识到，原来所谓的“居中”和“布局”，根本不是你想的那样简单粗暴。
很多人不知道，ECharts 的布局逻辑其实有点“傲娇”。当你设置了 geo 的 left 属性，它并不是简单地从左边空出多少距离，而是基于整个图表容器的坐标系。如果你没给 series 里的 scatter 或 effectScatter 指定正确的 coordinateSystem 为 'geo'，或者你的 geo 区域本身没定义好 right 和 bottom，那这个 left 设置就跟摆设没两样。
我记得有个真实案例，一个做物流追踪的朋友，他的地图总是偏右。查了半天代码，最后发现是因为他在 option 里写了 grid 组件，而 grid 和 geo 在布局上是互斥的或者说是有优先级的。grid 默认占满全屏，geo 如果没显式指定大小，就会和 grid 打架。这时候，你光调 echarts geo left 是没用的，你得先告诉 ECharts，这个地图到底要占多大地方。
我的经验是，别用百分比，除非你非常清楚容器的宽高比。用像素值或者明确的数值范围更稳妥。比如，我现在的做法是：
`javascript
geo: {
map: 'china',
left: '10%', // 这里才是关键，但前提是...
right: '10%', // 给右边也留点空间，不然地图会挤压变形
top: '10%',
bottom: '10%',
roam: true,
zoom: 1.2
}
`
你看，光设 left 是不够的，你得形成一个闭环。左10%，右10%，上10%，下10%，这样地图才会稳稳地待在中间。这时候，你再往左边加一个 grid 组件放数据，或者直接在 geo 外面套一个 div 做布局，效果立马就不一样了。
我还发现一个坑，就是地图缩放后的位置偏移。很多兄弟问我，为什么放大地图后，散点就飘出去了？这是因为你的散点坐标是经纬度，而 geo 的视口变化了。这时候，你得确保你的 series 里的 itemStyle 和 emphasis 都设置正确，并且最好给 geo 加上 roam: true，允许用户拖拽，这样用户体验才好。别搞那些静态的，用户现在都懒，不动动手指，谁看你那死板的图？
再说说情绪。我真的很讨厌那些教程里只贴代码不解释原理的博主。你告诉我 left 是左边距，那左边距是相对于什么的？相对于容器？相对于父元素？还是相对于地图中心？这种模糊的概念最害人了。我花了三天时间，看了无数篇文档，试了无数种组合，才总结出这个“四边留白法”。
还有，别迷信 echarts geo left 能解决所有布局问题。如果你的需求很复杂，比如左边要放柱状图，右边要放饼图，中间放地图，那你最好直接用 flex 布局或者 grid 布局在 HTML 层面把容器分好，然后在 ECharts 里只负责渲染。别试图在一个 option 里搞定所有事情，那会让你的代码变成一团乱麻，后期维护起来想死的心都有。
最后，送大家一个调试小技巧。打开浏览器的开发者工具，检查你的图表容器，看看它的实际宽高是多少。有时候，你的 left 设置看起来没问题，但因为容器被其他元素挤压，导致实际渲染区域变了，结果就是地图错位。这时候，检查一下 CSS，确保你的 ECharts 容器有足够的空间。
总之，做地图可视化，耐心比技术更重要。别急躁，一步步调试，从简单的 geo 配置开始，加上 left, right, top, bottom，看看效果，再调整。你会发现，那个曾经让你头疼的 echarts geo left，其实也没那么难缠。只要你摸清了它的脾气，它就能乖乖听你指挥，画出让你老板满意的图表。
希望这篇带着我血泪教训的文章，能帮你少走弯路。如果还有问题，欢迎在评论区吐槽，我们一起骂 ECharts 文档写得不够清楚（开玩笑的，文档其实挺全的，是我们没仔细看）。加油，打工人！
