引用过echart后的vue页面page1,page2后期改造成index轮播-会遇到的问题

需求说明：有两个展示页面page1,page2,都用到了一个公共组件map用来展示地图的组件。

后面改了需求，变成一个页面用轮播图的方式轮回播出page1和page2.

为了简化，改造用了ant框架自带的a-carousel

  <a-carousel autoplay>
            <div>
                <index1></index1>  这里是之前的page1
            </div>
            <div>
                <index2></index2>  这里是之前的page2
            </div>
            <!-- <div><h3>如果有其他场景-这里用到其它frame</h3></div> -->
        </a-carousel>

出现了以下问题：

之前的功用组件hotmap不起左右，地图模块小时不见了

 

消失的原因：两个pageindex 共用组件hotmap。

那为什么之前没集成一个页面的时候会没事，因为之前路由跳转page2时page1 destroy，hotmap不会同时复用。

也就是有一个知识点：所有的echart 所依赖绘制的canvas的容器的id最好且必须拥有唯一的（同时引入一个页面时）

所以，只要改变以下共同引入的组件变成两个相同组件即可：

lunbo-index:

 <a-carousel autoplay>
            <div>
                <index1></index1>  
            </div>
            <div>
                <index2></index2>  
            </div>
            <!-- <div><h3>3</h3></div> -->
        </a-carousel>

import index1 from "./index.vue";
import index2 from "./index2.vue";

 components:{
        index1,index2
    }

index1:

 <!-- 地图 -->
    <div class="mapContain">
      <hotmap></hotmap>
    </div>
import hotmap from "../components/charts/hotmap4.vue";
components: {
    servecar,
    hotmap,
...

index2

  <!-- 地图 -->
            <div class="mapContain">
                    <hotmap2></hotmap2>
                <!-- <iframe src="../static/index.html" width="100%" height="100%" frameborder="0" scrolling="auto"></iframe> -->
            </div>
import hotmap2 from  "../components/charts/hotmap.vue";
components:{
        caryunying,hotmap2,servertime
        ,unfinished,duohuanServer
...

这会就会出现了

另外扩展一个知识点：

走马灯自定义时间配置：

官网上没有说明此项配置：

添加属性：

autoplaySpeed

例如：

 <a-carousel autoplay autoplaySpeed="15">
            <div>
                <index1></index1>  
            </div>
            <div>
                <index2></index2>  
            </div>
            <!-- <div><h3>3</h3></div> -->
        </a-carousel>

即可调整

或者：

<div>
         <a-carousel autoplay :autoplaySpeed="autoplaySpeed">
            <div>
                <index1></index1>  
            </div>
            <div>
                <index2></index2>  
            </div>
            <!-- <div><h3>3</h3></div> -->
        </a-carousel>
    </div>

data() {
        return {
            autoplaySpeed:2000//2s
        }
    },

鼠标移上去会默认不轮播，鼠标移出继续轮播

另附上react版本：

<Carousel autoplay autoplaySpeed={8000} >
     //  需要的轮播代码      
 </Carousel>