做GIS和可视化这行整整15年了，说实话，现在这年头，纯画图的真不多，大部分都得跟前端扯皮。今天不聊虚的，就聊聊那个让无数新人头秃的问题：echarts geo map 大小。

上周有个哥们，半夜三点给我打电话，声音都劈了。他说他那个地图，在电脑大屏上看着挺美，一放到手机或者小分辨率的笔记本上，直接缩成一个小黑点，或者拉伸得像个变形金刚，丑得没法看。

我问他：“你写死宽高了吗？”

他回：“写了啊，width: 800, height: 600。”

我差点把手机扔出去。大哥，现在谁还写死像素啊？你这是2015年的写法，还是IE6时代的遗留问题？

咱们干这行的，最忌讳就是“想当然”。很多刚入行的兄弟，觉得echarts配置项里有个resize事件，就万事大吉了。结果呢？窗口一变，地图要么溢出容器，要么留一大片白边，尴尬得想找个地缝钻进去。

我举个真事儿。去年给某物流大厂做全国干线监控大屏。老板要的是那种沉浸式体验，地图得占满整个背景。当时用的就是geo组件。

起初，我也偷懒，直接设了固定大小。结果测试那边一测，说在1920x1080的屏上没问题，但在2K屏上，地图边缘被切掉了一截。更惨的是，运维说有些老旧显示器分辨率只有1366x768，地图直接爆出了容器，把旁边的数据面板都挤歪了。

那几天我头发掉了一把。最后怎么解决的？

第一，别写死宽高。用百分比，或者用CSS的vw/vh单位。比如width: 100%; height: 100%; 让容器决定地图的大小。

第二，监听resize事件。这点至关重要。当浏览器窗口大小改变时，必须调用myChart.resize()。注意，不是myChart.setOption，是resize。很多新手搞混这两个，导致性能卡顿，地图闪烁。

第三，geo的roam属性。开启缩放和平移，让用户自己调节大小。这比你在代码里死算比例要人性化得多。

还有个小细节，geo的map类型。如果你用的是自定义的geojson，记得检查坐标系。有些geojson的坐标范围特别大，比如从-180到180，而你的容器很小，这时候地图就会缩得看不见。需要手动调整center和zoom，或者在geojson预处理时做归一化。

我见过最坑的情况，是有人把geo放在一个display:none的div里初始化。这时候echarts算出来的尺寸是0，导致地图渲染失败。后来我是加了个setTimeout，等div显示出来后再初始化，才搞定。这算是个坑，大家避雷。

再说回大小自适应。其实核心就一句话：容器自适应，图表跟随容器。

你可以试试这个思路：

这样写，不管屏幕多大，地图都会填满那个div。当然，geo的具体配置，比如region的缩放比例，还得根据业务需求微调。

别总想着用代码去控制每一个像素，那太累，也太容易出bug。让浏览器去处理布局，让echarts去处理渲染，你只需要关注数据展示的逻辑。

这行干久了，你会发现，最简单的方案往往最可靠。别整那些花里胡哨的动画，先把地图稳稳当当放对位置，才是正经事。

希望这点经验能帮到你。要是还有问题，评论区留言，我看到就回。别半夜打电话啊，伤身体。