看着满屏扭曲的地图，
你是不是想砸键盘？
真的，太搞心态了。
很多兄弟问我，
为什么我的echarts geo大小
总是对不上屏幕？
明明代码没写错，
怎么就是歪的？
别急，先别骂人。
我也踩过这个坑，
差点把显示器砸了。
其实问题不在你，
在于那些文档
写得太像天书。
咱们今天不整虚的，
直接上干货。
解决echarts geo大小
的核心就三点。
第一步，
搞清坐标系。
很多人死在这，
以为width和height
能搞定一切。
错！大错特错！
geo需要的是
经纬度范围。
你得看你的数据，
是全局的，
还是局部的。
如果是局部，
比如只画一个省，
那你的roam设置
必须配合scale。
第二步，
设置visualMap。
这一步很多人忽略，
导致颜色一片黑。
或者颜色乱飞。
把min和max
设成你数据的
真实范围。
别偷懒，
别用默认值。
看着舒服，
数据才准确。
第三步，
调整layoutCenter。
这是控制echarts geo大小
的关键大招。
别再用center了，
那个太老土。
用layoutCenter，
比如['50%', '50%']。
这样地图永远居中。
再配合layoutSize，
比如'80%'。
这时候，
你的地图大小
就完全可控了。
注意啊，
这里有个坑。
如果你的容器
高度不够，
地图会被压缩。
所以，
父容器一定要
给个固定高度。
比如height: 600px。
别用auto，
别用百分比，
除非你懂flex。
还有，
记得关闭roam的
默认缩放限制。
不然用户
怎么都放大不了。
setOption的时候，
geo: {
roam: true,
scaleLimit: {
min: 1,
max: 10
}
}
这样设置，
体验好很多。
别信那些
复制粘贴的代码，
很多都是错的。
我试了十几个
网上的例子，
没一个能用的。
气死我了。
所以，
一定要自己调试。
打开浏览器控制台，
看看console。
有没有报错？
有没有警告？
很多时候，
是因为你的json
数据格式不对。
geoJson里的
name字段，
必须和series里的
name完全一致。
差一个空格，
都不行。
这点真的很烦，
但也最实用。
解决了这个，
echarts geo大小
基本就稳了。
最后，
别追求完美。
第一版丑点没事，
能跑通就行。
然后慢慢调。
调颜色，
调边框，
调字体。
慢慢来，
比较快。
如果你还搞不定，
那就换个库吧。
别在这棵树上
吊死。
但如果你坚持用echarts，
那就按我说的做。
第一步，定范围。
第二步，设映射。
第三步，调布局。
这三步走完，
你的地图
至少能看。
别嫌麻烦，
技术就是这样，
越磨越亮。
希望这篇
能帮到你。
如果还有问题，
评论区见。
别私信，
私信不回。
哈哈，开个玩笑。
总之，
加油吧，
打工人。
代码敲得爽，
下班走得早。
本文关键词：echarts geo大小
