echarts显示隐藏切换导致的图形太小的解决办法

先上代码

		<div
          class="line-chart"
          ref="lineChart"
          v-show="chartData && chartData.inspectData && chartData.hiddenDangerData && (chartData.inspectData.length !==0 || chartData.hiddenDangerData.length !==0)">
        <line-stack-chart
            :chart-data="chartData"
            :ref-dom="refDom"
            :dimensions="dimensions"/>
      </div>
      <div
          class="empty-box"
          v-show="(!chartData || !chartData.inspectData || chartData.inspectData.length === 0) && ( !chartData || !chartData.hiddenDangerData || chartData.hiddenDangerData.length ===0)">
       <p>无数据</p>
      </div>

导致出现的bug是 当显示图表无数据时，打开F12展示调试工具，再查有数据的图表，会导致图表变形 如下图

echarts图表明显变形

解决方案： 将v-show 改成v-if

<div
          class="line-chart"
          ref="lineChart"
          <!-- v-show 改成v-if-->
          v-if="chartData && chartData.inspectData && chartData.hiddenDangerData && (chartData.inspectData.length !==0 || chartData.hiddenDangerData.length !==0)">
        <line-stack-chart
            :chart-data="chartData"
            :ref-dom="refDom"
            :dimensions="dimensions"/>
      </div>
      <div
          class="empty-box"
          v-if="(!chartData || !chartData.inspectData || chartData.inspectData.length === 0) && ( !chartData || !chartData.hiddenDangerData || chartData.hiddenDangerData.length ===0)">
       <p>无数据</p>
      </div>

总结：

v-show和v-if的区别在于：
v-show不满足条件的元素会存在在DOM树中，只是display属性改成none;
但v-if不满足条条件的元素不会存在在DOM树中；