syncfusion-vue-sankey-chart

用途

Syncfusion Vue Sankey Chart 是一个加权流量可视化组件，通过节点（nodes）表示阶段或类别，通过连线（links）表示节点之间的流动，并以连线粗细的比例来表达数值大小。当需求是展示“流向关系”而非静态对比时，该组件更为适用。

典型使用场景包括：能源生产到消费的流向、供应链流转、预算分配、ETL 管道、网站流量路径等。

不建议在以下需求中使用桑基图：仅做类别对比、时间序列趋势分析、或需要深层级展开的层级结构。

主要能力

组件围绕节点与连线两大核心概念构建：

节点规则：每个节点必须有唯一 id；在可读性重要时应显式设置 label；样式可全局应用或按节点设置；节点宽度、内边距与填充属于视觉控制，而非数据控制。
连线规则：sourceId 必须与已存在的节点 ID 匹配；targetId 必须与已存在的节点 ID 匹配；value 必须为数值且为正数；连线外观一般进行全局配置，除非需要针对性覆盖。

在外观与样式方面，主要类别包括：图表尺寸、节点外观、连线外观、标题与副标题、标签格式、主题 CSS 引入、外边距与间距。生产环境的建议做法是：宽度使用 width="100%" 并配合固定高度；保持适中的不透明度，使重叠连线仍可辨认；当流动来源最重要时使用基于来源的着色；保持节点标签简短。

标签与提示框方面：标签可提升可读性，但过长标签会挤占图表空间。建议保持标签文本简洁，用标签做概括、用提示框呈现细节，避免在较小图表区域内强制显示过多标签。

图例与标题方面：当颜色用于表达类别或分组时使用图例；当图表脱离周边说明文字单独展示时使用标题。常见做法是标题简洁、副标题承载度量背景、横向空间受限时将图例放在底部。

高级特性与事件方面，组件可支持：图例驱动的高亮、提示框交互、方向切换、RTL 显示、打印与导出流程、以及事件驱动的筛选或下钻。在 Vue 3 Composition API 中，事件处理函数应声明在 <script setup> 内并在模板中直接绑定。

使用方式

推荐的 Vue 3 实现路径为：使用 Vue 3 单文件组件；使用 <script setup>；从 Syncfusion Vue Charts 包导入 Sankey 组件及所需指令；从 vue 导入 provide；仅注入所需的 Sankey 模块；用稳定的 ID 在节点与连线之间绑定数据；使用固定或自适应的容器高度，保证 SVG 有渲染空间。

官方地址：

API 文档：https://ej2.syncfusion.com/vue/documentation/api/sankey/
组件文档：https://ej2.syncfusion.com/vue/documentation/sankey/

资料中提供的安装与导入方式为从 '@syncfusion/ej2-vue-charts' 导入组件与指令，并在 provide('sankey', [...]) 中注入所需模块，未提供其他安装命令。

资料给出的最小示例（Vue 3 Composition API）结构如下，保留原始代码内容：

  <e-sankey-links>
    <e-sankey-link source-id="Source A" target-id="Target B" :value="100" />
  </e-sankey-links>
</ejs-sankey>

</div> </template>

const chartHeight = ref('420px'); const tooltip = ref({ enable: true });

provide('sankey', [SankeyTooltip]); </script>

资料还提供了能源流向图的真实场景示例，包含 Solar、Wind、Coal、Generation、Distribution、Consumption 等节点及相关连线，并配置了 title、linkStyle、tooltip、legendSettings，同样通过 provide 注入 SankeyTooltip 与 SankeyLegend 模块。该示例中 linkStyle 使用 opacity: 0.6、curvature: 0.55、colorType: 'Source'；legendSettings 使用 visible: true、position: 'Bottom'。

常见模式包括：多阶段流可视化（如 Supplier A → Warehouse → Distribution → Customer）、分流（一个来源分发到多个目标，如 Power Plant 分发到 Residential、Commercial、Industrial）、汇聚（多个来源汇入同一目标，如 Product A、Product B、Service C 汇入 Revenue）、按类别着色（colorType: 'Source'）、以及带事件交互（nodeClick、mouseMove 等事件处理函数）的实现。

关键属性参考

SankeyComponent 常用属性包括：width（默认 '100%'）、height（默认 '420px'）、title、subTitle、linkStyle（SankeyLinkSettingsModel，含 opacity、curvature、colorType）、nodeStyle（SankeyNodeSettingsModel，含 width、padding、fill、stroke）、tooltip（SankeyTooltipSettingsModel）、legendSettings（SankeyLegendSettingsModel）、labelSettings（SankeyLabelSettingsModel）、margin（MarginModel）、orientation（'Horizontal' 或 'Vertical'）、enableRtl、theme（如 Material、Bootstrap、Tailwind 等）、animation（AnimationModel）。

节点属性：id（必填、唯一）、label（LabelModel，含 text、color、fontSize）、color（节点填充色）、offset（手动垂直位置调整）。

连线属性：sourceId（必填，来源节点 ID）、targetId（必填，目标节点 ID）、value（必填，正数值，表示流量大小）、color（按连线覆盖颜色）。

此外还包含数据模型、15 个以上事件类型及其参数、组件方法（export、print、refresh、setTheme）、枚举类型、子指令及模块注册等，完整列表见资料提到的 api-reference.md。

适用场景

能源生产到消费、供应链流转、预算分配、ETL 管道、网站流量路径等流向型可视化需求。

限制

不适合仅需类别对比、时间序列趋势分析或需要深层级展开的场景。在无障碍方面：需保证足够的颜色对比度，避免仅用颜色传达含义，保持标签有意义，并在图表周围提供标题与上下文说明。在 RTL 方面：仅在应用布局需要时启用，启用后需校验标签可读性与图例布局。

关于该组件的收费、价格、具体支持平台等信息，资料中暂未提供。

技能介绍

用途

主要能力

使用方式

关键属性参考

适用场景

限制