echarts配置進度池

JocelynFung發表於2020-09-27

近日,使用dataV中的配置,完成了進度池圖表,但是有有一個缺點,就是官方沒有動畫方面的配置。如下圖:

 

為了給這個進度池新增動畫效果,我反向的在進度池上面鋪一層由一格一格與進度池中相同的塊狀組成的與背景相同的格子,然後每一秒影藏一格格子,以達到進度格子一格一格顯示出來的效果,同時用定時器設定每6秒重複一次。

由於當時沒有做太多關於解析度的相容,以致於切換都某些解析度較低的電腦螢幕上時,露餡了。

所以,就開始我後面的探索。。。。。

無意間發現一個echarts的附帶網站,叫做Echarts Gallery,裡面有比官方例項更加多樣化的例項,而且免費!

瀏覽了很久,終於找了兩個與需求相似的進度池!

copy下來之後,一番修改,發現其實官方是有專門的屬性可以直接配置,達到將條形統計圖變成這樣一格一格的進度池模樣的,如下圖圈紅的部分,實質就是將條形圖中的柱子設定成一小格(這裡可以是rect方形,也可以是圓的的,設定symbol即可),然後copy這個symbol即可,超級簡單實用!

 

 效果如下:

 

 

 

再加上官方的動畫配置,就完美解決了之前的問題了!

相關文章