前两天搞数据大屏，老板非要那个地图有点“科技感”。

不是那种平铺直叙的，得有点透视，有点立体感。

我第一反应是，echarts里肯定有个参数叫 tilt 或者 rotation。

结果翻遍了文档，查遍了GitHub，头都大了。

没有。

真的没有。

echarts的geo组件，本质上是把地理坐标投影到二维平面上。

它不支持3D变换，也不支持CSS3的transform直接作用在canvas上。

为啥？因为canvas里的东西，你改CSS它不听话。

这就很搞心态。

我盯着屏幕看了半小时，咖啡都凉透了。

那种挫败感，懂的都懂。

直到我灵光一闪，想到了一个笨办法。

既然不能直接倾斜地图，那能不能倾斜整个容器？

或者，在地图下面垫一层东西，制造视觉误差？

试了第一种，倾斜容器。

效果是有了，但地图上的文字也歪了，饼图也歪了。

整个大屏乱成一锅粥。

这不行，太粗糙。

于是我想到了第二种思路。

既然geo是2D的，那我就在2D的基础上，通过样式让它看起来像3D。

或者，更直接一点，用CSS的 perspective 和 rotateX。

对，就是 rotateX。

我把echarts的容器div，套在一个父div里。

父div设置 perspective。

子div（也就是echarts渲染的那个div）设置 rotateX。

试了一下，哎？

居然成了。

但是有个问题。

地图上的文字，也跟着歪了。

如果文字不歪，那就完美了。

怎么让文字不歪？

把文字单独提出来？

太麻烦，而且数据联动会出问题。

后来我发现，其实不用那么复杂。

只要把echarts的容器，放在一个有透视效果的盒子里。

然后稍微调整一下角度。

比如 rotateX(20deg) 到 rotateX(30deg) 之间。

视觉上，地图就像是从下往上看的。

有一种悬浮感。

这就是大家常说的 echarts geo地图怎么倾斜30度 的终极奥义。

不是改echarts配置，是改CSS。

具体步骤我给你们捋一捋。

第一步，HTML结构。

写一个外层容器，叫 map-wrapper。

里面放一个echarts的div，叫 myChart。

别把echarts直接写在body里，要套两层。

第二步，CSS样式。

给 map-wrapper 设置 perspective: 1000px。

这个数值越大，透视感越弱。

越小，畸变越严重。

1000是个比较安全的值。

然后，给 myChart 设置 transform: rotateX(30deg)。

这就是关键。

30度，就是你要的倾斜角度。

你可以改成20，或者40，自己调。

第三步，解决文字问题。

这时候你会发现，地图上的label也歪了。

如果你不在乎label歪，那就结束了。

如果你在乎，那就得用个骚操作。

把echarts的 tooltip 和 label 的样式，通过CSS的 transform: rotateX(-30deg) 抵消回去。

但这很麻烦，容易出bug。

我的建议是，大屏展示，稍微歪一点，反而有种赛博朋克的感觉。

不用太纠结完美。

真实的项目，往往就是在这种妥协中完成的。

我那天晚上，就是这么搞定的。

代码跑起来的那一刻，看着那个微微倾斜的地图，心里那块石头落地了。

虽然有点粗糙，但效果确实到位。

这就是 echarts geo地图怎么倾斜30度 的真相。

别去死磕API了，API里没有你要的答案。

答案在CSS里，在你对浏览器的理解里。

希望这个笨办法，能帮到同样在熬夜的你。

别太累，早点睡。

身体比代码重要。

下次再遇到这种奇葩需求，先别慌。

想想能不能用CSS trick绕过它。

往往柳暗花明又一村。

就这样吧，我去洗个脸，清醒一下。

希望这篇分享，能让你少掉几根头发。

毕竟，发际线也是程序员最后的尊严。

加油吧，打工人。

今天的代码，就写到这儿。

晚安。