admin管理员组文章数量:1028068
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进一步调整。
除了多指标，也可以单一指标但是把维度体现出来：
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进一步调整。
除了多指标，也可以单一指标但是把维度体现出来：
本文标签： Power BI 卡片图平滑轮播
版权声明：本文标题：Power BI 卡片图平滑轮播 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/jiaocheng/1747455997a2167222.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论