admin管理员组

文章数量:1437108

Power BI 卡片图平滑轮播

视频演示：

这里使用DAX+HTML实现，轮播原理为CSS动画，假设展示三个指标，度量值如下：

代码语言：javascript代码运行次数：0运行复制
HTML卡片轮播 = 
VAR cards="
<div class='card'>
    <div class='card-title'>销售业绩</div>
    <div class='card-value'>" & FORMAT([M.销售业绩],"#,#") & "</div>
</div>
<div class='card'>
    <div class='card-title'>业绩达成率</div>
    <div class='card-value'>" & FORMAT([M.业绩达成率],"0%") & "</div>
    </div>
     <div class='card'>
<div class='card-title'>销售折扣</div>
    <div class='card-value'>" & FORMAT([M.销售折扣],"0.00") & "</div>
</div>"
RETURN
"
<head>
<style>
    .carousel-container {
        width: 300px;
        height: 200px;
        position: relative;
        overflow: hidden;
    }
    
    .carousel-wrapper {
        width: 900px; 
        display: flex;
        animation: slide 9s infinite linear;
    }
    
    .carousel-container:hover .carousel-wrapper {
        animation-play-state: paused;
    }
    
    .card {
        width: 280px;
        height: 180px;
        margin: 10px;
        background-color: white;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 20px;
        box-sizing: border-box;
        flex-shrink: 0;
    }
    
    .card-title {
        font-size: 25px;
        color: #333;
        margin-bottom: 20px;
    }
    
    .card-value {
        font-size: 36px;
        font-weight: bold;
    }
    
    
    @keyframes slide {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(-900px); 
        }
    }
</style>
</head>
</body>
<div class='carousel-container'>
    <div class='carousel-wrapper'>
        " & cards & cards & "
    </div>
</div>
</body>"

将度量值放入HTML Content视觉对象即可正常显示，支持鼠标悬停。如需修改样式/卡片数量，可以把以上代码发给DeepSeek进一步调整。

除了多指标，也可以单一指标但是把维度体现出来：

本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。原始发表：2025-04-28，如有侵权请联系 cloudcommunity@tencent 删除动画对象原理biclass

本文标签： Power BI 卡片图平滑轮播

版权声明：本文标题：Power BI 卡片图平滑轮播 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/biancheng/1747456018a2698350.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。