數(shù)據(jù)分析是后臺(tái)產(chǎn)品經(jīng)理接觸比較多的一個(gè)版塊，也是很重要的一個(gè)功能模塊。本文將詳細(xì)講解根據(jù)輸入數(shù)值實(shí)時(shí)顯示圓形百分比。

先來看下實(shí)際效果：

圖片分析設(shè)計(jì)思路

利用四個(gè)半圓，藍(lán)色代表應(yīng)付款、黃色代表已付款，各個(gè)半圓的上下順序已經(jīng)很清楚了。

1. 當(dāng)輸入已付款的數(shù)值小于應(yīng)付款的一半時(shí)，黃2和黃3根據(jù)輸入數(shù)值的比例旋轉(zhuǎn)角度。
2. 當(dāng)輸入已付款的數(shù)值大于應(yīng)付款的一半時(shí)，黃2的位置應(yīng)該置頂，黃3則固定在右邊的位置。

詳細(xì)教程

（1）元件準(zhǔn)備：兩個(gè)輸入框（分別取名：應(yīng)收款、已收款）；四個(gè)半圓（兩個(gè)為藍(lán)色，連個(gè)為黃色，分別取名為藍(lán)1、黃2、黃3、藍(lán)4，元件圖層位置如上圖）。

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

（2）交互設(shè)置：當(dāng)已收款文本改變時(shí)設(shè)置用例

條件1：已收款的數(shù)值小于等于應(yīng)收款的一半時(shí)設(shè)置交互用例

旋轉(zhuǎn)黃2-絕對(duì)位置-角度函數(shù)：已收款/應(yīng)收款*360

旋轉(zhuǎn)黃3-絕對(duì)位置-角度函數(shù)：已收款/應(yīng)收款*360

置頂綠1：

條件2：已收款的數(shù)值大于應(yīng)收款的一半且小于應(yīng)收款時(shí)設(shè)置交互用例

設(shè)置黃2為置頂：

旋轉(zhuǎn)黃2-絕對(duì)位置-角度函數(shù)：已收款/應(yīng)收款*360

旋轉(zhuǎn)黃3-絕對(duì)位置-角度：180

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

本文由 @zero 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于 CC0 協(xié)議