vue tab切换,echartst图表宽度只有100px问题解决

解决思路：直接将图表的宽高写死

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

    <div class="echarts">
        <div id="myChart" :style="{width:'100%',height:'150px'}"></div>
    </div>

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

    mounted(){
       this.setMychart()
    },

    methods:{
        setMychart(){
            //jq写法
            //获取父元素
            var echarts = $('.echarts');
            //获取父元素宽高
            var echartsWidth = echarts.outerWidth(true);
            var echartsHeight = echarts.outerHeight(true);

            //获取图表元素
            var myChart = $('#myChart');

            //将父元素宽高赋值给图表
            myChart.css('width',myChart);
            myChart.css('height',myChart);

            //原生js写法
            //这是一个封装好的方法，兼容IE，第一个参数，element,第二个属性，css样式
            // function getStyle(obj,attr){ 
            //     if(obj.currentStyle){ 
            //         return obj.currentStyle[attr]; 
            //     } 
            //     else{ 
            //         return document.defaultView.getComputedStyle(obj,null)[attr]; 
            //     } 
            // }
            // //获取父元素
            // var echarts = document.querySelector('.echarts');
            // //获取父元素宽高
            // var echartsWidth = getStyle(echarts,'width');
            // var echartsHeight = getStyle(echarts,'height');

            // //获取图表元素
            // var myChart = document.querySelector('#myChart');

            // //将父元素宽高赋值给图表
            // myChart.style.width = echartsWidth;
            // myChart.style.height = echartsHeight;
        }
    }

3.样式

<style>
    .echarts{
        width:300px;
        height:150px;
    }   
</style>

注：这些代码复制上去肯定是没有效果的，根据自己实际代码进行改写，提供一个思路，非常简单那