@alicloud/console-sankey-chart v0.4.10-alpha.0

name: console-sankey-chart

zhName: 桑基图

桑基图API

桑基图是关系图的一种，常用来表示流入流出的关系。

典型桑基图的特点有：

• 开始总和 = 结束总和，能量平衡
• 每个流向(即每条边)的宽度有意义，常用来表示当前分支在所在深度的占比
• 每个节点的宽度也有意义，表示这个节点的占比

引入方式

import { ConsoleSankeyChart } from '@alicloud/console-chart';

示例 Demo

关系图情况复杂，使用方式多变，如果有未满足的场景，烦请联系我们。

基本用法

MDXInstruction:importDemo:Basic

多列情况

MDXInstruction:importDemo:MultiCol

配置边

MDXInstruction:importDemo:LinkStyle

垂直布局

通过direction属性来进行改变布局方向，有vertical,horizontal两个值。

MDXInstruction:importDemo:Vertical

节点排列方式

节点排列方式通过nodeAlign属性来进行配置，有start end center justify四个值，默认为justify

MDXInstruction:importDemo:NodeAlign

拓扑图

通过使用topology属性来配置拓扑图

MDXInstruction:importDemo:Topology

垂直拓扑图

MDXInstruction:importDemo:TopologyVertical

配置 Config

数据列配置

桑基图的数据列分2列，一列为节点数据，另一列为边数据。

数据示例：

const data = [
  {
    type: 'node',
    data: [
      { "name": "ecs" },
    ]
  },
  {
    type: 'link',
    data: [
      {
        "source": 3,
        "target": 0,
        "value": 5
      },
    ]
  }
];

通用配置

专属配置

direction: String

通过direction属性来进行改变布局方向，有vertical,horizontal两个值。

linkType: String

用来简单配置边的类型。

nodeAlign: String

节点排列方式通过nodeAlign属性来进行配置，有start end center justify四个值，默认为justify

topology: Boolean

是否开启拓扑图模式。在拓扑图模式下，一个节点身上只会有一个连接点，且连接点位于节点的中间处