支付寶的賬單有個收支分析，里面有詳盡的月度收支報告，從總體、到分類、到趨勢應(yīng)有盡有。

下圖這個支出分布圖表信息量很大。圖表結(jié)構(gòu)上，左側(cè)是分類圖標；中間是支出占比百分比條形圖，條形圖上方是分類名稱、占比數(shù)據(jù)、交易筆數(shù)數(shù)據(jù)；右側(cè)是支出金額，下方紅綠數(shù)字是與上月對比差異。Power BI表格使用DAX和SVG結(jié)合也可以制作這樣的圖表。

分類圖標訪問iconfont，阿里提供了官方圖標，SVG源碼可以直接復(fù)制。也可以用我前期在B站分享的圖標庫。

中間的百分比條形圖使用SVG的rect標簽生成。

圖表中的類別標簽、數(shù)據(jù)標簽全部使用SVG的text生成，無非是改變XY位置的值，以及font-size文本大小，fill文本顏色。

以下是Power BI復(fù)刻的結(jié)果：