销售漏斗数据必须用严格线性数组结构化，字段统一为stage和count，顺序不可颠倒，空阶段需用count:0占位；推荐css grid渲染，宽度由js计算后传入style.width；点击跳转用sessionstorage传阶段对象；转化率须后端计算并明确来源，前端仅格式化显示。
漏斗数据怎么结构化才好渲染
销售漏斗本质是分阶段的计数序列，不是任意拓扑图。必须用严格线性数组表示 pipeline 阶段，否则 Chart.js 或 ApexCharts 画出来的“漏斗”会错位、倒置或无法响应式缩放。
推荐结构：
[{"stage": "线索", "count": 1240}, {"stage": "初步沟通", "count": 892}, {"stage": "方案演示", "count": 437}, {"stage": "报价中", "count": 215}, {"stage": "已签约", "count": 96}]注意：字段名统一用 stage 和 count，避免用 name/value 等歧义名；顺序不可颠倒，前端不负责排序逻辑。- 后端返回时就按 pipeline 实际顺序排列，别依赖前端
.sort() - 空阶段不能省略，要用
{"stage": "XX", "count": 0}占位，否则漏斗条宽度计算会崩 - 阶段名长度差异大时（如“MQL” vs “客户成功签约回款”），建议加
title属性做 hover 提示，不靠换行或缩写硬塞
用 CSS Grid 画纯静态漏斗条更稳
别一上来就上 D3.js 或 SVG path —— 大多数销售漏斗页只需要展示阶段宽度比例 + 数字 + 百分比，CSS Grid 足够、加载快、易调试。
核心技巧是把每个漏斗条做成一个 grid 容器，用 grid-template-columns 动态算宽度：
.funnel-item { display: grid; grid-template-columns: [left] minmax(0, 1fr) [right]; }再用 grid-column: left / right 控制内容居中，配合 width 百分比撑开背景色条。- 宽度计算用 JavaScript 算好传给
style.width，别在 CSS 里写calc()套嵌，IE11 兼容性差且难 debug - 漏斗条高度固定（比如
48px），但上下间距用gap控制，避免 margin 合并导致错位 - 移动端直接设
grid-template-columns: 1fr并堆叠显示，别用 flex-wrap，否则阶段顺序可能乱
点击某阶段跳转明细页怎么传参
用户点“方案演示”想看具体是哪 437 个客户，这时候 location.hash 或 URL search 参数都太轻量，容易被截断或编码混乱。
可靠做法是：绑定点击事件后，把当前阶段对象整个存进 sessionStorage，再跳转：
el.addEventListener('click', () => { sessionStorage.setItem('funnelStageFilter', JSON.stringify(stageObj)); window.location.href = '/leads?stage=方案演示'; });目标页用 sessionStorage.getItem('funnelStageFilter') 拿原始数据，比从 URL 解析安全得多。- 不要用
localStorage，多标签页会互相污染 - 如果后端支持，优先走 POST + hidden form 提交 stage ID，比客户端存更防篡改
- 跳转前检查
stageObj.count === 0，直接 return，避免空列表页尴尬
漏斗转化率数字为什么总对不上
常见错误是拿当前阶段数除以上一阶段数，却忽略了「阶段间存在非线性流转」——比如客户可从“报价中”退回“方案演示”，或跨阶段新增（如老客户直接进“已签约”）。
真实转化率必须由后端聚合计算，字段应明确为 conversion_rate，且带来源定义，例如：
{"stage": "方案演示", "count": 437, "conversion_rate": 0.492, "conversion_basis": "from_初步沟通"}前端只负责格式化显示（(rate * 100).toFixed(1) + '%'），绝不自行计算。- 前端显示的百分比必须和后端文档定义一致，比如是否含四舍五入、是否排除测试账号
- 如果某阶段没
conversion_rate字段，显示“—”而不是 0%，避免误导 - 鼠标 hover 时显示完整分子分母（如“437 / 892”），用
title属性最轻量，不用 tooltip 组件
漏斗页面最难的不是画形状，而是让每个数字背后都有可追溯的计算口径和数据链路。前端能控制的只有呈现逻辑，别替后端做聚合判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
