[vue+echarts+elementUi]如果后台传来的没有数据,echarts如何显示no data
项目遇到了要做这个的需求,百度了半天发现,大家好像都说从ehcarts3.0开始就不支持在option里面设置 noDataLoadingOption 这个属性来显示nodata了,只好自己写一个。html:<el-popoverplacement="right"width="600"trigger="clic...
·
项目遇到了要做这个的需求,百度了半天发现,大家好像都说从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感觉还挺方便的,就这样!
更多推荐
已为社区贡献2条内容
所有评论(0)