Echarts力导向图graph 节点和线错乱问题

2,102 阅读1分钟

一、遇到问题:

Echarts 力导向图graph 使用 force 布局,设置series-graph.force.layoutAnimation:false后,如果更新数据,会导致布局错乱

二、错乱原因:

开启了动画animation的同时,迭代转动动画layoutAnimation改成了false导致的。

力引导布局会在多次迭代后才会稳定,layoutAnimation这个参数决定是否显示布局的迭代动画,在浏览器端节点数据较多(>100)的时候不建议关闭,布局过程会造成浏览器假死(此处造成错乱)。

三、解决方案:

方案1:
1、在series.force.layoutAnimation设置成true

方案2:

1、series.animation设置成false2、animationDurationUpdate: 0

参考链接:

力导向图里节点和连线错位

graph 使用 force 布局,设置series-graph.force.layoutAnimation:false后,如果更新数据,会导致布局错乱