vue使用echarts出现tab切换echarts宽度变窄问题

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

解决方法

第一种方法是我在网上找到的自己没试过

1、myChart.resize();

第二种方法是我自己亲测过的，记住一定要切换到当前tabs的时候在执行下面代码，不要页面初始化的时候把tabs里面的echarts都执行完，跳到哪个执行哪个！！！！

2、this.$nextTick(function () {
  	要执行的echarts代码
  	mychart.setOption(option，true);//true用来解决数据不更新问题
});

第三种方法:

this.myChart.resize()

在加载页面的时候或者切换tab的时候 使图表自适应;

第四种办法:

解决思路：直接将图表的宽高写死，根据实际代码进行改写，提供一个思路

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

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

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

<script>
export default {
  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写法
      // 获取父元素
      // 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;

      // 这是一个封装好的方法，兼容IE，第一个参数，element, 第二个属性，css样式
      // function getStyle(obj, attr) { 
      //   if (obj.currentStyle) { 
      //     return obj.currentStyle[attr]; 
      //   } else { 
      //     return document.defaultView.getComputedStyle(obj,null)[attr]; 
      //   } 
      // }
    }
  }
};
</script>

3.样式

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