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>

注：這些代碼複製上去肯定是沒有效果的，根據自己實際代碼進行改寫，提供一個思路，非常簡單那