（18）在ElementUI的tab切换中使用ECharts出现的问题和解决方法

自适应问题：

在切换后，图表会缩在一起

image.png

解决方法：

使用lazy：会报错，不显示图表

<el-tabs class="my-tabs" v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="月度视频学习时长" name="1" lazy>
        <el-card shadow="hover">
            <div id="mStudyTime" style="width: 100%; height: 300px;"></div>
        </el-card>
    </el-tab-pane>
    <el-tab-pane label="合格率" name="2" lazy>
        <el-card shadow="hover">
            <div id="passRate" style="width: 100%; height: 300px;"></div>
        </el-card>
    </el-tab-pane>
</el-tabs>

image.png

使用v-if：会报错，不显示图表

<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;" v-if="activeName == '1'"></div>
        </el-card>
    </el-tab-pane>
    <el-tab-pane label="合格率" name="2">
        <el-card shadow="hover">
            <div id="passRate" style="width: 100%; height: 300px;" v-if="activeName == '2'"></div>
        </el-card>
    </el-tab-pane>
</el-tabs>

image.png

使用 resize() 方法

 mounted() {
    this.mStudyTimeChart();
    this.passChart();
    // 图标自适应（监听多个图表）
    window.addEventListener('resize', () => {
        this.mStudyTime.resize();
        this.passRate.resize();
    });
},

这个方法我在mounted生命周期中使用过了，但是在tab切换的时候肯定不会再生效了。有想到过再次调用初始化图表的函数，让它canvas重新绘制，但是并不行。于是想着在tab切换的时候，就让它使用resize()方法，elementui的tab组件有自带监听tab切换的事件： @tab-click="handleClick"

第一步绑定： @tab-click="handleClick"

<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>

第二步：在methods中：

handleClick() {
    if (this.activeName == '1') {
        this.mStudyTime.resize();
    }
    if (this.activeName == '2') {
        this.passRate.resize();
    }
}

然后会发现还是不行！！

image.png

最后发现加上this.$nextTick就可以了

handleClick() {
    if (this.activeName == '1') {
        this.$nextTick(() => {
            this.mStudyTime.resize();
        });
    }
    if (this.activeName == '2') {
        this.$nextTick(() => {
            this.passRate.resize();
        });
    }
}

GIF 2020-9-3 17-11-10.gif

最后：以上方法并不一定适用每个情况，可以尝试下，以下为最终源代码

<template>
    <div>
        <div class="crumbs">
            累计数据
            <el-row type="flex" class="row-bg mt20" justify="space-between" :gutter="20">
                <el-col :span="5">
                    <el-card shadow="hover" :body-style="{padding: '0px'}">
                        <div class="grid-content grid-con-1">
                            <i class="el-icon-video-play grid-con-icon"></i>
                            <div class="grid-cont-right">
                                <div class="grid-num">1234</div>
                                <div>直播数量</div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="5">
                    <el-card shadow="hover" :body-style="{padding: '0px'}">
                        <div class="grid-content grid-con-2">
                            <i class="el-icon-monitor grid-con-icon"></i>
                            <div class="grid-cont-right">
                                <div class="grid-num">1234</div>
                                <div>在线观看</div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="5">
                    <el-card shadow="hover" :body-style="{padding: '0px'}">
                        <div class="grid-content grid-con-3">
                            <i class="el-icon-video-camera grid-con-icon"></i>
                            <div class="grid-cont-right">
                                <div class="grid-num">1234</div>
                                <div>回看直播</div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="5">
                    <el-card shadow="hover" :body-style="{padding: '0px'}">
                        <div class="grid-content grid-con-4">
                            <i class="el-icon-document-checked grid-con-icon"></i>
                            <div class="grid-cont-right">
                                <div class="grid-num">1234</div>
                                <div>满意率</div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="5">
                    <el-card shadow="hover" :body-style="{padding: '0px'}">
                        <div class="grid-content grid-con-5">
                            <i class="el-icon-coordinate grid-con-icon"></i>
                            <div class="grid-cont-right">
                                <div class="grid-num">1234</div>
                                <div>合格率</div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
        <div class="crumbs mt40">
            本月数据
            <el-row type="flex" class="row-bg mt20" justify="space-between" :gutter="20">
                <el-col :span="5">
                    <el-card shadow="hover" :body-style="{padding: '0px'}">
                        <div class="grid-content grid-con-1">
                            <i class="el-icon-video-play grid-con-icon"></i>
                            <div class="grid-cont-right">
                                <div class="grid-num">1234</div>
                                <div>直播数量</div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="5">
                    <el-card shadow="hover" :body-style="{padding: '0px'}">
                        <div class="grid-content grid-con-2">
                            <i class="el-icon-monitor grid-con-icon"></i>
                            <div class="grid-cont-right">
                                <div class="grid-num">1234</div>
                                <div>在线观看</div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="5">
                    <el-card shadow="hover" :body-style="{padding: '0px'}">
                        <div class="grid-content grid-con-3">
                            <i class="el-icon-video-camera grid-con-icon"></i>
                            <div class="grid-cont-right">
                                <div class="grid-num">1234</div>
                                <div>回看直播</div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="5">
                    <el-card shadow="hover" :body-style="{padding: '0px'}">
                        <div class="grid-content grid-con-4">
                            <i class="el-icon-document-checked grid-con-icon"></i>
                            <div class="grid-cont-right">
                                <div class="grid-num">1234</div>
                                <div>满意率</div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="5">
                    <el-card shadow="hover" :body-style="{padding: '0px'}">
                        <div class="grid-content grid-con-5">
                            <i class="el-icon-coordinate grid-con-icon"></i>
                            <div class="grid-cont-right">
                                <div class="grid-num">1234</div>
                                <div>合格率</div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </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: '',
            pass: '',
            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>