{{ target: series-sankey }}
** 桑基图 **
是一种特殊的流图(可以看作是有向无环图)。 它主要用来表示原材料、能量等如何从最初形式经过中间过程的加工或转化达到最终状态。
示例:
桑基图将原数据中的每个node
编码成一个小矩形,不同的节点尽量用不同的颜色展示,小矩形旁边的label
编码的是节点的名称。
此外,图中每两个小矩形之间的边编码的是原数据中的link
,边的粗细编码的是link
中的value
。
如果想指定每层节点的顺序是按照 data 中的顺序排列的。可以设置 layoutIterations 为 0
。
{{ 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’ ) }}
桑基图中每个矩形节点的宽度。
桑基图中每一列任意两个矩形节点之间的间隔。
桑基图中节点的对齐方式,默认是双端对齐,可以设置为左对齐或右对齐,对应的值分别是:
justify
: 节点双端对齐。left
: 节点左对齐。right
: 节点右对齐。布局的迭代次数,目的是不断迭代优化图中节点和边的位置,以减少节点和边之间的相互遮盖,默认值是 32
。如果希望图中节点的顺序是按照原始 data 中的顺序排列的,可设该值为 0
。
桑基图中节点的布局方向,可以是水平的从左往右,也可以是垂直的从上往下,对应的参数值分别是 horizontal
, vertical
。
控制节点拖拽的交互,默认开启。开启后,用户可以将图中任意节点拖拽到任意位置。若想关闭此交互,只需将值设为 false
就行了。
桑基图每一层的设置。可以逐层设置,如下:
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 } }]
指定设置的是桑基图哪一层,取值从 0 开始。
{{ use: sankey-state( prefix = “##” ) }}
{{ use: sankey-state( prefix = “###” ) }}
{{ use: partial-version( version = “5.0.0” ) }}
{{ use: sankey-state( prefix = “###” ) }}
{{ use: partial-version( version = “5.0.0” ) }}
{{ use: sankey-state( prefix = “###” ) }}
label
描述了每个矩形节点中文本标签的样式。
{{ use: partial-label( prefix = “##”, defaultShowLabel = true, defaultPosition = “‘right’”, formatter1d = true ) }}
{{ use: partial-label-layout( prefix = “##” ) }}
桑基图节点矩形的样式。
{{ use: partial-item-style( prefix = “##”, useColorPalatte = true, defaultBorderWidth = 1, defaultBorderColor = “‘#aaa’”, useDecal = true ) }}
桑基图边的样式,其中 lineStyle.color 支持设置为'source'
或者'target'
特殊值,此时边会自动取源节点或目标节点的颜色作为自己的颜色。
从 5.0 开始, lineStyle.color 还可以设置为'gradient'
,取从源节点到目标节点的渐变色。
{{ use: partial-sankey-line-style( prefix = “##” ) }}
桑基图的高亮状态。
{{ use: partial-focus-blur-scope( isTree = true isSankey = true ) }}
{{ use: sankey-state( prefix = “##” ) }}
{{ use: partial-version( version = “5.0.0” ) }}
桑基图的淡出状态。开启 emphasis.focus 后有效。
{{ use: sankey-state( prefix = “##” ) }}
{{ use: partial-version( version = “5.0.0” ) }}
桑基图的选中状态。开启 selectedMode 后有效。
{{ use: sankey-state( prefix = “##” ) }}
{{ use: partial-selected-mode( version = ‘5.0.0’ ) }}
桑基图节点数据列表。
data: [{ name: 'node1', // This attribute decides the layer of the current node. depth: 0 }, { name: 'node2', depth: 1 }]
注意: 节点的name
不能重复。
节点的名称。
节点的值,可用来指定节点的纵向高度或横向的宽度。
节点所在的层,取值从 0 开始。
该节点的样式。
{{ use: partial-item-style( prefix = “###”, useColorPalatte = true, useDecal = true ) }}
该节点标签的样式。
{{ use: partial-label( prefix = “###” ) }}
{{ use: sankey-node-state( prefix = “###” ) }}
{{ use: partial-version( version = “5.0.0” ) }}
{{ use: sankey-node-state( prefix = “###” ) }}
{{ use: partial-version( version = “5.0.0” ) }}
{{ use: sankey-node-state( prefix = “###” ) }}
{{ use: partial-tooltip-in-series-data() }}
同 data
节点间的边。注意: 桑基图理论上只支持有向无环图(DAG, Directed Acyclic Graph),所以请确保输入的边是无环的. 示例:
links: [{ source: 'n1', target: 'n2' }, { source: 'n2', target: 'n3' }]
边的源节点名称
边的目标节点名称
边的数值,决定边的宽度。
关系边的线条样式。
{{ use: partial-sankey-line-style( prefix = “###” ) }}
{{ use: partial-sankey-line-style( prefix = “####” ) }}
{{ use: partial-version( version = “5.0.0” ) }}
{{ use: partial-sankey-line-style( prefix = “####” ) }}
{{ use: partial-version( version = “5.0.0” ) }}
{{ use: partial-sankey-line-style( prefix = “####” ) }}
同 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’
桑基图边的颜色。
#${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} ) }}