Power BI零售管理：用产品图片展示价格分布

admin管理员组

文章数量:1033909

Power BI零售管理：用产品图片展示价格分布

以下Power BI图表用来展示不同价格区间的产品丰富度，常用于零售业商品管理领域。所有产品配有图片（虚拟），非常直观。实际应用时也可以将价格带维度替换为产品品牌、品类、系列主题等。

实现原理是DAX+HTML，新建一个HTML度量值，度量值包含三个部分，价格带维度，需要展示的产品图片和需要展示的产品信息（本例为产品ID）：

代码语言：javascript代码运行次数：0运行复制

M.HTML图片 = 
"<div class='price-tag'>" & SELECTEDVALUE ( '产品资料'[价格带] ) & "</div>" &
CONCATENATEX (
    '产品资料',
    " <div class='image-container'>
        <img src='" & [图片] & "' alt='w'>
        <div class='image-description'>" & [产品ID] & "</div>
    </div>"
)

其中，价格带可以在产品资料表中如下新建列：

产品图片可以是图床URL，也可以是本地图片转base64（参考：Power BI本地图片显示最佳解决方案）。

将价格带维度和以上HTML度量值拖入HTML Content视觉对象：

得到非常粗糙的效果：

接下来对图表添加CSS样式。把以下CSS代码粘贴到HTML Content视觉对象的stylesheet：

代码语言：javascript代码运行次数：0运行复制

#htmlContent{
    display: flex; 
    flex-direction: row;
    gap: 10px;
  }        
.price-tag {
    text-align: center;
    font-size: 16px;
    font-weight:bold;
    margin-bottom: 20px;
}
.image-container {
    position: relative;
    width: 150px;
    height: 60px;
     margin-bottom: 10px; 
}
.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
}
.image-description {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    color: white;
    padding: 2px;
    box-sizing: border-box;
    text-align: center;
}

得到：

不懂CSS没关系，DeepSeek非常懂（参考：DeepSeek昨日升级，Power BI用户利好）,把以上CSS发给DeepSeek，请AI辅助调整，比如调整为居中对齐：

再比如产品图片上方增加一点圆角效果：

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

Power BI零售管理：用产品图片展示价格分布

以下Power BI图表用来展示不同价格区间的产品丰富度，常用于零售业商品管理领域。所有产品配有图片（虚拟），非常直观。实际应用时也可以将价格带维度替换为产品品牌、品类、系列主题等。

实现原理是DAX+HTML，新建一个HTML度量值，度量值包含三个部分，价格带维度，需要展示的产品图片和需要展示的产品信息（本例为产品ID）：

代码语言：javascript代码运行次数：0运行复制

M.HTML图片 = 
"<div class='price-tag'>" & SELECTEDVALUE ( '产品资料'[价格带] ) & "</div>" &
CONCATENATEX (
    '产品资料',
    " <div class='image-container'>
        <img src='" & [图片] & "' alt='w'>
        <div class='image-description'>" & [产品ID] & "</div>
    </div>"
)

其中，价格带可以在产品资料表中如下新建列：

产品图片可以是图床URL，也可以是本地图片转base64（参考：Power BI本地图片显示最佳解决方案）。

将价格带维度和以上HTML度量值拖入HTML Content视觉对象：

得到非常粗糙的效果：

接下来对图表添加CSS样式。把以下CSS代码粘贴到HTML Content视觉对象的stylesheet：

代码语言：javascript代码运行次数：0运行复制

#htmlContent{
    display: flex; 
    flex-direction: row;
    gap: 10px;
  }        
.price-tag {
    text-align: center;
    font-size: 16px;
    font-weight:bold;
    margin-bottom: 20px;
}
.image-container {
    position: relative;
    width: 150px;
    height: 60px;
     margin-bottom: 10px; 
}
.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
}
.image-description {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    color: white;
    padding: 2px;
    box-sizing: border-box;
    text-align: center;
}

得到：

不懂CSS没关系，DeepSeek非常懂（参考：DeepSeek昨日升级，Power BI用户利好）,把以上CSS发给DeepSeek，请AI辅助调整，比如调整为居中对齐：

再比如产品图片上方增加一点圆角效果：

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

本文标签： Power BI零售管理用产品图片展示价格分布