v-show，v-if切换组件echarts显示不全的问题

首先说明一下v-shou和v-if的区别

  

相同点：v-if与v-show都可以动态控制dom元素显示隐藏

不同点：v-if显示隐藏是将dom元素整个添加或删除，而v-show隐藏则是为该元素添加css--display:none，dom元素还在。

需要注意的是，当一个元素默认在css中加了display：none属性，这时通过v-show修改为true是无法让元素显示的。原因是显示隐藏切换，只是会修改element style为display:""或者display:none,并不会覆盖掉或修改已存在的css属性。

 

问题所在

显示不全的图形

 显示全的图形

 解决此问题本人暂时试过四种方法

  1、既简单又粗暴的方法：直接给图形所在的div设置一个固定宽度；

  2、利用v-if：用v-if显示页面首次进入页面组件之间的传参未能完成；

     例如：

   3、通过获取父元素的宽度，将其复制给子元素，

    代码例如：

<div class="echarts">
   <div id="myChart" :style="{ '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（）这个方法；