Axure教程｜如何製作圓形百分比資料？

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

先來看下實際效果：

圖片分析設計思路

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

當輸入已付款的數值小於應付款的一半時，黃2和黃3根據輸入數值的比例旋轉角度。

當輸入已付款的數值大於應付款的一半時，黃2的位置應該置頂，黃3則固定在右邊的位置。

詳細教程

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

注意：

半圓的製作只能用點選元件右上角小黑點裡面的開口圓形來製作，避免用一個圓一個矩形切出來的半圓。

（2）互動設定：當已收款文字改變時設定用例

條件1：已收款的數值小於等於應收款的一半時設定互動用例

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

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

置頂綠1：

條件2：已收款的數值大於應收款的一半且小於應收款時設定互動用例

設定黃2為置頂：

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

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

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

本文由 @zero 原創釋出於人人都是產品經理，未經許可，禁止轉載

題圖來自Unsplash，基於 CC0 協議