可视化图表走起来（1）：桑基图，一目了然数据流向。

从事可视化设计，什么时候选用什么样的图表非常重要，今天来介绍一下桑基图的定义、场景、数据项等等，贝格前端工场愿意与各位老铁一道成长。

一、桑基图的定义

桑基图（Sankey diagram）是一种特殊类型的可视化图表，用于显示流量、能量、资源等在不同阶段或组件之间的流动和转移关系。

图表由一系列连续的箭头线段组成，箭头的宽度表示流量的大小或比例。桑基图通常用于展示复杂的流程、路径或网络，以便观察和分析各个组件之间的关联和贡献。该图表可以帮助用户快速理解和识别主要的流动路径，发现潜在的瓶颈或优化机会。

---

二、桑基图的作用和应用场景

桑基图有以下几个主要的作用和应用场景：

展示流程和路径：

桑基图可以清晰地展示复杂的流程、路径或网络，帮助用户理解和分析各个组件之间的关联和贡献。它可以显示不同阶段或组件之间的流量转移和流向，帮助用户追踪和理解数据、资源或能量的流动情况。

发现瓶颈和优化机会：

通过观察桑基图中的流量大小或比例，用户可以快速识别主要的流动路径和潜在的瓶颈。这有助于发现系统中的瓶颈点，并提供改进和优化的机会。

比较和对比：

桑基图可以用于比较不同组件之间的流量差异和变化。用户可以通过比较箭头的宽度、长度或颜色来观察不同组件之间流量的变化趋势，从而得到有关变化的洞察。

故事叙述和演示：

桑基图可以用于以图表形式叙述一个故事或展示一个过程。它可以帮助用户将复杂的信息和数据可视化，以更直观和易于理解的方式进行演示和传达。

决策支持：

桑基图可以提供有关流量、资源或能量转移的详细信息，帮助用户做出决策。用户可以根据桑基图中展示的流量和关联关系，进行分析和推断，并基于这些信息制定战略或采取行动。

桑基图在许多领域和场景中都有广泛的应用，包括物流、能源管理、市场分析、数据科学等。

---

三、桑基图构成要素

桑基图通常由以下几个要素构成：

节点（Node）：

节点表示系统或组件，通常以矩形或圆形的形式呈现。每个节点代表一个阶段、状态或组件，并且在桑基图中有唯一的标识符。

 

 

箭头（Arrow）：

箭头表示流量的流向，用于连接不同的节点。箭头的宽度可以表示流量的大小或比例，即流量越大，箭头越宽。

流量（Flow）：

流量表示在不同节点之间的转移或流动。它可以通过箭头的宽度、长度或颜色来表示。流量的大小或比例通常关联着数据的量级或比例关系。

标签（Label）：

标签用于标识节点或箭头的名称、数值或其他相关信息。它可以帮助用户更好地理解和解释图表中的节点和流量。

颜色（Color）：

颜色在桑基图中常用于区分不同的节点、流量或类别。通过使用不同的颜色，可以将图表中的元素进行分类、分组或区分。

这些要素的组合和排列方式可以根据具体的需求和设计来进行调整和定制，以满足用户对桑基图的可视化需求。

---

四、桑基图的配置项

在 Echarts 中，桑基图（Sankey diagram）的配置项包括：

series.type：设置为 ‘sankey’ 表示使用桑基图。
series.data：桑基图的节点和流量数据。数据格式为一个包含 nodes 和 links 两个数组的对象。nodes 数组包含所有的节点信息，每个节点都包括 name 属性来表示节点的名称。links 数组包含所有的流量信息，每个流量都包括 source、target 和 value 属性，分别表示源节点、目标节点和流量的大小。
series.layout：设置桑基图的布局方式。可以选择 ‘none’（表示节点按照数据顺序排列）、‘none’（表示节点按照拓扑排序排列）或 ‘none’（表示节点按照层级排列）。
series.nodeWidth：设置节点的宽度。
series.nodeGap：设置节点之间的间距。

series.label：设置节点和流量的标签显示。可以配置标签的位置、字体样式、颜色等。
series.itemStyle：设置节点和流量的样式，包括颜色、边框样式等。
series.lineStyle：设置流量的线条样式，包括颜色、弯曲程度等。
series.emphasis：设置节点和流量的高亮样式，当鼠标悬停或选中时生效。
series.links：设置桑基图的流量线条的样式，可以配置线条的颜色、宽度等。
series.autoCurveness：设置流量线条的弯曲程度，可以通过调整数值来改变线条的曲率。

series.focusNodeAdjacency：设置是否启用节点间的高亮交互效果，当鼠标悬停在一个节点上时，与该节点相关的节点和流量都会高亮显示。
series.draggable：设置节点是否可拖拽，可以通过拖拽节点来改变节点之间的连接关系。
series.highlightPolicy：设置节点和流量的高亮策略，可以选择 ‘ancestor’（高亮所有的祖先节点和后代节点）、‘descendant’（高亮所有的后代节点）或 ‘self’（只高亮当前节点）。
series.animation：设置桑基图的动画效果，包括动画的持续时间、缓动效果等。
series.tooltip：设置节点和流量的提示框，可以配置提示框的内容、样式等。
toolbox.feature.saveAsImage：设置是否显示保存为图片的功能按钮，可以将桑基图保存为图片文件。

这些配置项可以根据具体的需求进行调整和定制，以满足用户对桑基图的展示和交互需求。需要注意的是，不同版本的 Echarts 可能会有略微的差异，建议参考官方文档和示例进行具体的配置。