地图下钻

--- theme: orange --- # 前言之前我写了一篇《如何实现echarts地图下钻》的文章，用的是`echarts5`是实现，但是`echarts5`中地图切换的过渡动画已经没了，翻阅`github issues`的记录，发现到现在还没有修复，那么就需要自己编写代码实现，这篇文章就介绍我是怎么处理的。上一篇文章:[🗾3分钟学会Echart地图下钻](https://juejin.cn/post/7529439100890611746) # 方法1 、通过设置zoom实现过渡 ## 核心代码效果如下: ![echarts1.gif](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/4e5400649e9a4dd3a2b0f4088bce8ebd~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6buR5b-D55qu6JuL:q75.awebp?rk3s=f64ab15b&x-expires=1774782117&x-signature=FbSennitpczvnwUG6EEZbyEP5DA%3D) 核心代码如下: ```js // 下钻动画 const runAnimation = () => { // 地图放大然后消失 option['animation'] = true option['series'][0]['itemStyle']['opacity'] = 0 chart.setOption(option) setTimeout(() => { option['animation'] = false option['series'][0]['zoom'] = 0.1 option['series'][0]['itemStyle']['opacity'] = 1 chart.setOption(option) }, 300) setTimeout(() => { option['animation'] = true option['series'][0]['zoom'] = 1 chart.setOption(option) }, 600) } ``` 原理就是通过,设置`zoom`属性,和间接关闭`animation`属性实现的,如果你还要设置平移效果或者别的也可以通过设置中心点或者别的属性进行实现.`echarts5`的实现方式都差不多. ## 完整代码完整使用代码如下: ```html 地图下钻

``` # 方法2、换回旧版本如果你觉得像上面这样实现很麻烦,想要直接就有,那么最好的办法就是换回`v4`版本的`echarts`,因为老版本的`echarts`地图切换的时候自带,切换动画. 比如下面我换成了`4.3.0`版本的`echarts` ![image-20250803180124193](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/7ed4d2339c904c05a5e662ca1c1a6f53~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6buR5b-D55qu6JuL:q75.awebp?rk3s=f64ab15b&x-expires=1774782117&x-signature=s%2Br6p71MnHt%2FYO0qrzkjtBkfEOc%3D) 效果如下: ![echarts2.gif](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/7deb7f6dc40f4bb7b679584c79239359~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6buR5b-D55qu6JuL:q75.awebp?rk3s=f64ab15b&x-expires=1774782117&x-signature=22QcfBWhVzG6dPiLu5nz5oM2m1U%3D) 可以看到这种老版本的动画效果,比前面我自己做的效果会好很多如果你想要`echarts5`也用这种效果也是可以实现的,参考方法1,然后改造一下过渡代码逻辑就可以.就是会比较麻烦