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

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
                }
            }
        ]
    });
});
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐