Echarts2.0_无数据时的显示改进方法

  本文是基于Echarts2.0阐述当渲染数据不存在的情况下,它的默认显示方式是向上移动的气泡图形,然而在项目中搭载这样的显示会显得格格不入,所以我们有必要进行显示改进;
在这里插入图片描述
  从开发文档中我们可以发现option中的noDataLoadingOption属性,是用来设置当无数据提示时的Loading动画选项,默认采用bubble,其中可选的方式有’spin’ | ‘bar’ | ‘ring’ | ‘whirling’ | ‘dynamicLine’ | ‘bubble’,且支持外部装载;
在这里插入图片描述

  通过修改noDataLoadingOption属性的相应内容值,可以适当的修改显示;

  1. 第一种情况:不显示气泡
noDataLoadingOption : {		                        	   
  	text : '暂无数据',//提示文本
	effect :'bubble',//效果图
	effectOption :{
		backgroundColor:'rgba(0,0,0,0)',	//背景颜色
		effect: {
		       n :0//个数控制
		}	                        		   
	}
}

在这里插入图片描述

  1. 第二种情况:使用其他显示效果
noDataLoadingOption : {		                        	   
  	text : '暂无数据',//提示文本
	effect :'ring',//效果图
	effectOption :{
		backgroundColor:'rgba(0,0,0,0)',	//背景颜色	                  		   
	}
}

在这里插入图片描述

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值