Power BI 豪华动态业绩杜邦分析
杜邦分析法（DuPont analysis）是一种分析企业财务状况的方法，得名于美国杜邦公司。该思路可以应用于销售业绩分析。如下图模拟杜邦分析图对门店零售业务的业绩进行分解（参考：黄成明老师的《数据化管理》）
同一层级的指标相乘即可得到上一层级的数据。这种分析方法有助于快速定位到门店的可提升点，指导工作方向，进而提升门店业绩。
1.提升成交率有助于提升成交笔数，从而提升业绩；
2.提升平均零售价或销售折扣，有助于提升件单价，从而提升业绩；
3.提升客单量有助于提升客单价，从而提升业绩。
之前我用Power BI参数功能做过一个无外部数据的杜邦分析模板。
该模板有两个应用场景：
- 制定业绩目标：拖动滑竿或者手动输入数据可查看结果，用来依据过程指标推断业绩结果；
- 已知业绩目标，推断什么样的过程指标可以促进业绩达成。
这个模板有两个缺点，第一是需要新建很多参数，第二是界面不够美观。
今天介绍另外一种方案，借助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:015px40pxrgba(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:3pxsolid#007bff; padding-left:25px; position: relative; } .branch::before{ content:''; position: absolute; left: -3px; top:0; height:100%; width:3px; background:#007bff; } .branchdiv{ margin:15px0; padding:15px; background:#f9f9f9; border-radius:10px; transition: transform0.3sease, box-shadow0.3sease; font-size:1.2rem; } .branchdiv:hover{ transform:translateX(15px); box-shadow:08px20pxrgba(0,0,0,0.15); } input{ width:120px; margin-left:10px; padding:8px; border:1pxsolid#ddd; border-radius:8px; transition: border-color0.3sease; 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: fadeIn1sease; } @keyframesfadeIn { from{opacity:0; } to{opacity:1; } } </style></head><body><divclass='container'> <h1>杜邦分析图</h1> <div> 销售业绩 = 成交笔数 * 客单价 <divclass='branch'> <div> 成交笔数 = 客流数量 * 成交率 <divclass='branch'> <div> 客流数量:<inputtype='number'id='traffic'value='100'min='1'oninput='updateChart()'> </div> <div> 成交率:<inputtype='number'id='conversionRate'value='50.0'min='0.1'max='100.0'step='0.1'oninput='updateChart()'>% </div> </div> </div> <div> 客单价 = 件单价 * 客单量 <divclass='branch'> <div> 件单价 = 平均零售价 * 销售折扣 <divclass='branch'> <div> 平均零售价:<inputtype='number'id='avgPrice'value='100'min='1'oninput='updateChart()'> </div> <div> 销售折扣:<inputtype='number'id='discount'value='0.80'min='0.01'max='1.00'step='0.01'oninput='updateChart()'> </div> </div> </div> <div> 客单量:<inputtype='number'id='quantity'value='2.0'min='1.0'max='100.0'step='0.1'oninput='updateChart()'> </div> </div> </div> </div> </div> <divclass='result'> 销售业绩:<spanid='salesPerformance'>0</span> </div></div><script> functionupdateChart() { // 获取输入值 consttraffic =parseFloat(document.getElementById('traffic').value); constconversionRate =parseFloat(document.getElementById('conversionRate').value) /100;// 转换为小数 constavgPrice =parseFloat(document.getElementById('avgPrice').value); constdiscount =parseFloat(document.getElementById('discount').value); constquantity =parseFloat(document.getElementById('quantity').value); // 计算件单价 constunitPrice = avgPrice * discount; // 计算客单价 constATV= unitPrice * quantity; // 计算成交笔数 consttransactions = traffic * conversionRate; // 计算销售业绩 constsalesPerformance = transactions *ATV; // 更新销售业绩显示 document.getElementById('salesPerformance').textContent= salesPerformance.toLocaleString('zh-CN', { maximumFractionDigits:2 }); } // 公众号：wujunmin updateChart();</script></body>"
