双色对冲收支流桑基图在线生成工具

什么是双色对冲收支流桑基图？

双色对冲收支流桑基图（Dual-tone Budget Flow Sankey Diagram）是一种用两种对立色系表达「资金来源汇聚、资金去向发散」的流向图。它采用标准的左→右分层桑基布局：左侧一层层收入科目像支流一样汇入，纵向收束到画面中央那根代表收支枢纽的竖向细条；越过枢纽之后，资金改以品红家族向右逐级发散，直到最右侧散成一片细丝般的末级支出科目。枢纽本身是一根竖向细条，填充从左缘青色到右缘品红的水平渐变，一眼就能读出钱从哪里来、又流向何处。流带宽度严格与数值成正比，因此每一笔钱从哪里来、经过哪一级归并、最终流向哪个科目，都能被直接读出来。

它的视觉语言非常鲜明：收入侧统一使用青色族，支出侧统一使用品红族，两者在中央枢纽竖条处交接，枢纽条上那条青→品红的水平渐变就是两族的切换点。同一色族内部并非单色，而是按节点吞吐量排名映射七个明暗档位——金额越大、流带越粗，颜色越饱和越深；金额越小、流带越细，颜色越淡，于是整张图的深浅本身就是一张数据热力分布。标签按列分级排布，并配合画布边界钳制与碰撞避让自动错开，密集账目也不会压成一团。整体观感接近官方财政统计年鉴与信息图海报，非常适合放进报告、演示与数据新闻。

功能特点

• 模板驱动，自动分层：只需下载 CSV 模板、按 source,target,value 三列填入数据并上传，工具会自动推导每个节点所在层级，列数由数据本身决定，无需手工指定阶段
• 左→右分层双色版式：收入与支出两族在中央那根青转品的枢纽竖条处交接，青色从左侧汇入、品红向右发散，整条资金路径一线贯通，而不是割裂的多段流程图
• 双色对冲配色：自动识别吞吐量最大的「收支枢纽」节点，其上游统一青色、下游统一品红，枢纽竖条填充青→品红水平渐变，收支关系一目了然
• 同族明暗分档：同一色族内按节点流量排名映射七个明暗档位，大额流带饱和最深、小额细丝最浅，色深即数据量级
• 标签分级自动防重叠：标签按列分级——首列显示名称与数值、末列数值在上名称折行在下、中间列只显示名称，并做碰撞避让，密集科目下依然清晰可读
• 三套双色方案：青品红（默认）、青橙、蓝红，一键切换适配不同报告风格；深色模式会自动提亮两族配色，保证暗底对比度
• 浅色 / 深色双模式：一键切换底图风格，导出时连带底色一起输出
• 多格式导出：支持高清 PNG（2x 像素比）与矢量 SVG 两种格式下载，SVG 可在设计软件里二次编辑
• 本地隐私处理：所有数据均在浏览器本地解析和渲染，不会上传至服务器

适用领域

• 财政预算与收支平衡分析：收入来源 → 收入口径 → 收支枢纽 → 支出大类 → 部门 → 科目，是这张图最经典的应用场景
• 企业利润与成本归集：营收来源 → 收入确认口径 → 净利润枢纽 → 成本费用大类 → 部门费用 → 明细科目
• 资金池与投融资结构：股权融资 / 债权融资 / 自有资金 → 资金池 → 投资方向 → 项目 → 具体支出
• 渠道归因与营销漏斗：流量来源 → 落地页 → 转化路径 → 成交渠道 → 客户类型，双色区分「汇入」与「分出」
• 能源与资源流动：一次能源 → 转换环节 → 枢纽载体 → 消费部门 → 终端用途，青色表示输入、品红表示输出
• 数据新闻与报告：为深度报道、政府与机构年报制作观感权威、信息密度高的收支流向图

使用步骤

1. 点击「下载 CSV 模板」获取示例文件（含 46 条示例流量，打开即是一张完整的 47 节点收支桑基图）
2. 按模板格式填入你的数据：source,target,value
3. 点击上传区域或拖拽 CSV 文件到页面中
4. 自动生成左→右分层的双色桑基图，可切换双色方案与浅色 / 深色模式预览
5. 可选：在「图内标题」输入框填写标题，留空则不显示
6. 满意后点击「下载 PNG」或「下载 SVG」保存图片

数据格式说明

字段	必填	说明
source	是	流出的节点名称（上一级分类）
target	是	流入的节点名称（下一级分类）
value	是	该条流量的数值（正数），流带宽度与之成正比

限制：最多 200 行数据；每一层节点数量不超过 24 个。阶段数量由数据的层级关系自动推导，无需在 CSV 中声明；数据必须是单向分层结构，出现循环流向时会给出提示。

提示：同一个名称在整张图中只会被当作同一个节点。如果不同阶段要使用同样的分类名，请在名称前加上阶段前缀（例如 Stage1-North 与 Stage3-North），否则它们会被合并。枢纽节点由工具自动识别为吞吐量最大的那个节点，无需手动指定。

这张图怎么读

先找画面中央那根颜色由青转品的竖向细条，它就是整张图的收支枢纽（示例中为「Total public expenditure」12,900）。左侧的青色族是收入侧：一层层收入科目从左边汇入，逐级归并、收束到枢纽竖条上，越靠近枢纽带子越粗。越过枢纽之后，色族切换成品红，资金向右逐级发散，越往右侧带子越细，直到最右端散成一片细丝——这些细丝就是最末级的支出科目。枢纽条上那条青→品红的水平渐变就是色族的切换点：走到这里，收入结束、支出开始。色族一换，就是收支分界——青色属于「收」，品红属于「支」。同族里颜色越深、带子越粗，代表金额越大；那些几乎细成一条线的浅色细带，则是占比极小的科目。标签首列贴节点左侧显示名称与数值、末列贴右侧数值在上名称折行在下、中间列只显示名称并自动换行，另有自动避让兜底。想核对具体数值，把鼠标悬停在流带或节点上即可看到提示。

关于 Gotokit

Gotokit 致力于提供简洁、高效、美观的在线工具。这款双色对冲收支流桑基图生成器采用 ECharts 标准桑基布局渲染左→右分层的双色版式，无需注册登录，打开即用，数据完全本地处理，保障您的隐私安全。