Echart表格异常显示问题

缩成一团

解决ECharts图表切换后缩成一团的问题_echarts缩成一团_King汀的博客-CSDN博客

问题描述：使用 v-show 控制echart图标显示与否。发现，在图表未渲染出前，v-show=false ,图表会缩成一团。渲染出后，改变v-show 无异常。 网上查到的原因是，窗口一开始隐藏，初始化的时候获取不了你容器的高度和宽度。

解决方法：

1. 用一个盒子挤出echart图表，overflow：hidden

<div class="contain">
  <div class="tool">
    将echart图表挤出contain的工具盒子
  </div>
  <div class="echart">
    echart图标
  </div>
</div>

2. 动态控制这个盒子的高度，显示echart图表时，设置tool盒子高度为0；不显示时，高度为echart图表的高度，将echart图表挤出。