SxSankeyChart (桑基图)
- Implemented
NextUI 扩展图表。专门针对桑基图场景优化的封装组件。
使用场景
- 能源流向可视化
- 资金流转分析
- 用户转化路径
- 物料流动追踪
约束说明
Options提供时将直接透传到 ECharts。- 未提供
Options时使用Nodes/Links生成默认配置。 - 节点和边数据需要分别提供。
行为说明
- 首次渲染初始化 ECharts 实例。
Disabled为真时不更新图表数据。- 支持垂直和水平两种布局方向。
API
Parameters (参数)
| 状态 | 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|---|
| Implemented | Nodes |
object[]? |
null |
节点数据，每个节点包含 name 属性。 |
| Implemented | Links |
object[]? |
null |
边/流动数据，包含 source、target、value 属性。 |
| Implemented | Orient |
string |
"horizontal" |
方向。可选: horizontal（水平）、vertical（垂直）。 |
| Implemented | NodeWidth |
int |
20 |
节点宽度。 |
| Implemented | NodeGap |
int |
8 |
节点之间的间隔。 |
| Implemented | ShowLabel |
bool |
true |
是否显示节点标签。 |
| Implemented | LabelPosition |
string |
"right" |
标签位置。可选: left、right、top、bottom。 |
| Implemented | SeriesName |
string? |
null |
系列名称，用于图例显示。 |
| Implemented | Options (继承) |
object? |
null |
覆盖 ECharts 配置。 |
| Implemented | Disabled (继承) |
bool |
false |
禁用状态。 |
| Implemented | Id (继承) |
string? |
null |
组件的物理 Id。 |
| Implemented | Class (继承) |
string? |
null |
自定义 CSS 类名。 |
| Implemented | Style (继承) |
string? |
null |
自定义样式。 |
| Implemented | Title (继承) |
string? |
null |
HTML title 属性。 |
| Implemented | AdditionalAttributes (继承) |
IEnumerable<KeyValuePair<string, object>>? |
null |
捕获不匹配的 HTML 属性。 |
示例
基础桑基图
<SxSankeyChart />
自定义数据
<SxSankeyChart Nodes="@nodes" Links="@links" />
@code {
private object[] nodes = new object[]
{
new { name = "源头A" },
new { name = "源头B" },
new { name = "中间" },
new { name = "终点" }
};
private object[] links = new object[]
{
new { source = "源头A", target = "中间", value = 30 },
new { source = "源头B", target = "中间", value = 20 },
new { source = "中间", target = "终点", value = 50 }
};
}
垂直桑基图
<SxSankeyChart Orient="vertical" Nodes="@nodes" Links="@links" />