vue+echarts,进行tabs切换时，图表宽度设成百分比不生效的问题

1、问题描述

最近在做电商后台管理项目，在首页用echarts做可视化显示的时候，遇到了进行tabs切换时图表不会自适应的问题。具体问题截图如下。

如上图所示，当进行tabs切换的时候，折线图图表的宽不会自适应。下面我们看代码和产生该问题的原因。

 <div style="width:100%;display:flex;justify-content: space-between;">
      <div
           ref="line"
           id="line"
           style="width:60%;height:320px;">
       </div>
 </div>

我们可以看到此处我给他设的宽度为60%，但是似乎并没有生效，接下来我们来看看控制显示的元素宽度。

我们可以清楚的看到我们设置了60%的相对宽度，但是在控制台我们可以看到宽度显示为了60px，这明显是不对的。

解决办法

我是在判断图表是否存在后，去计算了el-tabs的宽度，然后将它乘以0.6，赋值给图表。代码如下：

 document.getElementById('line').style.width = document.getElementsByClassName('el-tabs')[0].offsetWidth*0.6+'px'

然后在方法的最后我还监听了窗口大小调整的事件，在窗口大小发生变化时，让图表重新设置大小。代码如下：

getEchartData() {
            const chart1 = this.$refs.line;
            if (chart1) {
                console.log("d",document.getElementsByClassName('el-tabs')[0].offsetWidth)
                document.getElementById('line').style.width = document.getElementsByClassName('el-tabs')[0].offsetWidth*0.6+'px'
                const myChart = this.$echarts.init(
                document.getElementById("line")
            );
            const option = {
                title: {
                    text: '销售额趋势图'
                },
                //提示框，鼠标悬浮交互时的信息提示  
                tooltip: {  
                    //触发类型，默认（'item'）数据触发，可选为：'item' | 'axis'  
                    trigger: 'item'  
                },  
                //图例，每个图表最多仅有一个图例  
                legend: {  
                    //显示策略，可选为：true（显示） | false（隐藏），默认值为true  
                    show: true,  
                    //水平安放位置，默认为全图居中，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）  
                    x: 'center',  
                    //垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）  
                    y: 'top',  
                    //legend的data: 用于设置图例，data内的字符串数组需要与sereis数组内每一个series的name值对应  
                    data: ['销售额度']  
                },
                xAxis: {  
                    //显示策略，可选为：true（显示） | false（隐藏），默认值为true  
                    show: true,  
                    //坐标轴类型，横轴默认为类目型'category'  
                    type: 'category',  
                    //类目型坐标轴文本标签数组，指定label内容。 数组项通常为文本，'\n'指定换行  
                    data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']  
                },
                yAxis: {
                    //显示策略，可选为：true（显示） | false（隐藏），默认值为true  
                    show: true,  
                    //坐标轴类型，纵轴默认为数值型'value'  
                    type: 'value',  
                    //分隔区域，默认不显示  
                    // splitArea: {show: true}  
                },
                series: [{
                    name: '销售额度',
                    data: [820, 932, 901, 934, 1290, 1330, 1320,600,7000,500,900,1000],
                    type: 'line'
                }]
            };
            myChart.setOption(option);
            window.addEventListener("resize", function() {
                // document.getElementById('line').style.width = "60%"
                myChart.resize();
            });
            }
        },

最后的效果图如下：
有更好的方法欢迎在下方评论。