ECharts系列:桑基图的使用

2018-12-04 09:22 更新

桑基图

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

示例:

ECharts桑基图

点击编辑实例 》》

桑基图可视编码

桑基图将原数据中的每个节点(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;
}

也可以看该示例

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号