{{ target: series-sankey }}

series.sankey(Object)

** 桑基图 **

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

示例：

~700x580

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

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

如果想指定每层节点的顺序是按照 data 中的顺序排列的。可以设置 layoutIterations 为 0。

type(string) = ‘sankey’

{{ use: partial-component-id( prefix = “#” ) }}

{{ use: partial-series-name() }}

{{ use: partial-rect-layout-width-height( componentName = ‘sankey’, defaultLeft = ‘5%’, defaultRight = ‘20%’, defaultTop = ‘5%’, defaultBottom = ‘5%’, defaultWidth = ‘null’, defaultHeight = ‘null’ ) }}

nodeWidth(number) = 20

桑基图中每个矩形节点的宽度。

nodeGap(number) = 8

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

nodeAlign(string) = ‘justify’

桑基图中节点的对齐方式，默认是双端对齐，可以设置为左对齐或右对齐，对应的值分别是：

  • justify: 节点双端对齐。
  • left: 节点左对齐。
  • right: 节点右对齐。

layoutIterations(number) = 32

布局的迭代次数，目的是不断迭代优化图中节点和边的位置，以减少节点和边之间的相互遮盖，默认值是 32。如果希望图中节点的顺序是按照原始 data 中的顺序排列的，可设该值为 0。

orient(string) = ‘horizontal’

桑基图中节点的布局方向，可以是水平的从左往右，也可以是垂直的从上往下，对应的参数值分别是 horizontal, vertical。

draggable(boolean) = true

控制节点拖拽的交互，默认开启。开启后，用户可以将图中任意节点拖拽到任意位置。若想关闭此交互，只需将值设为 false 就行了。

levels(Array)

桑基图每一层的设置。可以逐层设置，如下：

levels: [{
    depth: 0,
    itemStyle: {
        color: '#fbb4ae'
    },
    lineStyle: {
        color: 'source',
        opacity: 0.6
    }
}, {
    depth: 1,
    itemStyle: {
        color: '#b3cde3'
    },
    lineStyle: {
        color: 'source',
        opacity: 0.6
    }
}]

也可以只设置某一层：

levels: [{
    depth: 3,
    itemStyle: {
        color: '#fbb4ae'
    },
    lineStyle: {
        color: 'source',
        opacity: 0.6
    }
}]

depth(number)

指定设置的是桑基图哪一层，取值从 0 开始。

{{ use: sankey-state( prefix = “##” ) }}

emphasis(Object)

{{ use: sankey-state( prefix = “###” ) }}

blur(Object)

{{ use: partial-version( version = “5.0.0” ) }}

{{ use: sankey-state( prefix = “###” ) }}

select(Object)

{{ use: partial-version( version = “5.0.0” ) }}

{{ use: sankey-state( prefix = “###” ) }}

label(Object)

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

{{ use: partial-label( prefix = “##”, defaultShowLabel = true, defaultPosition = “‘right’”, formatter1d = true ) }}

labelLayout(Object|Function)

{{ use: partial-label-layout( prefix = “##” ) }}

itemStyle(Object)

桑基图节点矩形的样式。

{{ use: partial-item-style( prefix = “##”, useColorPalatte = true, defaultBorderWidth = 1, defaultBorderColor = “‘#aaa’”, useDecal = true ) }}

lineStyle(Object)

桑基图边的样式

{{ use: partial-sankey-line-style( prefix = “##” ) }}

emphasis(Object)

桑基图的高亮状态。

{{ use: partial-focus-blur-scope( isGraph = true ) }}

{{ use: sankey-state( prefix = “##” ) }}

blur(Object)

{{ use: partial-version( version = “5.0.0” ) }}

桑基图的淡出状态。开启 emphasis.focus 后有效。

{{ use: sankey-state( prefix = “##” ) }}

select(Object)

{{ use: partial-version( version = “5.0.0” ) }}

桑基图的选中状态。开启 selectedMode 后有效。

{{ use: sankey-state( prefix = “##” ) }}

{{ use: partial-selected-mode( version = ‘5.0.0’ ) }}

data(Array)

桑基图节点数据列表。

data: [{
    name: 'node1',
    // This attribute decides the layer of the current node.
    depth: 0
}, {
    name: 'node2',
    depth: 1
}]

注意: 节点的name不能重复。

name(string)

节点的名称。

value(number)

节点的值，可用来指定节点的纵向高度或横向的宽度。

depth(number)

节点所在的层，取值从 0 开始。

itemStyle(Object)

该节点的样式。

{{ use: partial-item-style( prefix = “###”, useColorPalatte = true, useDecal = true ) }}

label(Object)

该节点标签的样式。

{{ use: partial-label( prefix = “###” ) }}

emphasis(Object)

{{ use: sankey-node-state( prefix = “###” ) }}

blur(Object)

{{ use: partial-version( version = “5.0.0” ) }}

{{ use: sankey-node-state( prefix = “###” ) }}

select(Object)

{{ use: partial-version( version = “5.0.0” ) }}

{{ use: sankey-node-state( prefix = “###” ) }}

{{ use: partial-tooltip-in-series-data() }}

nodes(Array)

同 data

links(Array)

节点间的边。注意: 桑基图理论上只支持有向无环图（DAG, Directed Acyclic Graph），所以请确保输入的边是无环的. 示例：

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

source(string)

边的源节点名称

target(string)

边的目标节点名称

value(number)

边的数值，决定边的宽度。

lineStyle(Object)

关系边的线条样式。

{{ use: partial-sankey-line-style( prefix = “###” ) }}

emphasis(Object)

lineStyle(Object)

{{ use: partial-sankey-line-style( prefix = “####” ) }}

blur(Object)

{{ use: partial-version( version = “5.0.0” ) }}

lineStyle(Object)

{{ use: partial-sankey-line-style( prefix = “####” ) }}

select(Object)

{{ use: partial-version( version = “5.0.0” ) }}

lineStyle(Object)

{{ use: partial-sankey-line-style( prefix = “####” ) }}

edges(Array)

同 links

{{ use: partial-silent( prefix = “#” ) }}

{{ use: partial-animation( prefix = “#”, defaultAnimationEasing = “‘linear’”, defaultAnimationDuration = 1000 ) }}

{{ use: partial-tooltip-in-series() }}

{{ target: partial-sankey-line-style }}

#${prefix} color(Color) = ‘#314656’

桑基图边的颜色。

  • 'source': 使用源节点颜色。
  • 'target': 使用目标节点颜色。
  • 'gradient': 以源节点和目标节点的颜色做一个渐变过度色。(5.0开始支持)

#${prefix} opacity(number) = 0.2

桑基图边的透明度。

#${prefix} curveness(number) = 0.5

桑基图边的曲度。

{{ use: partial-style-shadow( prefix = ${prefix} ) }}

{{ target: sankey-node-state }}

#${prefix} label(Object)

{{ use: partial-label( prefix = “#” + ${prefix} ) }}

#${prefix} itemStyle(Object)

{{ use: partial-item-style( prefix = “#” + ${prefix}, useDecal = true ) }}

{{ target: sankey-state }}

#${prefix} label(Object)

{{ use: partial-label( prefix = “#” + ${prefix}, formatter1d = ${prefix} === ‘##’ ) }}

#${prefix} itemStyle(Object)

{{ use: partial-item-style( prefix = “#” + ${prefix} ) }}

#${prefix} lineStyle(Object)

{{ use: partial-sankey-line-style( prefix = “#” + ${prefix} ) }}