圖表需要展示所有部門(mén)的數(shù)據(jù),但是部門(mén)很多,不能一一展示,而且當(dāng)數(shù)據(jù)為0的時(shí)候他會(huì)占一個(gè)位子,但是又需要展示所有的圖例,可以看到后端返回給我們數(shù)據(jù)中有很多含有0的,而設(shè)計(jì)著重展示了這是一個(gè)南丁格爾玫瑰圖,南丁格爾玫瑰圖只有兩種格式’radius’,’area’。
當(dāng)選擇radius時(shí)他會(huì)根據(jù) 扇區(qū)圓心角展現(xiàn)數(shù)據(jù)的百分比,半徑展現(xiàn)數(shù)據(jù)的大小。
而為0的時(shí)候,雖然他沒(méi)有占據(jù)餅圖的某一塊,但是Echarts卻把文字展示了出來(lái),顯得很難看。
因?yàn)?雖然代表這個(gè)值沒(méi)有,但是0本身也是一個(gè)值,所以Echarts把0這個(gè)數(shù)據(jù)也展示了出來(lái),下面有兩種方法,一個(gè)騷套路,一個(gè)高大上一點(diǎn),請(qǐng)看。
可以看到,后端傳過(guò)來(lái)的是name和count,但是Echarts不認(rèn)識(shí)count,它只認(rèn)識(shí)value,
所以前端處理一下。
這里我們只處理不等于0的,為0的還是讓他用count這個(gè)數(shù)據(jù),因?yàn)椴徽J(rèn)識(shí)所以它沒(méi)有顯示,但是因?yàn)橛衝ame,所以圖例顯示了。當(dāng)然這個(gè)方法是錯(cuò)的,是我偶然間發(fā)現(xiàn)的,但是他有用,俗話說(shuō):當(dāng)你的程序以一種你意想不到的方法跑起來(lái),那就不是bug,那叫特性!
接下來(lái)請(qǐng)看正確解法,還是處理數(shù)據(jù),我們這次把count全部換成value,但是如果為0的我們讓它變?yōu)閚ull,這里也成功了。