久久无码中文字幕_日韩精品无码一本二本三_久久精品呦女暗网_欧美一级夜夜爽_久久精品国产99久久99久久久

20
2023/07

Eecahrts當數(shù)據(jù)為0的時候不顯示文字但顯示圖例

發(fā)布時間:2023-07-20 13:13:02
發(fā)布者:錄入作者
瀏覽量:
0

圖表需要展示所有部門的數(shù)據(jù),但是部門很多,不能一一展示,而且當數(shù)據(jù)為0的時候他會占一個位子,但是又需要展示所有的圖例,可以看到后端返回給我們數(shù)據(jù)中有很多含有0的,而設(shè)計著重展示了這是一個南丁格爾玫瑰圖,南丁格爾玫瑰圖只有兩種格式’radius’,’area’。

屏幕截圖(102).png

當選擇radius時他會根據(jù) 扇區(qū)圓心角展現(xiàn)數(shù)據(jù)的百分比,半徑展現(xiàn)數(shù)據(jù)的大小。

而為0的時候,雖然他沒有占據(jù)餅圖的某一塊,但是Echarts卻把文字展示了出來,顯得很難看。

屏幕截圖(103).png

因為0雖然代表這個值沒有,但是0本身也是一個值,所以Echarts把0這個數(shù)據(jù)也展示了出來,下面有兩種方法,一個騷套路,一個高大上一點,請看。

可以看到,后端傳過來的是name和count,但是Echarts不認識count,它只認識value,

屏幕截圖11.png

所以前端處理一下。

這里我們只處理不等于0的,為0的還是讓他用count這個數(shù)據(jù),因為不認識所以它沒有顯示,但是因為有name,所以圖例顯示了。當然這個方法是錯的,是我偶然間發(fā)現(xiàn)的,但是他有用,俗話說:當你的程序以一種你意想不到的方法跑起來,那就不是bug,那叫特性!

屏幕截圖(104).png

屏幕截圖(101).png

接下來請看正確解法,還是處理數(shù)據(jù),我們這次把count全部換成value,但是如果為0的我們讓它變?yōu)閚ull,這里也成功了。

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

關(guān)鍵詞:
返回列表