咨询电话:
15628812133
20
2023/07

Eecahrts当数据为0的时候不显示文字但显示图例

发布时间:2023-07-20 13:13:02
发布者:录入作者
浏览量:
0

图表需要展示所有部门的数据,但是部门很多,不能一一展示,而且当数据为0的时候他会占一个位子,但是又需要展示所有的图例,可以看到后端返回给我们数据中有很多含有0的,而设计着重展示了这是一个南丁格尔玫瑰图,南丁格尔玫瑰图只有两种格式’radius’,’area’。

屏幕截图(102).png

当选择radius时他会根据 扇区圆心角展现数据的百分比,半径展现数据的大小。

而为0的时候,虽然他没有占据饼图的某一块,但是Echarts却把文字展示了出来,显得很难看。

屏幕截图(103).png

因为0虽然代表这个值没有,但是0本身也是一个值,所以Echarts把0这个数据也展示了出来,下面有两种方法,一个骚套路,一个高大上一点,请看。

可以看到,后端传过来的是name和count,但是Echarts不认识count,它只认识value,

屏幕截图11.png

所以前端处理一下。

这里我们只处理不等于0的,为0的还是让他用count这个数据,因为不认识所以它没有显示,但是因为有name,所以图例显示了。当然这个方法是错的,是我偶然间发现的,但是他有用,俗话说:当你的程序以一种你意想不到的方法跑起来,那就不是bug,那叫特性!

屏幕截图(104).png

屏幕截图(101).png

接下来请看正确解法,还是处理数据,我们这次把count全部换成value,但是如果为0的我们让它变为null,这里也成功了。

屏幕截图(105).png屏幕截图(106).png

关键词:
返回列表