echarts 暂无数据的完美解决办法

前景

很简单的一个思想 我希望没有数据的时候 不显示图表，并且用empty来替换 但是直接使用v-if 会出错 因为调用的时候 拿不到dom了 v-if直接把dom干掉了 怎么办呢

直接上步骤

1、第一步，我们应该在每次点击按钮的时候，发送数据的请求，然后根据数据的变化来决定让谁出现，请求结果出来后，如果有数据就调用initchart方法去初始化echarts图表，完成表格的渲染。代码如下

btn() {
	 this.$nextTick( async () => {
        await this.$refs.refPower.getPowerData()
         this.$refs.refPower.initChart()
      })
}

btn 是控制图形展示的按钮，点击的时候 使用this.$nextTick在dom更新的时候调用请求数据的接口，并且我们等待数据请求完成，在调用初始化echarts表格的函数，两个代码分别如下

async getPowerData(params) {
// 请求接口 有参数就传参数 没参数就调用近七天的数据
         const res = await powerReport(
        params
          ? params
          : {
              deviceCode: this.deviceCode,
              createStartTime: moment().subtract(7, "days").startOf().unix(),
              createEndTime: moment().endOf().unix(),
            }
      );
      this.powerData = res.data  //需要监听的数据
      if (res.data.length > 0 ) {
         this.xData = []  //清空 因为用的push 不清空数据会越来越多 每次请求都保证是空的
         this.yData = []
        this.showPower = true;   //控制图表的显示和隐藏
         res.data.forEach((item) => {
        this.xData.push(item.createTimeName);
        this.yData.push(item.rssi);
      });
      } else{
        this.showPower = false;
      }
    },

initChart() {
           let chartDom = document.getElementById("idchart");
            if (this.showPower) {  // 只有有数据的时候 这里才初始化 没数据就不需要了 所以加个判断 不然会报错 拿不到dom为null
            		echarts图表相关内容
			}
}

下面是监听器的东西

 watch: {
    powerData: {
      handler: function () {
           let chartDom = document.getElementById("idchart");
          if(chartDom !== null) {
               this.destroyChart()  //每次必须清理上一个图 不然不更新数据 这里是我自己定义的
          }
          this.initChart();
      },
    },
  },

销毁图表的方法

 destroyChart() {
      echarts.init(this.$refs.chartDom).dispose();
    },

经过这些步骤，就可以完美实现 echarts有数据展示数据 没数据就显示empty

 <!-- 图表区 -->
    <div
      id="idchart"
      ref="chartDom"
      v-if="showPower"
      style="width: 100%; height: 400px"
    ></div>
    <div v-else class="empty">
      <a-empty />
    </div>

这里是控制显示和隐藏的代码

有什么问题可以一起交流，目前这个方法没有发现什么问题 如果发现问题 我会及时更新！