# 桑基图

桑基图是一种特殊的流图（可以看作是有向无环图）。它主要用来表示原材料、能量等如何从最初形式经过中间过程的加工或转化达到最终状态。

桑基图

# 属性

# 基础

基本属性： 同组件管理 -> 属性 -> 基本属性
系列颜色： 图形的颜色。可添加选择颜色显示，默认情况下图形节点的颜色为主题的颜色。

# 系列

树图布局： 水平布局/垂直布局。
对齐方式： 组件的对齐方式。
- 左右对齐
- 左对齐
- 右对齐
节点宽度： 组件各节点的宽度。
节点间隔： 组件各节点之间的间隔。
允许拖拽： 组件节点是否可以拖拽。
关闭鼠标事件： 关闭鼠标事件后不能与组件交互。
视区： 同组件管理 -> 属性 -> 视区

普通状态：
- 文本标签：
  - 显示： 是否显示文本。
  - 内容格式器： 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行。
    
    字符串模板变量
    - {a} : 系列名。
    - {b} : 数据名。
    - {c} : 数据值。
    - ｛d｝：百分比。
    - {@xxx}：数据中名为 xxx 的维度的值，如 {@product}表示名为 'product' 的维度的值。
    - {@[n]}：数据中维度 n 的值，如{@[3]}表示维度 3 的值，从 0 开始计数。
    例如：
```
  {b}: {c}
```
    - 回调函数： 示例：
```
  return data.value[0];
```
  参数 data 是内容格式器需要的单个数据参数。格式如下：
```
  {
      //传入的原始数据项
      data:{
         dataset:Array,
         name:string,
         //系列数据
         value:Array
          },
      //数据在传入的data数组中的index
      dataIndex:number|Array,
      //系列在传入的option,series中的index
      seriesIndex:number
  }
```
  - 位置： 文本的位置。
  - 文字距离： 文本距节点的位置。
  - 文字旋转： 文本标签字体的旋转角度。
  - 字体颜色： 文本标签字体颜色。
  - 字体大小： 文本标签字体大小。
  - 字体粗细： 文本标签字体粗细。
  - 字体： 文本标签字体样式。
- 图形样式：
  - 渐变色： 是否开启渐变色。
    - 渐变色方向： 渐变色方向。
    - 渐变色范围： 渐变色从起始颜色到结尾颜色的变化区间。
  - 颜色： 图形整体颜色。
  - 描边颜色： 图形描边颜色。
  - 描边线宽： 图形描边宽度。
  - 描边类型： 图形描边类型。
  - 阴影属性： 自定义散点图在垂直方向和水平方向上的阴影，同时可以设置散点图的模糊效果。
- 线样式：
  - 颜色来源： 是否根据数据区分线样式。
  - 来源：
    - 源节点
    - 目标节点
    - 渐变过渡色
  - 曲度： 线的曲度。
  - 透明度： 线的透明度。
高亮状态： 鼠标放到树节点上时高亮的标记和样式。
- 关闭高亮状态： 关闭高亮状态。
- 聚焦效果： 鼠标放置在树节点时树节点高亮显示（聚焦当前所在系列）。其余属性配置与普通状态相同。
选中状态： 选中状态下树节点的样式，选择模式为单选或多选时生效。
- 关闭选中状态： 关闭选中状态。
- 选择模式：
  - 不可选
  - 单选
  - 多选其余属性配置与普通状态相同。
层级样式： 针对每一个层进行配置，其优先级小于- 普通状态、- 高亮状态、- 选中状态。
- 指定层级： 指定需要配置的层级。
- 普通状态： 其属性配置与普通状态相同。
- 高亮状态： 其属性配置与高亮状态相同。
- 选中状态： 其属性配置与选中状态相同。
初始动画：
- 开启动画 是否开启初始动画。
- 动画时长（ms）： 初始动画的时长，支持回调函数，可以通过每个数据返回的不同的时长实现更戏剧化的初始动画效果。
- 缓动效果 初始动画的缓动效果。

# 数据

# 静态数据

上图中的示例JSON代码如下：

[
  {
    "name": "a",
    "source": "a",
    "target": "a1",
    "dataValue": 20,
    "linkValue": 5
  },
  {
    "name": "b",
    "source": "a",
    "target": "a2",
    "dataValue": 50,
    "linkValue": 20
  },
  {
    "name": "a1",
    "source": "b",
    "target": "b1",
    "dataValue": 10,
    "linkValue": 8
  },
  {
    "name": "a2",
    "source": "a",
    "target": "b1",
    "dataValue": 30,
    "linkValue": 3
  },
  {
    "name": "b1",
    "source": "b1",
    "target": "a1",
    "dataValue": 20,
    "linkValue": 5
  },
  {
    "name": "c",
    "source": "b1",
    "target": "c",
    "dataValue": 22,
    "linkValue": 2
  }
]

name： 维度，各节点的名称。
source： 维度，节点关系的开始节点名称。
target: 维度，节点管的的结束节点名称。

# 数据资源

# 交互

勾选启用，开启组件交互功能。当单击桑基图边时，绑定字段中数据会推送到变量中。关联此变量的组件将携带此变量值，触发数据请求，查询相关数据，更新组件。具体配置请参考组件交互。

# 节点单击事件

勾选启用，开启节点单击交互功能。

# 关系边单击事件

勾选启用，开启关系边单击交互功能。

# 数据响应

桑基图支持数据响应配置。

# 节点编程

# 事件

图表配置转换完成后： 图表 Option 配置转换完成后事件。
- 抛出的参数： 配置完成后的 Option 。
节点单击事件： 节点单击触发事件。
- 抛出的参数： 节点所携带的数据。
关系边单击事件： 关系边单击触发事件。
- 抛出的参数： 关系边所携带的数据。

# 动作

导入图表配置： 可导入 Echarts 图表 Option 配置。
- 接收的参数： 修改后的 Option 。

← 环形关系图气体状态桑基图 →