echarts 中图表实例 和 暂无数据切换，图表不显示问题

echarts 中 图表无数据于自定义暂无数据实现来回切换，图表不显示问题
// 图表实例对象

关键代码

// 场景当数据 indexList 为空时，显示暂无数据，其中 no-data 为封装的暂无数据的组件
<div
        id="chartLine"
        :class="[$style.chartLine, !indexList.length ? $style.noData : '']"
></div>
<no-data emptyText="暂无数据" v-if="!indexList.length"></no-data>

// 监听数据来源
watch: {
    lineData: {
      deep: true,
      handler(val) {
        if (val.length) {
          this.timeIndex = 0;
          this.indexList = val;
          this.$nextTick(() => {  //  重点，这里需要使用 $nextTick 函数，因为initChart 中操作了图表实例的 DOM，要放在 nextTick 回调函数中
          // 在数据变化后要执行某个回调函数，而这个操作需要使用随数据改变而改变的DOM结构的时候， 这个操作都应该放进Vue.nextTick () 回调函数中
            this.initChart();
          });
        } else {
          this.indexList = [];
        }
      }
    }
  },


// 配合css的高度
.chartLine {
    width: 100%;
    height: 80%;
    &.noData {
      height: 0;  // 重点，通过高度的有无，来显示图表和暂无数据盒子的切换
    }
  }
  
// 封装的暂无数据组件
<template>
  <div :class="$style.emptyData">
    <div :class="$style.emptyImg">
      <img src="@/assets/images/noData.png" alt="" />
    </div>
    <div :class="$style.emptyText">{{ emptyText }}</div>
  </div>
</template>
<script>
export default {
  name: 'NoData',
  props: {
    emptyText: {
      type: String,
      default: ''
    }
  },
  data() {
    return {};
  }
};
</script>
<style lang="scss" module>
.emptyData {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  .emptyImg {
    width: 45%;
    height: 50%;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .emptyText {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.25);
  }
}
</style>

最终暂无数据效果，这样就解决了来回切换，图表正常展示问题