echarts 桑基图sankey
是一种特殊的流图(可以看作是有向无环图)它主要用来表示原材料、能量等如何从最初形式经过中间过程的加工或转化达到最终状态1、配置datadata: [{name: 'node1',value,节点的值,可用来指定节点的纵向高度或横向的宽度。depth: 0节点所在的层,取值从0开始。}, {name: 'node2',depth: 1}]2、配置seriesserises:[{links: [{
·
是一种特殊的流图(可以看作是有向无环图)它主要用来表示原材料、能量等如何从最初形式经过中间过程的加工或转化达到最终状态
1、配置data
data: [{
name: 'node1',
value, 节点的值,可用来指定节点的纵向高度或横向的宽度。
depth: 0 节点所在的层,取值从0开始。
}, {
name: 'node2',
depth: 1
}]
2、配置series
serises:[{
links: [{
source: 'n1',
target: 'n2',
value:n, 边的数值,决定边的宽度。
}, {
source: 'n2',
target: 'n3'
}],
nodes, 别名,同data
edges, 别名,同links
layoutIterations:32, 布局的迭代次数,目的是不断迭代优化图中节点和边的位置,以减少节点和边之间的相互遮盖,默认值是32,如果希望图中节点的顺序是按照原始data中的顺序排列的,可设该值为 0。
}]
效果图:
data属性
links属性
代码示例:
myChart.showLoading();
$.get(ROOT_PATH + '/data/asset/data/energy.json', function (data) {
myChart.hideLoading();
console.log(data.nodes)
console.log(data.links)
myChart.setOption(option = {
title: {
text: 'Sankey Diagram'
},
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'sankey',
data: data.nodes,
links: data.links,
emphasis: {
focus: 'adjacency'
},
lineStyle: {
color: 'gradient',
curveness: 0.5
}
}
]
});
});
更多推荐
已为社区贡献36条内容
所有评论(0)