vue部署到服务器，使用标签页tab切换页面时，echart不显示

vue部署到服务器以后，使用侧边栏tab切换的时候，echart不显示原本的折线图或者饼状图，解决方案如下：

原本的写法（部分内容省略） ==》

<template>
  <div>
    <div id="main"/>
  </div>
</template>

<script>
export default {

  mounted:{
    var myChart = this.$echarts.init(document.getElementById('main'));
    var option = {
        //...
    }
  }
}

修改以后的写法 ==》

<template>
  <div>
    <div id="main"/>
  </div>
</template>

<script>
export default {

  mounted:{
    var mainDom = document.getElementById('main');
    if (mainDom) {
      //可以在这里设置折线图或者饼图的大小
      mainDom.innerHTML = '<div id="main-chart-02" style="width: 100%;height:300px"></div>';
    }
    var myChart = this.$echarts.init(document.getElementById('main-chart-02'));
    var option = {
        //...
    }
  }
}