echarts 无数据时显示暂无数据的相关处理(这里用的一张图片来显示,图片提示或文字可根据个人需求)

本文介绍了如何在Echarts中处理无数据的情况,通过在图表容器后添加一个用于显示‘暂无数据’提示的div,并使用js代码进行条件判断,控制提示图片或文字的显示与隐藏。当数据为空时,显示‘暂无数据’提示,否则展示图表。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、首先是一个图表的容器div,在图表div后边跟一个div用来盛放表示“暂无数据”的图片或文字,如下:

<div id="noDataImg" style="text-align:center; margin-right:20px; margin-top:10%; display:none;"><img src="${ctx}/mainframe/images/no-data.jpg"></div>

我引入的图片如下,具体图片可自行设计或网上搜索:

 

2、js代码控制如下:

 

 

3、效果图如下:

有数据时:

无数据时:

其实并不难,只需要判断传入的数据是否为空,然后根据是否为空来判断图片的隐藏与显示,这样就可以啦!

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值