echarts饼图不显示数据为0的数据

首先阐述下为什么会有这个需求,这个和echarts自身的显示效果有关。

如果你选择的展示图形为饼图,然后你的数据里有一条数据为0,那么展示的数据就为一条直线,看上去效果并不好,

会很突兀。

当然如果你的业务需求就算是直线的话也要展示出来,那么下面的文章你可以略过了,对你画图表并没有什么帮助。

言归正传,我这里会结合代码和图给大家看看效果,首先看看数据为0时的效果。效果如下

echarts饼图不显示数据为0的数据_第1张图片

附上代码:



	echarts测试
	
    


	 
    


是不是很难受。

下面我这里介绍下将0数据不在饼图上显示的几种方式。

现附上最终效果图:

echarts饼图不显示数据为0的数据_第2张图片

1.在后台数据处理时候讲数据结果为0的数据过滤掉(这个大家根据业务情况做处理,这里只讲述下思路,不做具体展示)

2.在option的定义里处理(和第三个方法本质上是一样的,2的方式对各个数据进行处理,更有针对性,而3对饼图里的所有数据都做统一处理,大家根据需要进行选择)

附上代码:



	echarts测试
	
    


	 
    


3.写一个函数,遍历所有的数据,将为0的数据隐藏掉

附上代码:



	echarts测试
	
    


	 
    



你可能感兴趣的:(web前端)