element中tab切换echarts图表缩到一起解决办法

使用 resize() 方法

<template>
    <div>
        <el-row :gutter="20" class="mt40">
            <el-col :span="16">
                <el-tabs class="my-tabs" v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="月度视频学习时长" name="1">
                        <el-card shadow="hover">
                            <div id="mStudyTime" style="width: 100%; height: 300px;"></div>
                        </el-card>
                    </el-tab-pane>
                    <el-tab-pane label="合格率" name="2">
                        <el-card shadow="hover">
                            <div id="passRate" style="width: 100%; height: 300px;"></div>
                        </el-card>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
            <el-col :span="8">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>月度热点直播排行</span>
                    </div>
                    <div v-for="o in 4" :key="o" class="text item">{{'列表内容 ' + o }}</div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import Schart from 'vue-schart';
export default {
    data() {
        return {
            activeName: '1',
            mStudyTime: '',
            passRate : '',
            chartVisible: true
        };
    },
    components: {
        Schart
    },
    mounted() {
    	//重点
        this.mStudyTimeChart();
        this.passChart();
        // 图标自适应（监听多个图表）
        window.addEventListener('resize', () => {
            this.mStudyTime.resize();
            this.passRate.resize();
        });
    },
    methods: {
        mStudyTimeChart() {
            // 基于准备好的dom，初始化echarts实例
            //重点
            this.mStudyTime = this.$echarts.init(document.getElementById('mStudyTime'));
            // 绘制图表
            this.mStudyTime.setOption({
                title: { text: '月度视频学习时长' },
                tooltip: {},
                xAxis: {
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月']
                },
                yAxis: {},
                series: [
                    {
                        name: '月份',
                        type: 'bar',
                        data: [234, 278, 270, 190, 230, 177, 200, 239, 433, 321]
                    }
                ]
            });
        },
        passChart() {
        //重点
            this.passRate = this.$echarts.init(document.getElementById('passRate'));
            this.passRate.setOption({
                title: { text: '合格率' },
                tooltip: {},
                xAxis: {
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '月份',
                        type: 'line',
                        data: [234, 278, 270, 190, 230, 177, 200, 239, 433, 321]
                    }
                ]
            });
        },
        //重点
        handleClick() {
            if (this.activeName == '1') {
                this.$nextTick(() => {
                    this.mStudyTime.resize();
                });
            }
            if (this.activeName == '2') {
                this.$nextTick(() => {
                    this.passRate.resize();
                });
            }
        }
    }
};
</script>
<style>
.mt20 {
    margin-top: 20px;
}
.mt40 {
    margin-top: 40px;
}
.my-tabs {
    background: #ffffff;
    padding: 20px;
}
.schart {
    width: 100%;
    height: 300px;
}
</style>