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;
  }

猜你喜欢

转载自blog.csdn.net/weixin_44202904/article/details/116743687