vue使用echarts切换tab出现图表被压缩，宽度变窄问题

在做项目的时候，遇到图表在切换试图的时候，发现图表会被压缩起来了，

在tabs切换中有echarts的话，我们会发现初始化的那个echarts是有宽度的，当点击tabs切换之后，切换过来的echarts只剩下100px的宽度。
这是因为渲染的时机不对，我们需要在点击到当前切换的时候在echarts父级加载完毕之后在执行echarts，而不是在页面初始化的时候就把所有tabs里面的echarts都执行。
因为echarts会根据父级给宽度，而在初始化页面的时候其他tabs切换是display：none；没有宽度，所以会发生以上问题

在网上找了很多方法试了都不行，最后看到这个才解决了https://blog.csdn.net/weixin_43233914/article/details/84884703

 

解决方法：直接将图表的宽高写死

1.将图表放进一个div里面

<div class="chart-show-container  van-hairline--top" >
    <div class="chart" id="TotalRevenueChartContainer" :style="{width: '100%',height: '285px'}"></div>
</div>

2.定义一个方法，并在mounted视图更新的时候执行

 mounted() {
            this.setMychart();
        },

 //防止切换视图时图表被压缩变形
        setMychart () { 
                //原生js写法
                //这是一个封装好的方法，兼容IE，第一个参数，element,第二个属性，css样式
                function getStyle(obj, attr) {
                    if (obj.currentStyle) {
                        return obj.currentStyle[attr];
                    } else {
                        return document.defaultView.getComputedStyle(obj, null)[attr];
                    }
                }

                //获取父元素
                let echarts = document.querySelector('.chart-show-container');
                //获取父元素宽高
                let echartsWidth = getStyle(echarts, 'width');
                let echartsHeight = getStyle(echarts, 'height');
                //获取图表元素
                let myChart = document.querySelector('#TotalRevenueChartContainer');
                //将父元素宽高赋值给图表
                myChart.style.width = echartsWidth;
                myChart.style.height = echartsHeight;
            }

3.样式

.chart-show-container {
       height: 285px;
       width: 355px;
}