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

前言

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

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>

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

如果本篇文章对你有帮助的话，很高兴能够帮助上你。

当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。