環形進度條可以直觀地展現出某個指標的進度。本文為您介紹如何為環形進度條添加數據并配置樣式。
效果圖
配置數據
- 在組件庫區域的圖表中,找到環形進度條并拖至畫布中。
- 單擊請選擇數據集,并按照下圖指引,添加數據。
下圖目標值/度量以手動輸入為例,您也可以選擇動態字段。
配置樣式
位置和尺寸
您可以在配置區對組件進行如下設置:
- 調整組件的對齊方式(①):支持左對齊、居中和右對齊等。
- 調整組件的尺寸(②):以左上角為原點,設置X和Y軸的值,調整位置。
- 調整組件的角度(③):設置旋轉角度的值。
- 調整組件的大小(④):設置W和H的值,調整組件的寬度和高度。
- 鎖定組件(⑤):鎖定組件后,無法調整組件的大小。
進度條
您可以在進度條區域,設置進度條的占比條顏色(①)、背景顏色(②)以及寬度(③)。
數據標簽
您可以在數據標簽區域,進行如下操作。
- 顯示進度值占比:設置進度值占比的小數位(①)、進度值占比距離中心圓點的X和Y軸的偏移量以及進度值占比的文本樣式。
- 顯示當前值/目標值:設置當前值或目標值的展示名稱(②)、排列方式(左右或者上下排列)、上邊距(與進度條之間的距離)以及文本樣式。
動效
您可以在動效區域,設置動畫效果:
- 顏色:設置流光顏色,支持純色和漸變色。
- 流光時長:設置流光的間隔時長,單位為秒(s)。