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点击链接直接进入桑基图参数配置项。

猜你喜欢

转载自blog.csdn.net/Gunba1/article/details/128545147