ECharts系列：桑基的使用

桑基图

本章介绍 ECharts 系列的桑基图（series[i]-sankey）。我们也称桑基图为桑基能量平衡图，具有特殊类型的流程图，它主要用来表示原材料、能量等如何从初始形式经过中间过程的加工、转化到达最终形式。以下是使用桑基图的一个实例，您可以参考它。

示例：

点击编辑实例 》》

桑基图可视编码

桑基图将原数据中的每个节点（node）编码成一个小矩形，不同的节点尽量用不同的颜色展示，小矩形旁边的 label 编码的是节点的名称。

此外，图中每两个小矩形之间的边编码的是原数据中的 link，边的粗细编码的是 link 中的 value。

排序： 如果想指定结果的纵向顺序，那么可以把 layoutIterations 设为 0，此时纵向的顺序依照数据在 links 中出现的顺序。

桑基图属性

type

ECharts桑基图的 type 设置为 sankey。

zlevel

所有图形的 zlevel 值，默认为 0。

zlevel 用于 Canvas 分层，不同 zlevel 值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。

zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

z

组件的所有图形的 z 值，默认值为 2。控制图形的前后顺序。z 值小的图形会被 z 值大的图形覆盖。

z 相比 zlevel 优先级更低，而且不会创建新的 Canvas。

left

sankey 组件离容器左侧的距离，默认为 5%。

left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。

如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。

top

sankey组件离容器上侧的距离，默认为 5%。

top 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'top', 'middle', 'bottom'。

如果 top 的值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐。

right

sankey组件离容器右侧的距离，默认为 20%。

right 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。

bottom

sankey组件离容器下侧的距离，默认为 5%。

bottom 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。

width

设置 sankey 组件的宽度。

height

设置 sankey 组件的高度。

nodeWidth

图中每个矩形节点的宽度，默认为 20。

nodeGap

桑基图中每一列任意两个矩形节点之间的间隔，默认间隔为 8。

layoutIterations

布局的迭代次数，用来不断优化图中节点的位置，以减少节点和边之间的相互遮盖。

默认布局迭代次数：32。

经测试，布局迭代次数不要低于默认值。

label

label 描述了每个矩形节点中文本标签的样式。

itemStyle

桑基图节点矩形的样式。

lineStyle

桑基图边的样式，其中 lineStyle.normal.color 支持设置为'source'或者'target'特殊值，此时边会自动取源节点或目标节点的颜色作为自己的颜色。

data[i]

桑基图中的数据内容数组。数组项可以为单个数值，如：

[12, 34, 56, 10, 23]

如果需要在数据中加入其它维度给 visualMap 组件用来映射到颜色等其它图形属性。每个数据项也可以是数组，如：

[[12, 14], [34, 50], [56, 30], [10, 15], [23, 10]]

这时候可以将每项数组中的第二个值指定给 visualMap 组件。

更多时候我们需要指定每个数据项的名称，这时候需要每个项为一个对象：

[{
    // 数据项的名称
    name: '数据1',
    // 数据项值8
    value: 10
}, {
    name: '数据2',
    value: 20
}]

需要对个别内容指定进行个性化定义时：

[{
    name: '数据1',
    value: 10
}, {
    // 数据项名称
    name: '数据2',
    value : 56,
    //自定义特殊 tooltip，仅对该数据项有效
    tooltip:{},
    //自定义特殊itemStyle，仅对该item有效
    itemStyle:{}
}]

nodes

同上述的 data。

links[i]

节点间的关系数据。示例：

links: [{
    source: 'n1',
    target: 'n2'
}, {
    source: 'n2',
    target: 'n3'
}]

edges

同上述的 links 所述。

silent

图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。

animation

是否开启动画，默认值为 true，即开启动画。

animationThreshold

是否开启动画的阈值，默认的阈值为 2000，当单个系列显示的图形数量大于这个阈值时会关闭动画。

animationDuration

初始动画的时长（默认 1000），支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果：

animationDuration: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

animationEasing

初始动画的缓动效果，默认为 linear。不同的缓动效果可以参考 缓动示例。

animationDelay

初始动画的延迟，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例：

animationDelay: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

animationDurationUpdate

数据更新动画的时长（默认为 300）。

支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果：

animationDurationUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

animationEasingUpdate

数据更新动画的缓动效果，默认效果为 cubicOut。

animationDelayUpdate

数据更新动画的延迟，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例：

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例