Echarts桑基图的排列顺序

首先我们来说几个关于echarts的参数配置项

 layoutIterations，布局的迭代次数。官方的解释如下:

这个不配合图来看，还真有点懵。

意思就是，如果 layoutIterations=0，那么他的节点顺序按照你data里面的顺序来排列，如果不是0，那么他会按照系统觉得比较合适的排列顺序来排列。

看图:这个是data的设置顺序(只截图了一部分)

 如果layoutIterations=0，那么桑基图如下:

现在的桑基图是不是看着比较乱，各种线交叉在一起，看不清走向。

但是，如果 layoutIterations=32，(32也就是他的默认值，也可以根据自己图线的需求来设置这个值)，桑基图如下:

是不是这个图看着舒服多了。

所以layoutIterations的作用就是节点顺序是否按照data来排列，以及可以根据值的大小来设置一个合适的排列顺序，让图线走向更清楚一些。如果你的图线数据不多，可能就看不到变化哦。可以去官网试试。

这里有一个坑就是，如果data和links数据全部来源于后端返回，那么，一定要去看看后端返回的data数据里面，每条数据的data这部分是否一样。

比如:有可能他返回的时候， "Agricultural 'waste'"在第一个，但是下一条数据就是"Bio-conversion"在第一个。

那么这个时候每条数据的data，设置的排列顺序都不一样，那桑基图可能渲染的时候就会乱跳，没有规律，感觉每条数据间隔很大一样，其实不是数据间隔大，是返回的data这部分的排列顺序不一样。

draggable:是否可以拖动节点

默认值为true

这个可以自己设置试一试。

nodeWidth:节点的宽度

直接上图看效果，nodeWidth=25

 nodeWidth=50

 其他的桑基图参数配置，建议看官网更加清楚明了。

Documentation - Apache EChartsApache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。https://echarts.apache.org/zh/option.html#series-sankey.layoutIterations点击链接直接进入桑基图参数配置项。