Power BI 金字塔图展示产品价格带

wujunmin

发布于 2026-02-03 14:46:48

890

文章被收录于专栏：wujunminwujunmin

金字塔图可以看作特殊的直方图，用于展示分布。它和传统直方图相比，优势是可以看到每个区间的明细。下图是产品价格带的金字塔示例，一个长方形代表一个产品，长方形上标注产品ID。

在Power BI实现过程如下：

准备好产品资料表：

新建价格带列：

价格带 = 
SWITCH (
    TRUE (),
    '产品资料'[零售价] < 200, "200以下",
    '产品资料'[零售价] < 300, "200-300",
    '产品资料'[零售价] < 400, "300-400",
    '产品资料'[零售价] < 500, "400-500",
    '产品资料'[零售价] < 600, "500-600",
    '产品资料'[零售价] < 700, "600-700",
    '产品资料'[零售价] < 800, "700-800",
    '产品资料'[零售价] < 900, "800-900",
    '产品资料'[零售价] < 1000, "900-1000",
    "1000以上"
)

新建图表度量值，度量值中有圆角长方形、产品ID标签、价格带标签：

M.SVG产品信息 = 
CONCATENATEX (
    '产品资料',
     VAR BGColor = SWITCH([价格带],"200-300","deepskyblue","300-400","tomato","400-500","brown","500-600","purple","600-700","gold","700-800","grey")
     RETURN "
    <svg>
        <rect rx='10' x='0' y='0' width='150' height='60' fill='" & BGColor & "'/>
        <text x='75' y='38' font-size='22' text-anchor='middle' fill='snow'>" & [产品ID] & "</text>
    </svg>"
) & 
"<div class='price-tag'>" & SELECTEDVALUE ( '产品资料'[价格带] ) & "</div>"

将价格带列和图表度量值放入HTML Content视觉对象：

格式区域Stylesheet放入CSS度量值，用于布局调整：

M.价位带CSS.SVG = 
"#htmlContent{
    display: flex; 
    flex-direction: row;
    gap: 10px;
    align-items: flex-end;
  }        
.price-tag {
    text-align: center;
    font-size: 30px;
    font-weight:bold;
}
svg {
    position: relative;
    width: 150px;
    height: 60px;
    margin-bottom: 2px; 
}"

[M.SVG产品信息]图表度量值的内容可以按需调整，比如下方加入了产品图片：