真的气笑了。为了一个地图坐标轴，我熬了两个大夜，头发掉了一把，最后发现是个弱智级别的低级错误。如果你现在正盯着屏幕发呆，看着那片死寂的白色空白，心里骂娘，那这篇文就是写给你的。别去搜什么“geo 坐标轴出不来”的官方文档了，那玩意儿除了让你更焦虑，屁用没有。
先说结论：90%的情况，不是代码逻辑错了，是你的容器没给对，或者数据格式在跟你装死。
我遇到的第一个坑，就是容器高度为零。别笑，这听起来像废话，但真的有人信了“自适应”就能自动撑开。你给地图容器设了 width: 100%，这没问题。但是！如果它的父元素没有明确的高度，或者父元素也是 auto，那这个容器的高度就是0。高度为0，你的坐标轴就算长得再壮实，也挤不出来。我当时的代码里，div 外面套了个 flex 布局，子元素默认 align-items: stretch，看着挺正常，结果控制台一查，容器高度居然是 0px。加上 height: 100vh 或者给父级定死高度，瞬间出来。这就像你想让气球飞起来，结果没给它打气，光指望它自己飘，那是不可能的。
第二个坑，数据格式不对，轴在“装聋”。很多新手喜欢直接把后端返回的原始数据丢给 ECharts 或者 Highcharts。比如时间轴，后端给你返回的是 "2023-10-01" 这样的字符串。你以为库会自动解析？在某些配置下，它不会。它可能把这个字符串当成普通类目，导致坐标轴刻度乱成一锅粥，或者直接因为类型不匹配而渲染失败。我有一次就是忘了把时间戳转成标准格式，结果坐标轴虽然占着位置，但上面没有数字，空荡荡的，像个哑巴。记得一定要在 data 里做预处理，或者在 xAxis.type 里明确指定为 'time' 或 'category'。别偷懒，数据清洗这一步省不得。
第三个坑，也是最隐蔽的，DOM 还没加载完你就初始化了。我在 Vue 项目里，习惯在 mounted 钩子里初始化地图。看似没问题，但如果你的地图容器是 v-if 控制的，或者依赖某个异步接口返回的数据来动态渲染，这时候 DOM 可能还没完全构建好。你调用 chart.init(dom)，拿到的 DOM 节点是残缺的，或者尺寸信息还没计算出来。这时候初始化，坐标轴要么不显示，要么显示在屏幕外面。解决办法很简单，加个 nextTick，或者用 setTimeout 延迟个几十毫秒再初始化。别觉得这几毫秒影响性能，比起调试两小时的痛苦，这几毫秒简直是恩赐。
还有，检查你的 CSS。有时候，坐标轴被其他元素遮挡了。比如你给地图容器加了 overflow: hidden，而坐标轴稍微溢出了一点，就被切掉了。或者 z-index 层级不对，背景图盖住了坐标轴。我有一次就是忘了给地图容器加 position: relative，导致绝对定位的坐标轴跑到了奇怪的地方，根本看不见。
别一遇到问题就重装依赖，别一报错就重启服务器。冷静下来，打开控制台，F12 inspect 元素。看看你的容器有没有尺寸，看看你的数据有没有传进去，看看浏览器有没有报红色的错误。大部分时候，问题就在那几行不起眼的代码里。
如果你还在纠结 geo 坐标轴出不来，不妨回头看看这些基础项。技术这东西，有时候就是玄学，但更多时候是常识。别被那些高大上的术语唬住，回到原点，检查你的 DOM，检查你的数据，检查你的配置。
希望下次你再看地图时，坐标轴能乖乖地躺在该在的地方，而不是让你对着空白屏幕怀疑人生。记住，代码不会骗人，骗人的是你自己的粗心。
本文关键词：geo 坐标轴出不来
