Skip to content

漏斗面板

FunnelPreview
Income $6,200Fixed CostsEssentialsLifestyleSaved $820

一个递减漏斗图,回答"资金漏洞在哪里?"显示收入经过固定成本、必需品和生活支出后逐步减少,揭示有多少到达底部成为净储蓄。

图表类型

属性
Apache ECharts,通过 BaseChart
系列类型funnel
排序descending(递减)
源文件src/components/panels/FunnelPanel.tsx

显示内容

五个阶段,每个显示扣除该层支出后的剩余金额:

阶段扣除的类别
收入无(月总收入)
固定支出后房租、保险、网络、水电煤
必需品后杂货、燃油、交通、医疗
生活支出后餐饮、购物、娱乐、订阅
净储蓄最终剩余金额

每个阶段的值为 max(0, 前一阶段 - 该层支出),确保漏斗永远不会变为负值。

主要功能

功能详情
5 阶段递减漏斗收入经过三个支出层逐步衰减
泄漏提示框提示框显示每个阶段"泄漏"的金额
丰富标签每个漏斗段内显示粗体名称 + NZD 金额
最小尺寸minSize: '20%' 确保所有阶段保持可见
阶段间距阶段之间 4px

颜色变化

阶段颜色
收入强调色 (#00d4aa)
固定支出后天蓝色 (#38bdf8)
必需品后警告色(琥珀色)
生活支出后橙色 (#f97316)
净储蓄正值为强调色,零值为危险色(红色)

视觉细节

  • 宽度:容器的 80%,居中于 10% 左偏移
  • 边框:面板背景色,2px
  • 阴影:8px 模糊,rgba(0,0,0,0.15)
  • 标签字体:等宽,粗体名称 12px,金额 11px,80% 白色透明度
  • 强调:悬停时标签大小增加到 14px

提示框

显示阶段名称和剩余金额。对于中间三个阶段,还以危险红色显示"泄漏"金额和标签:

固定支出后
$6,850.00
-$1,650.00 固定成本

数据来源

状态管理字段
useFinanceStoremonthlySummary(按类型的支出类别)、netWorthmonthlyIncome
useChartTheme强调色、警告色、危险色;面板背景色

空状态

netWorth.monthlyIncome 为零或负值时,在面板中居中显示"无收入数据"。