v-show，v-if切換組件echarts顯示不全的問題

問題所在

顯示不全的圖形

 

 顯示全的圖形

 

 解決此問題本人暫時試過四種方法

  1、既簡單又粗暴的方法：直接給圖形所在的div設置一個固定寬度；

  2、利用v-if：用v-if顯示頁面首次進入頁面組件之間的傳參未能完成；

     例如：

 

   3、通過獲取父元素的寬度，將其復制給子元素，

    代碼例如：

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

 

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寫法
    // //獲取父元素
    // var echarts = document.querySelector('.echarts');
    // //獲取父元素寬高
    // var echartsWidth = this.getStyle(echarts,'width');
    // var echartsHeight = this.getStyle(echarts,'height');
    // //獲取圖表元素
    // var myChart = document.querySelector('#myChart');
    // //將父元素寬高賦值給圖表
    // myChart.style.width = echartsWidth;
    // myChart.style.height = echartsHeight;
  }，
   //這是一個封裝好的方法，兼容IE，第一個參數，element,第二個屬性，css樣式
    getStyle (obj, attr) { 
        if (obj.currentStyle) { 
            return obj.currentStyle[attr]; 
        } else { 
            return document.defaultView.getComputedStyle(obj,null)[attr]; 
         } 
     }
}

　4、v-show控制組件顯示，這里我們利用控制v-show的變量；首先我們把這個變量傳進子組件中來監聽這個變量的變化，在給一個判斷如果當這個變量等於v-show所控制的當前組件的值時觸發resize（）這個方法；