組件輪播聯動我使用的是 el-carousel 組件，具體代碼如下：

<el-carousel trigger="click" :interval="3000" arrow="never" @change="test">
        <el-carousel-item v-for="item in 4" :key="item">
            <div class="row-item row-city" style="height: 550px" v-if="item === 1">
                <div class="item"
 
>
                    <div class="item-hd">
                        <h3>
                            <span>城市分布</span>
                        </h3>
                    </div>
                    <div class="item-bd">
                        <p>{{sxPercentage}}</
 
p>
                        <p>{{maxDistanceName}}</p>
                        <div class="paihang" id="cityDisChartsId" style="height:400px; width:500px"></div>
                    </div>
                </div>
            </div>
            <div class="row-item row-city"
 
 style="height: 550px" v-if="item === 2">
                <div class="item">
                    <div class="item-hd">
                        <h3>
                            <span>成功率分布</span>
                        </h3>
                    </div>
                    <div class="item-bd">
                        <p>{{sxSucRateMaxNum}}</p>
                        <p>{{sxSucRateMaxCity}}成功率最高</p>
                        <div class="paihang" id="citySucChartsId" style="height:400px; width:500px"></div>
                    </div>
                </div>
            </div>
            <div class="row-item row-city" style="height: 550px" v-if="item === 3">
                <div class="item">
                    <div class="item-hd">
                        <h3>
                            <span>耗時分布</span>
                        </h3>
                    </div>
                    <div class="item-bd">
                        <p>{{sxAvgDurMinNum}}</p>
                        <p>{{sxAvgDurMinCity}}平均驗證耗時最短</p>
                        <div class="paihang" id="cityDurChartsId" style="height:400px; width:500px"></div>
                    </div>
                </div>
            </div>
        </el-carousel-item>
</el-carousel>        

下面就可以通過輪播的change事件傳遞參數到父組件，判斷輪播的參數變化而進行相應的過渡

export default {
        data() {
            return {
                pageIndex: 1
            }
        },
        methods: {
            test (e) {
                this.pageIndex = e;
                let setData = e;
                this.$emit(‘transferData‘, setData);
            }
        },
        watch: {
            //解決離開當前標簽頁再次進入時輪播聯動無法同步問題
            ‘pageIndex‘: (val) => {
                if (val === 0) {
                    let $chinaMap = jQuery("#chinaMapId");
                    if (!$chinaMap.attr("_echarts_instance_")) {
                        this.myChart = echarts.init($chinaMap[0]);
                        window.addEventListener("resize", () => {
                            this.myChart.resize();
                        });
                        let optionChina = store.state.dataTv.chinaMapOption;
                        this.myChart.setOption(optionChina);
                    }
                } else {
                    let $sxMap = jQuery("#sxMapId");
                    if (!$sxMap.attr("_echarts_instance_")) {
                        this.mySxMapChart = echarts.init($sxMap[0]);
                        window.addEventListener("resize", () => {
                            this.mySxMapChart.resize();
                        });
                        let optionSx = store.state.dataTv.sxMapOption;
                        this.mySxMapChart.setOption(optionSx);
                    }
                }
            }
        }
}

父組件接收子組件傳遞的輪播參數，進行相應聯動

<div>
    　<div class="col-lg-6">
           //聯動組件淡入淡出
            <transition name="slide-fade">
                <tmpEcharts v-if="mapShow"></tmpEcharts>
            </transition>
            <transition name="slide-fade">
                <szEchart v-if="!mapShow"></szEchart>
            </transition>
      </div>
       <div class="col-lg-3 right">
            <cityDistribution @transferData="getDate"></cityDistribution>
       </div>
</div>

export default {
        data() {
           return{
               mapShow: true
           }
        },
        methods: {
            getDate(setData) {
                //  0 -> 中國地圖，1,2,3 -> 山西省地圖
                if (setData === 0) {
                    this.mapShow = true;
                } else {
                    this.mapShow = false;
                }
            }
        },
}

<style>
    /* 可以設置不同的進入和離開動畫 */
    /* 設置持續時間和動畫函數 */
    .slide-fade-enter-active {
        transition: all .3s ease;
    }
    .slide-fade-leave-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .slide-fade-enter, .slide-fade-leave-to
        /* .slide-fade-leave-active for below version 2.1.8 */ {
        transform: translateX(10px);
        opacity: 0;
    }
</style>

vue 組件輪播聯動