解决Vue中v-show控制echarts图表显示但图表宽度为100px问题

问题出现场景

在vue项目中，使用v-show控制div元素的显示，div标签中是echarts图表，自定义的echarts CSS样式是width为100%，但实际显示时图表宽度确为100px

实际代码
父组件代码

<template>
  <div>
    <div v-show="showMain">
    <div style="background: #ECECEC; padding: 30px">
      <a-row :gutter="16">
        <a-col :span="6">
          <a-card>
            <a-statistic title="应用总数" :value="11" :precision="0" :valueStyle="{color: '#3f8600'}" style="margin-right: 50px">
            </a-statistic>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card>
            <a-statistic title="覆盖率统计次数" :value="9" :precision="0" valueClass="demo-class" :valueStyle="{ color: '#cf1322' }"></a-statistic>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card>
            <a-statistic title="应用集成的测试覆盖率" :value="9.3" :precision="2" valueClass="demo-class" suffix="%" :valueStyle="{ color: '#cf1322' }"></a-statistic>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card>
            <a-statistic title="应用单元测试覆盖率" :value="9.3" :precision="2" valueClass="demo-class" suffix="%" :valueStyle="{ color: '#cf1322' }"></a-statistic>
          </a-card>
        </a-col>
      </a-row>
    </div>
    <echarts-projects-coverage-statistics @formEchartsTrigger="formEchartsTrigger"/>
    <div>
      <a-row :gutter="16">
        <a-col :span="8">
          <a-card title="集成测试覆盖率TOP10">
            <test-coverage-common-list/>
          </a-card>
        </a-col>
        <a-col :span="8">
          <a-card title="单元测试覆盖率TOP10">
            <test-coverage-common-list/>
          </a-card>
        </a-col>
        <a-col :span="8">
          <a-card title="单元测试覆盖率TOP10">
            <test-coverage-common-list/>
          </a-card>
        </a-col>
      </a-row>
    </div>
    </div> 
    <!--使用v-show控制子组件显示，子组件中有echarts图表-->
    <div v-show="!showMain">
      <each-project-coverage-details/>
    </div>
  </div>
</template>

<script>
import TestCoverageCommonList from '../test_coverage_common_list/TestCoverageCommonList'
import EchartsProjectsCoverageStatistics from '../test_coverage_echarts_applied_coverage_statistics/EchartsProjectsCoverageStatistics'
import EachProjectCoverageDetails from '../test_coverage_each_project_details/EachProjectCoverageDetails'
export default {
  name: 'TestCoverageMainPage',
  components: {EachProjectCoverageDetails, EchartsProjectsCoverageStatistics, TestCoverageCommonList},
  data () {
    return {
      showMain: true
    }
  },
  methods: {
    formEchartsTrigger (params) {
      this.showMain = false
    }
  }
}
</script>
<style scoped>
</style>

子组件代码

<template>
<div>
  <a-row :gutter="16">
    <a-col :span="8">
      <a-card title="基本信息">
        <p>文件数：72</p>
        <p>class个数：61</p>
        <p>function个数：418</p>
        <p>statements个数：2246</p>
      </a-card>
    </a-col>
    <a-col :span="8">
      <a-card title="覆盖率">
        <p>行覆盖率：51.6</p>
        <p>新行覆盖率：47.1</p>
        <p>分支覆盖率：37.7</p>
        <p>新分支覆盖率：47.1</p>
      </a-card>
    </a-col>
    <a-col :span="8">
      <a-card title="单元测试">
        <p>测试数：</p>
        <p>忽略测试数：</p>
        <p>测试错误数：</p>
        <p>测试失败数：</p>
      </a-card>
    </a-col>
  </a-row>
  <a-row>
    <a-col :span="6" :offset="22">
      <a-button type="primary">查看报告</a-button>
    </a-col>
  </a-row>
  <a-row>
    <a-col :span="24">
      <a-card size="small" style="width: 100%">
        <div class="ume-echarts-wrapper">
          <v-chart ref="chart" :options="options"/>
        </div>
      </a-card>
    </a-col>
  </a-row>
</div>
</template>

<script>
import ACol from 'ant-design-vue/es/grid/Col'
export default {
  name: 'EachProjectCoverageDetails',
  components: {ACol},
  computed: {
    options () {
      return {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['集成测试覆盖率', '单元测试覆盖率'],
          left: 10
        },
        color: ['#F56C6C', '#67C23A'],
        calculable: true, // 可计算特性配置，孤岛，提示颜色 默认关闭可计算特性
        xAxis: [
          {
            type: 'category',
            data: ['2020-04-01', '2020-04-02', '2020-04-03', '2020-04-04', '2020-04-05']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '集成测试覆盖率',
            type: 'line',
            data: [10, 20, 30, 50, 30]
          },
          {
            name: '单元测试覆盖率',
            type: 'line',
            // barWidth: '20',
            data: [40, 50, 60, 50, 35]
          }
        ]
      }
    }
  }
}
</script>

<style scoped>
  .ume-echarts-wrapper,
  .ume-echarts-wrapper .echarts,
  .ume-echarts-wrapper .echarts:first-child
  .ume-echarts-wrapper .echarts canvas{
    /*height: 300px !important;*/
    width: 100% !important;
  }
</style>

解决办法

将v-show改成使用v-if即可。原因是v-show 本身是结构已经存在，当数据发生变化时，结构并未重新渲染
参考博客：https://blog.csdn.net/lianwenxiu/article/details/94458817