---
order: 27
navTitle: 桑基图
---
# 仪表板组件-桑基图

桑基图，也叫做桑基能量分流图或者桑基能量平衡图。桑基图是一种较为特定类型的流程图，图中延伸的分支的宽度对应数据流量的大小，并且所有主支宽度的总和应与分流的分支宽度总和相等，保持流量平和，所以桑基图非常适用于用户流量的数据的可视化分析。

![桑基图](./images/2023-05-31-17-57-11.png)

示例地址：[桑基图](https://demo.succbi.com/v5/bi/sankey-diagram)

## 使用桑基图组件{#start}

将桑基图中数据流动的起点、经过点、终点的维度字段拖入到组件的**维度**中，数据流字段拖入到**指标**中即可。

**操作步骤：**

![操作步骤](./images/2023-05-31-15-09-11.gif)

1. 双击或拖入维度【国家】、【行业】、【公司】到桑基图的**维度**中
2. 双击或拖入度量【估值（亿美元）】到桑基图的**指标**中

## 属性介绍{#properties}

### 组成{#composition}

桑基图是由**起点**、**经过线**、**终点**和**连接线**组成，一个完整的桑基图最少需要一个**起点**字段和一个**终点**字段，**经过点**可以无数个或者0个，连接线只能取一个字段。

![组成](./images/2023-05-31-15-44-04.png)

拖入到**维度**的字段就是桑基图的**起点**、**经过线**、**终点**，拖入到**指标**的字段就是桑基图的**连接线**。

其中桑基图**起点**、**经过点**、**终点**的顺序是由拖入到**维度**中的字段顺序决定的。也可以在**维度**手动拖动更改字段顺序，从而改变桑基图的**起点**、**经过点**、**终点**。

![取数](./images/2023-05-31-16-09-01.png)

### 颜色{#colour}

在**维度**中，可以更改**维度**对应的字段在桑基图中的颜色填充，默认为**自动**,**自动**使用主题色板中颜色进行填充，也提供**无填充**、**颜色填充**、**色板**和**色阶**填充。

也支持将模型中的字段拖入到**颜色**，利用字段值的不同，进行相对于的颜色填充。

![颜色](./images/2023-05-31-15-29-51.png)

### 布局{#layout}

**样式**>**组件**>**布局**中允许用户设置整体排列方向，具体效果如下图：

| 水平排列 | 垂直排列 |
| :---------: | :--------: |
| ![水平](./images/2023-05-31-16-17-46.png) | ![垂直](./images/2023-05-31-16-18-52.png) |

**布局**具体提供如下属性：

![布局](./images/2023-05-31-16-45-46.png)

- **排列方式**：设置桑基图的排列方向，提供**水平**和**垂直**两种属性，默认**水平**
- **节点宽度**：设置**起点**、**经过点**和**终点**的宽度，默认20px
- **节点间隔**：设置**起点**、**经过点**和**终点**的间隔距离，默认10px
- **可拖动节点**：允许拖动**起点**、**经过点**和**终点**，默认不勾选，具体效果如下图：

![拖动](./images/2023-05-31-16-43-11.gif)

### 连接线{#connecting-line}

**样式**>**组件**>**连接线**中可以设置连接线的相关属性，具体如下：

![连接线](./images/2023-05-31-16-51-53.png)

- **颜色**：设置**连接线**颜色样式，提供如下属性：
  - **继承源节点**：桑基图的整体流行是从左到右或者从上到下。如果选择**继承源节点**，那么**连接线**就会继承左边或者上面节点颜色设置
  - **自定义**：自定义**连接线**的颜色填充
- **不透明度**：设置**连接线**颜色的透明度，设置的值越小，颜色越透明，取值范围0-1，默认0.4
- **曲度**：设置**连接线**弯曲程度，设置的值越大，弯曲程度越大，取值范围0-1，默认0.5

### 高亮区块{#highlight}

**样式**>**组件**>**高亮区块**中可以设置鼠标放入到各节点或**连接线**上的高亮样式，具体属性如下：

![高亮](./images/2023-05-31-17-55-54.png)

- **高亮显示内容**：设置触发高亮的内容区域，具体如下：
  - **默认**：当鼠标移入在某个节点上，将会高亮当前节点前后节点以及高亮前后**连接线**，此时**连接线**的颜色是带有**连接线**颜色设置中透明度设置属性；当鼠标移入在某个**连接线**上，将会高亮当前**连接线**前后节点，此时**连接线**的颜色是不会带有**连接线**颜色设置中透明度设置属性
  - **仅节点或边**：设置此属性后，鼠标移入到节点或**连接线**时，只会将高亮当前鼠标移入的节点或**连接线**，不会再同时高亮相邻的节点或**连接线**

| 鼠标放入节点 | 鼠标放入连接线 |
| :---------: | :--------: |
| ![节点](./images/2023-05-31-17-41-19.png) | ![连接线](./images/2023-05-31-17-40-06.png) |

- **颜色**：设置高亮区块颜色，默认无
- **边框**：设置高亮区块边框样式
- **外阴影**：设置高亮区块阴影样式，默认无阴影样式

### 系列{#series}

**样式**>**系列**中可以单独各个节点的样式，具体提供如下属性：

- [标签](#label)
- [填充](#fill)
- [边框](#frame)
- [阴影](#shadow)

### 标签{#label}

设置桑基图对应节点上的标签样式，提供如下属性：

![标签](./images/2023-05-31-17-05-39.png)

- **显示**：设置对应节点上标签是否显示，默认**显示**
- **字体**：设置标签内容字体，包括**字体**、**字号**、**斜体**、**颜色**
- **文字阴影**：设置标签内容的阴影，默认**无阴影**
- **位置**：设置对应节点上标签的显示位置，提供**自动**、**上方**、**下方**、**内部居中**、**左侧**和**右侧**，默认**自动**
- **角度**：设置对应节点上标签的旋转角度，提供**0**和**90**，也可以手动输入其他度数，默认**0**

### 填充{#fill}

设置桑基图对应节点以及该节点右侧或下方**连接线**的颜色填充，提供**自动**、**无填充**和**颜色填充**三种填充方式，默认自动。

![填充](./images/2023-05-31-17-22-34.png)

::: tip
如果在**样式**>**组件**>**连接线**中可以将**连接线**的填充方式设置成**自定义**，那么这里的颜色设置将不会作用到指定节点右侧或下方的**连接线**上，即**连接线**本身的样式设置优先级最高。
:::

### 边框{#frame}

设置桑基图对应节点边框样式，提供四种边框样式，具体如下图，默认**无**。

![边框](./images/2023-05-31-17-25-34.png)

### 阴影{#shadow}

设置桑基图对应节点阴影样式，默认**无**阴影样式。

![阴影](./images/2023-05-31-17-29-29.png)