echarts geo四周留白
昨天深夜两点，我盯着屏幕上的地图发呆。那该死的空白，就像我发际线后退的速度一样，怎么调都调不好。真的，做前端这行，最搞心态的不是代码报错，而是这种“看着不对劲，又说不出哪不对”的视觉瑕疵。
很多人遇到 echarts geo四周留白 这个问题，第一反应就是去改 option 里的 series 或者 grid。改来改去，地图要么挤在左上角，要么被切掉一半。我也踩过这个坑，甚至为了调这个，差点把显示器砸了（开玩笑的，显示器挺贵的）。
今天不整那些虚头巴脑的理论，直接上干货。我是怎么把这个“顽固分子”搞定的？
第一步，先搞清楚你的坐标系。
很多人不知道，echarts 的 geo 组件和普通的 scatter 或 line 不一样。它有自己的坐标系，而且这个坐标系是跟着地图数据走的。如果你直接设 grid，根本没用，因为 grid 管不了 geo 内部的缩放和平移。
我当时也是懵的，直到我看了一下 echarts 的官方文档里关于 geo 的说明。它有个 roam 属性，控制的是用户交互时的缩放和平移，而不是初始状态的布局。所以，别在 grid 上死磕了，那是徒劳。
第二步，利用 left, right, top, bottom 属性“暴力”挤占空间。
这是最笨，但也最有效的方法。你想想，地图是个矩形容器，你告诉它左边留多少，右边留多少，它自然就居中了吗？不一定，但它会听话。
我在代码里这么写：
`javascript
geo: {
map: 'china',
left: '10%',
right: '10%',
top: '10%',
bottom: '10%',
roam: true,
zoom: 1.2 // 稍微放大一点，填补空白
}
`
注意，这里的 left 和 right 不是指地图距离容器边缘的距离，而是指地图在容器中的相对位置。如果你发现地图还是偏左，那就减小 left，增大 right。这就像你在房间里摆沙发，往右挪一点，左边空出来的地方自然就多了。
我有个朋友，做物流大屏的，他之前也是这么搞的。他说他调了整整一下午，最后发现，只要把 zoom 设为 1.1 到 1.3 之间，配合 10% 的边距，地图就能完美居中。当然，具体数值要看你的地图数据范围。有些省份多的地图，可能需要更大的 zoom。
第三步，如果还不行，试试 fixGeoCoord 和 mapType。
有时候，地图空白是因为你的地图数据本身就有问题。比如，你用的地图 JSON 文件里，某些省份的坐标点缺失，或者坐标范围极大，导致 echarts 自动缩放时，把大部分空间都留给了空白区域。
这时候，你需要检查你的地图数据。我有一次遇到这种情况，发现是西藏和新疆的坐标点特别远，导致整个地图的边界框变得巨大。解决办法是，手动调整 fixGeoCoord，或者在数据预处理阶段，把那些极端坐标点过滤掉，或者重新计算中心点。
这一步比较硬核，需要你对地图数据有一定的了解。如果你不懂，那就老老实实用第二步，虽然笨，但管用。
最后，我想说的是，echarts geo四周留白 这个问题，真的没有银弹。它取决于你的地图数据、你的容器大小、你的屏幕分辨率。所以，不要指望一套代码解决所有问题。
我现在的做法是，写一个通用的配置模板，然后根据实际项目，微调 left, right, top, bottom 和 zoom。就像调相机焦距一样，慢慢拧，直到画面完美。
别被那些“专家”吓到，他们可能也没解决过你的具体问题。多试，多调，多报错。这才是程序员的日常。
希望这篇笔记能帮到你。如果还有问题，欢迎在评论区留言，我们一起探讨。毕竟，一个人debug太孤独了，两个人一起骂 echarts 会开心点。
