（18）在ElementUI的tab切換中使用ECharts出現(xiàn)的問題和解決方法

自適應(yīng)問題：

在切換后，圖表會縮在一起


image.png

解決方法：

  1. 使用lazy： 會報錯，不顯示圖表
<el-tabs class="my-tabs" v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="月度視頻學(xué)習(xí)時長" 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
  1. 使用v-if：會報錯，不顯示圖表
<el-tabs class="my-tabs" v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="月度視頻學(xué)習(xí)時長" 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
  1. 使用 resize() 方法
 mounted() {
    this.mStudyTimeChart();
    this.passChart();
    // 圖標(biāo)自適應(yīng)（監(jiān)聽多個圖表）
    window.addEventListener('resize', () => {
        this.mStudyTime.resize();
        this.passRate.resize();
    });
},

這個方法我在mounted生命周期中使用過了，但是在tab切換的時候肯定不會再生效了。有想到過再次調(diào)用初始化圖表的函數(shù)，讓它canvas重新繪制，但是并不行。于是想著在tab切換的時候，就讓它使用resize()方法，elementui的tab組件有自帶監(jiān)聽tab切換的事件： @tab-click="handleClick"

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

<el-tabs class="my-tabs" v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="月度視頻學(xué)習(xí)時長" 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();
    }
}

然后會發(fā)現(xiàn)還是不行??！

image.png

最后發(fā)現(xiàn)加上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">
            累計數(shù)據(jù)
            <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>直播數(shù)量</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">
            本月數(shù)據(jù)
            <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>直播數(shù)量</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="月度視頻學(xué)習(xí)時長" 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">{{'列表內(nèi)容 ' + 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();
        // 圖標(biāo)自適應(yīng)（監(jiān)聽多個圖表）
        window.addEventListener('resize', () => {
            this.mStudyTime.resize();
            this.passRate.resize();
        });
    },
    methods: {
        mStudyTimeChart() {
            // 基于準(zhǔn)備好的dom，初始化echarts實例
            this.mStudyTime = this.$echarts.init(document.getElementById('mStudyTime'));
            // 繪制圖表
            this.mStudyTime.setOption({
                title: { text: '月度視頻學(xué)習(xí)時長' },
                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>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容