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