echart的数据为空的处理

参考链接:https://blog.csdn.net/qq_33601443/article/details/105197137?utm_term=echarts%E6%95%B0%E6%8D%AE%E4%B8%BA%E7%A9%BA%E6%98%BE%E7%A4%BA&utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2allsobaiduweb~default-3-105197137&spm=3001.4430
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

initOutChart = (options) => {
    //
    if (this.Chart_init2 && this.Chart_init2.dispose) {
      //移去上次渲染的结果,确保本次不受影响
      this.Chart_init2.dispose();
    }
    //判断容器是否存在
    const chart_init = this.Chart_dom2.current;
    if (chart_init) {
      //存在容器,进一步进行判断数据是否为空
      if (this.state.waterOut.chart?.length) {
        this.Chart_init2 = echarts.init(chart_init);
        this.Chart_init2.setOption(options, true);
        //添加页面缩放事件
        this.Chart_init2.resize();
      } else {
        //没有数据的时候
        this.initInnerHTML(chart_init);
      }
    } else {
      // 容器不存在时
    }
  };

在这里插入图片描述

initInnerHTML(eContainer) {
    eContainer.innerHTML = `
	      <div class="no-data-container">
	          <p class="tips">暂无数据</p>
	      </div>
	    `;
  }

在这里插入图片描述

  .no-data-container {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .no-data-container .tips {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    color: #fff;
  }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值