在el-tabs中使用echarts画图表时的宽高变成100px问题

问题

最近做项目时遇到这样一个问题，使用el-tabs展示echarts图表时，只有在默认选中页里，echarts图标才能正常展示，其他页的echarts图表宽高都会变成100px。

原因

echarts绘制图表计算宽度的时候，由于第二个及后面的tab的属性display: none; 所以无法获取到clientWidth，而 parseInt(stl.width, 10)) 将width: 100%;转为100，所以计算出的图表宽度高度为100px。

解决方法

我原来是直接在el-tab中写的echarts绘图，用过很多方法都不行，于是将echarts绘图封装成一个组件，然后在el-tab中调用这个组件，结合v-if解决了这个问题
template部分：

<el-tabs v-model="activeName" @tab-click="handleClick">

	<el-tab-pane label="运行状态" name="first">
	...
    </el-tab-pane>
    <el-tab-pane label="镜像数据统计" name="second">
	...
    </el-tab-pane>
 	<el-tab-pane label="实验在线人数统计" name="third">
      	<div v-if="isshow" style="height:500px;width:100%">
          	<myEcharts height='100%' width='100%'></myEcharts>
      	</div>
  	</el-tab-pane>
</el-tabs>

script部分：

<script>
import myEcharts from './echarts'
export default {
    components:{
        myEcharts
    },
    data(){
        return{
            isshow:false,
        }
    },
    methods:{
        handleClick(tab, event){
            if(tab.name=="third"){
                this.isshow=true
            }else{
                this.isshow=false
            }
        },
    }

echarts组件部分：

<template>
    <div style="width:100%;height:100%">
        <div id="myChart" style="width:100%;height:100%"></div>
    </div>
</template>
<script>
export default {
    data(){
        return{

        }
    },
    methods:{
        //画图表
        drawLine(){
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('myChart'))
            // 绘制图表
            myChart.setOption({
                title: {
                    text:"实验人数统计"
                },
                tooltip: {},
                xAxis: {
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20],
                    itemStyle:{
                        normal:{
                            color:'#409EFF'
                        }
                    },
                }]
            });
        },
    },
    mounted(){
        this.drawLine()
    },
}
</script>
<style scoped>

</style>

以上就是我解决这个问题的方法，亲测有效！