Echarts桑基图的排列顺序

2024-06-11 17:48:08

首先我们来说几个关于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点击链接直接进入桑基图参数配置项。

Echarts桑基图的排列顺序相关推荐

Echarts桑基图sankey点击高亮显示
Echarts桑基图sankey点击高亮显示 2022-02-21更新: 点击某一项将与其有关联的所有父项目和子项目全部高亮显示,并降低其他无关项目透明度,再次点击则恢复原有状态: 在线DEMO查看 ...
echarts 桑基图添加标志线问题
最近做一个项目,要求在桑基演化图的基础上添加"时间线",由于echart桑基图中没有该参数,所以需要两种图形叠加实现. 1.绘制基础桑基图 product.json {" ...
echarts 桑基图
使用echarts的桑基图时发现一个问题: 当一个流转状态的值比较大时且覆盖了其它的流转状态,那么这时鼠标移到这些值小的流转状态,tooltip提示出来的仍是那个大的流转状态,也就是选不中这些小的状态 ...
js实现echarts桑基图缩放与拖动
需求:解决节点数据较小时,桑基图文字重叠问题. 由于echarts的dataZoom工具仅适用于直角坐标系,考虑通过改变画布大小与位置实现效果: 1.缩放 this.chartBox:画布外层容器, ...
echarts 桑基图sankey
是一种特殊的流图(可以看作是有向无环图)它主要用来表示原材料.能量等如何从最初形式经过中间过程的加工或转化达到最终状态1.配置datadata: [{name: 'node1',value, 节点的值 ...
桑基图（Echarts）——自定义风格
桑基图绘制--使用Echarts 桑基图(Sankey diagram),即桑基能量分流图,也叫桑基能量平衡图.它是一种特定类型的流程图,图中延伸的分支的宽度对应数据流量的大小,通常应用于能源.材料成 ...
mysql 图形插件_ECharts绘图解决方案——流动关系图（桑基图）
| 导语基于实际业务场景使用ECharts的经验,总结一些通用的解决方案. 应用场景用流动关系图来映射品牌之间的有效换机数量,从而帮助运营对手机品牌的行情做分析和预测.图形说明一期:图形中间为分 ...
数据治理 Python桑基图处理表关系
数据治理 Python桑基图处理表关系需求随着hive库表越来越多,调度出问题后,排查时间越来越长.计划通过桑基图以及血缘图谱解决,当前先用桑基图页面顶一段时间.后期做成web服务,如果有可能,尽 ...
python桑基图教程_桑基图实例(Echarts版）
以前有看过桑基图的实例,但是一直没有实践过,最近在搞用户行为分析,想看看用户访问路径,一直没有一个很好的工具来展现.之前手工在思维导图的搞过,但是太费事了,这次想起了这个桑基图,想看看能不能实现想要的 ...

最新文章

热门文章