Power BI 模拟支付宝基金卡片图

支付宝基金页面右上角有一个类似下方的卡片图：

这个看似简单的卡片在Power BI也需要一系列的技巧才能够模拟。卡片由一个插画和一行文字构成。

首先看这行文字，数据前后有中文，这里有两种方式构造，一种是度量值直接=

"战胜"& FORMAT([KPI],"0.00%") & "的基民"

一种是保持KPI不变，使用动态格式改变指标格式。对[M.KPI]这一数据施加动态格式：

将[M.KPI]放到新卡片图视觉对象：

形状设置为圆角矩形：

填充背景色和字体颜色设置为相同，但背景色透明度调高。

接着添加插画，插画库推荐三个：

https://www.iconfont.cn/

https://iconpark.oceanengine.com/illustrations

https://www.manypixels.co/gallery

搜索需要的图样，下载为SVG格式。记事本打开SVG，复制里面的代码，代码前加上data:image/svg+xml;utf8,

新建度量值，进行插画条件切换：

SVG.插画 = 
IF([M.KPI]>=0.5,
"data:image/svg+xml;utf8,一个SVG代码＂,
"data:image/svg+xml;utf8,另外一个SVG代码"
)

把插画度量值放入新卡片图视觉对象的图像URL，得到：

很遗憾，这和支付宝原版的不大像。主要原因是文本的圆角边框被撑大了。如果一定要和支付宝的效果差不多，这里可以两个卡片图叠图，上方的卡片只显示图片，下方的卡片只显示文本：

本文数据为虚拟，不构成任何投资建议

支付宝的很多图表效果都不错，前期模拟过不少，如收支分析：

基金收益报告：

投资收益日历月历：