Power BI模拟支付宝数字强调式卡片

wujunmin

发布于 2025-02-10 18:47:16

5400

代码可运行

文章被收录于专栏：wujunminwujunmin

运行总次数：0

代码可运行

支付宝APP基金管理后台有下图这样一个卡片，数字使用圆角矩形强调。Power BI借助DAX+HTML，20多行度量值也可以绘制类似的效果。

以下是Power BI模拟图：

卡片上的数字位数不限，可随数据大小自动增减：

不一定是数字，强调文本也是可以的：

这就是DAX驱动可视化的魅力，度量值如下：

M.HTML = 
VAR data = 1182
--把以上数字替换为你需要展示的度量，度量的内容可以是数字或文本
--下方代码如需调整颜色，变更color处
RETURN "
<head>
  <style>
    p {
        font-size: 30px;
        color: white;
        font-weight: bold;
    }    
    .wujunmin {
        background-color: snow;
        border-radius: 8px;
        margin: 3px;
        padding: 12px 10px;
        color: rgb(17,141,255);
    }
</style>
</head>
<body>
  <p>您已定投 " & 
    CONCATENATEX(
        GENERATESERIES(1,LEN(data)),
        "<span class='wujunmin'>" & MID(data,[Value],1) & "</span>",,[Value],ASC
    ) & "
    天</p>
</body>"

把度量值放入HTML Content视觉对象即可正常显示。