Power BI 豪华动态业绩杜邦分析

wujunmin

发布于 2025-03-18 18:32:55

7000

代码可运行

文章被收录于专栏：wujunminwujunmin

运行总次数：0

代码可运行

杜邦分析法（DuPont analysis）是一种分析企业财务状况的方法，得名于美国杜邦公司。该思路可以应用于销售业绩分析。如下图模拟杜邦分析图对门店零售业务的业绩进行分解（参考：黄成明老师的《数据化管理》）

同一层级的指标相乘即可得到上一层级的数据。这种分析方法有助于快速定位到门店的可提升点，指导工作方向，进而提升门店业绩。

1.提升成交率有助于提升成交笔数，从而提升业绩；

2.提升平均零售价或销售折扣，有助于提升件单价，从而提升业绩；

3.提升客单量有助于提升客单价，从而提升业绩。

之前我用Power BI参数功能做过一个无外部数据的杜邦分析模板。

模板下载https://t.zsxq.com/gFWLK

该模板有两个应用场景：

制定业绩目标：拖动滑竿或者手动输入数据可查看结果，用来依据过程指标推断业绩结果；
已知业绩目标，推断什么样的过程指标可以促进业绩达成。

这个模板有两个缺点，第一是需要新建很多参数，第二是界面不够美观。

今天介绍另外一种方案，借助HTML，使用一个度量值就可以生成华丽的业绩杜邦分析图。

以下是视频交互演示：

当鼠标放在某个指标上时，该指标会悬浮突出：

指标值可以手动输入，也可以点击右侧的箭头调整：

调整任意指标，即可实时得到可能的业绩结果。

图表度量值如下，将度量值放入HTML Content视觉对象即可得到以上结果。

HTML.杜邦分析 = "
<head>
    <title>杜邦分析图</title>
    <style>
        #htmlContent {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        .container {
            background: white;
            padding: 40px;
            border-radius: 20px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
            max-width: 900px;
            width: 100%;
        }
        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
            font-size: 2.5rem;
            font-weight: bold;
        }
        .branch {
            margin-left: 40px;
            border-left: 3px solid #007bff;
            padding-left: 25px;
            position: relative;
        }
        .branch::before {
            content: '';
            position: absolute;
            left: -3px;
            top: 0;
            height: 100%;
            width: 3px;
            background: #007bff;
        }
        .branch div {
            margin: 15px 0;
            padding: 15px;
            background: #f9f9f9;
            border-radius: 10px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            font-size: 1.2rem;
        }
        .branch div:hover {
            transform: translateX(15px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }
        input {
            width: 120px;
            margin-left: 10px;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 8px;
            transition: border-color 0.3s ease;
            font-size: 1rem;
        }
        input:focus {
            border-color: #007bff;
            outline: none;
        }
        .result {
            font-weight: bold;
            margin-top: 30px;
            text-align: center;
            font-size: 2rem;
            color: #007bff;
            padding: 20px;
            background: #e9f5ff;
            border-radius: 15px;
            animation: fadeIn 1s ease;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
    </style>
</head>
<body>
<div class='container'>
    <h1>杜邦分析图</h1>
    <div>
        销售业绩 = 成交笔数 * 客单价
        <div class='branch'>
            <div>
                成交笔数 = 客流数量 * 成交率
                <div class='branch'>
                    <div>
                        客流数量: <input type='number' id='traffic' value='100' min='1' oninput='updateChart()'>
                    </div>
                    <div>
                        成交率: <input type='number' id='conversionRate' value='50.0' min='0.1' max='100.0' step='0.1' oninput='updateChart()'> %
                    </div>
                </div>
            </div>
            <div>
                客单价 = 件单价 * 客单量
                <div class='branch'>
                    <div>
                        件单价 = 平均零售价 * 销售折扣
                        <div class='branch'>
                            <div>
                                平均零售价: <input type='number' id='avgPrice' value='100' min='1' oninput='updateChart()'>
                            </div>
                            <div>
                                销售折扣: <input type='number' id='discount' value='0.80' min='0.01' max='1.00' step='0.01' oninput='updateChart()'>
                            </div>
                        </div>
                    </div>
                    <div>
                        客单量: <input type='number' id='quantity' value='2.0' min='1.0' max='100.0' step='0.1' oninput='updateChart()'>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class='result'>
        销售业绩: <span id='salesPerformance'>0</span>
    </div>
</div>
<script>
    function updateChart() {
        // 获取输入值
        const traffic = parseFloat(document.getElementById('traffic').value);
        const conversionRate = parseFloat(document.getElementById('conversionRate').value) / 100; // 转换为小数
        const avgPrice = parseFloat(document.getElementById('avgPrice').value);
        const discount = parseFloat(document.getElementById('discount').value);
        const quantity = parseFloat(document.getElementById('quantity').value);
        // 计算件单价
        const unitPrice = avgPrice * discount;
        // 计算客单价
        const ATV = unitPrice * quantity;
        // 计算成交笔数
        const transactions = traffic * conversionRate;
        // 计算销售业绩
        const salesPerformance = transactions * ATV;
        // 更新销售业绩显示
        document.getElementById('salesPerformance').textContent = salesPerformance.toLocaleString('zh-CN', {
            maximumFractionDigits: 2
        });
    }
    // 公众号：wujunmin
    updateChart();
</script>
</body>"

这里借助JS进行逻辑运算，而不是DAX，因此无需参数功能。更多杜邦分析内容在文末知识星球分享。