數據分析是后臺產品經理接觸比較多的一個版塊，也是很重要的一個功能模塊。本文將詳細講解根據輸入數值實時顯示圓形百分比。

先來看下實際效果：

圖片分析設計思路

利用四個半圓，藍色代表應付款、黃色代表已付款，各個半圓的上下順序已經很清楚了。

1. 當輸入已付款的數值小于應付款的一半時，黃2和黃3根據輸入數值的比例旋轉角度。
2. 當輸入已付款的數值大于應付款的一半時，黃2的位置應該置頂，黃3則固定在右邊的位置。

詳細教程

（1）元件準備：兩個輸入框（分別取名：應收款、已收款）；四個半圓（兩個為藍色，連個為黃色，分別取名為藍1、黃2、黃3、藍4，元件圖層位置如上圖）。

注意：?半圓的制作只能用點擊元件右上角小黑點里面的開口圓形來制作，避免用一個圓一個矩形切出來的半圓。

（2）交互設置：當已收款文本改變時設置用例

條件1：已收款的數值小于等于應收款的一半時設置交互用例

旋轉黃2-絕對位置-角度函數：已收款/應收款*360

旋轉黃3-絕對位置-角度函數：已收款/應收款*360

置頂綠1：

條件2：已收款的數值大于應收款的一半且小于應收款時設置交互用例

設置黃2為置頂：

旋轉黃2-絕對位置-角度函數：已收款/應收款*360

旋轉黃3-絕對位置-角度：180

設置到這里基本就結束了！如果你還想添加其他的一些效果比如實時顯示百分比，可以自己動手做做哦！

本文由 @zero 原創發布于人人都是產品經理，未經許可，禁止轉載

題圖來自Unsplash，基于 CC0 協議