前两天搞数据大屏，老板非要那个地图有点“科技感”。
不是那种平铺直叙的，得有点透视，有点立体感。
我第一反应是，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绕过它。
往往柳暗花明又一村。
就这样吧，我去洗个脸，清醒一下。
希望这篇分享，能让你少掉几根头发。
毕竟，发际线也是程序员最后的尊严。
加油吧，打工人。
今天的代码，就写到这儿。
晚安。
