vue+echart+map+swiper: 使用 swiper轮播或tab标签页切换只会显示第一个地图组件，其它地图无法显示bug的解决

在vue中使用swiper ,地图echart分别封装为两个组件：

        <a-carousel arrows autoplay :autoplaySpeed="autoplaySpeed">
          <div style="width:100%;">
          <hotmap></hotmap>
          </div>
          <div style="width:100%;">
           <hotmap2></hotmap2>
          </div>
        </a-carousel>

其中hotmap 可以显示，hotmap2 怎么也显示不出来了

开始怀疑是组件绘制地图出的问题，但是发现直接渲染地图（不用swiper）没问了可以显示

再次排查，发现调换位置后，hotmap2 显示，hotmap 不会显示了

这就大概知道原因了， 在swiper 内只有第一个组件会显示，第二个组件静态的页面也可以显示，但是像这种hotmap,绘制地图图标调用接口等的异步绘制就没办法显示了，因为组件会自动加载后不再继续执行。

那么解决思路也就清晰了：

在组件加载前让它们分别加载，先加载第一个，其它的延迟加载即可：

 <div class="myswiper">
        <a-carousel arrows autoplay :autoplaySpeed="autoplaySpeed">
          <div style="width:100%;">
          <hotmap></hotmap>
          </div>
          <div style="width:100%;">
           <hotmap2 v-if="showMap2"></hotmap2>
          </div>
        </a-carousel>
         <!-- <hotmap2></hotmap2> -->
  </div>

showMap2:false

mounted() {

    this.timer = setTimeout(()=>{

      this.showMap2= true

    },800)

  },

  destroyed(){

    clearTimeout(this.timer)

    this.timer = null

  },

除了这个，tab切换页面以及其它图标绘制也需要遵循这种规律，当然一定要注意还有个图表绘制依赖的div id ref 的命名的唯一性 不然也会出现不绘制无法显示等问题