漏斗转化分析页面核心是准确归因drop_off点并支持下钻、对比、验证；需后端返回JSON数据，前端用SVG渲染、语义化绑定step.name实现交互，移动端禁用横向滚动但保留单步滑动。
漏斗转化分析页面不是靠“堆图表”实现的，核心是把用户行为路径里每个环节的 drop_off 点准确归因到具体步骤，并让数据可下钻、可对比、可验证。
用 HTML + CSS 搭骨架，别碰 JavaScript 渲染漏斗
纯静态 HTML 页面无法实时计算转化率，强行用 document.getElementById 拼接数字只会让后续排查数据对不上。真实项目中，漏斗数据必须由后端或埋点 SDK 计算好后透出为 JSON，前端只做渲染。
- 后端应返回结构类似：
{ "steps": [{"name": "首页曝光", "uv": 12400}, {"name": "点击商品", "uv": 8320}, {"name": "加入购物车", "uv": 5160}, {"name": "下单成功", "uv": 3920}] } - 前端用
fetch拿到后，遍历生成<div class="funnel-step">，每步宽度按uv / steps[0].uv * 100%设置 - 禁止在 HTML 里写死
style="width: 67.1%"—— 这类硬编码会让 A/B 测试、时段对比完全失效
SVG 画漏斗比 div + border 更可靠
用 CSS 伪元素或 border 三角形拼漏斗，缩放、高 DPI 屏幕、字体抗锯齿都会导致边缘模糊或错位，尤其当需要标注百分比数字时，位置极易偏移。
- 每个漏斗层用
<path d="M..."/>描述梯形轮廓，fill值从 API 动态注入 - 转化率数字统一用
<text x="..." y="..." dominant-baseline="middle" text-anchor="middle">定位，避免依赖 margin/padding 计算 - 如果必须兼容 IE11，改用
<polygon points="x1,y1 x2,y2 ..."/>，但需注意 IE 对transform: scale()的 support 不一致
漏斗点击下钻必须绑定到 step.name，而非序号
运营同学常要求“点击‘支付成功’看这步的用户明细”，但如果代码里写成 onClick={() => loadDetail(3)}，一旦后端新增“填写发票”步骤，序号全乱，明细直接错配。
立即学习“前端免费学习笔记（深入）”；
- 所有交互事件必须携带语义化标识：
data-step-name="下单成功" - 下钻请求参数应为
?step_name=下单成功&date_range=20240501-20240507，和数据库日志字段严格对齐 - 前端缓存 key 也得用
step_name拼接，例如sessionStorage.setItem(`funnel_detail_${stepName}_${dateRange}`, json)
移动端漏斗要禁用横向滚动，但保留单步滑动
手机屏宽窄，漏斗步骤一多就自动触发 overflow-x: auto，用户会误以为能左右拖拽看全图，实际只是容器溢出，体验割裂。
- 给漏斗容器设
overflow-x: hidden，内部每个.funnel-step设overflow-x: auto并加scroll-snap-align: start - 用
touch-action: pan-y阻止误触横向滚动，但保留纵向页面滚动 - iOS Safari 对
scroll-snap-type支持需加-webkit-前缀，且必须配合scroll-behavior: smooth才生效
漏斗页面最难的从来不是画形状，而是确保每一步的 uv 统计口径和后端日志解析规则完全一致——比如“首页曝光”是否去重、是否过滤爬虫、是否包含 WebView 内嵌流量，这些细节不拉齐，前端做得再炫也没意义。
