项目遇到了要做这个的需求,百度了半天发现,大家好像都说从ehcarts3.0开始就不支持在option里面设置 noDataLoadingOption 这个属性来显示nodata了,只好自己写一个。

html:

      <el-popover
          placement="right"
          width="600"
          trigger="click">
          <!-- echarts部分 -->
          <div :id="['painter'+idx]" :style="{width: '600px', height: '500px'}" v-if="isNoData"></div>
          <!--nodata弹窗-->
          <div v-if="!isNoData">
              No Data
          </div>
          <el-button slot="reference" @click="matchMore(itemName,idx)">More Info</el-button>
      </el-popover>
  
	简单说一下,我是把echarts放在了elementUI的弹窗组件el-popover里,也就是点击底下的el-button,
来获取后台的信息,并画在画布上并且弹出来。
 	因为遍历了很多信息,每个button获取到的后台信息也不一样,所以给要画的画布的ID去拼接了idx来做区分,
然后根据后台返回的是否有结果来自己取一个data去判断,我这边取的isNoData,如果有数据就渲染echarts部分,
如果没数据,就走下面的nodata弹窗,这个No Data弹窗的文案和样式根据项目自行调整。
	emmm感觉还挺方便的,就这样!
Logo

前往低代码交流专区

更多推荐