fix: 瀑布图改用自定义shape渲染,不再用堆叠方式,柱子高度正确显示

This commit is contained in:
freedakgmail
2026-07-30 14:34:28 +08:00
parent 718101c58a
commit 10c64a2ef2
+9 -4
View File
@@ -160,16 +160,21 @@ export function BossPage() {
{wf && (
<CollapsibleSection title="利润结构" subtitle="实收 → 减各项成本费用 → 净利润">
<ResponsiveContainer width="100%" height={280}>
<ComposedChart data={waterfallChart} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
<BarChart data={waterfallChart} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" tick={{ fontSize: 10 }} angle={-20} textAnchor="middle" height={60} />
<YAxis tickFormatter={(v) => v >= 10000 ? `${(v / 10000).toFixed(0)}` : v} tick={{ fontSize: 10 }} />
<Tooltip formatter={(v: any) => formatCurrency(v)} />
<Bar dataKey="base" stackId="a" fill="transparent" />
<Bar dataKey="value" stackId="a" radius={[4, 4, 0, 0]}>
<Bar dataKey="value" radius={[4, 4, 0, 0]} shape={(props: any) => {
const { x, y, width, height, payload, fill } = props
if (!payload.value || payload.value === 0) return <rect />
const scale = height / payload.value
const newY = y - payload.base * scale
return <rect x={x} y={newY} width={width} height={height} fill={fill} rx={4} ry={4} />
}}>
{waterfallChart.map((entry, i) => <Cell key={i} fill={entry.fill} />)}
</Bar>
</ComposedChart>
</BarChart>
</ResponsiveContainer>
<div className="mt-2 grid grid-cols-3 gap-2 md:grid-cols-5">
{waterfallSteps.filter(s => s.type === 'cost').map(s => (