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

2023-12-08 727 views
6

Version

4.6.0

Steps to reproduce

使用如下设置:

tooltip: {
        show: true,
        showContent: true,
        trigger: 'item',
        triggerOn: 'mousemove',
        alwaysShowContent: false,
        showDelay: 100,
        hideDelay: 2000,
        enterable: false,
        position: 'right',
        confine: false,
        transitionDuration: 0.2,
    },
    legend: {
        show: true,
        type: "scroll",
        animation: true
    },
    series: [{
        type: 'graph',
        name: '',
        layout: 'circular',
        // animation: false,
        legendHoverLink: true,
        hoverAnimation: true,
        coordinateSystem: null,
        xAxisIndex: 0,
        yAxisIndex: 0,
        force: {
            repulsion: 10,
            gravity: 0.1,
            edgeLength: 500,
            layoutAnimation: false
        },
        roam: true,
        nodeScaleRatio: 0.6,
        draggable: true,
        focusNodeAdjacency: true,
        symbol: 'circle',
        edgeSymbol: ['none', 'arrow'],
        edgeSymbolSize: 5,
        itemStyle: {
            color: '#6D9AA2',
            borderType: 'solid',
            borderColor: '#fff',
            borderWidth: 1,
            opacity: 1,
            shadowBlur: 10,
            shadowColor: 'rgba(0, 0, 0, 0.3)',
            emphasis: {
                color: "#334553"
            }
        },
        lineStyle: {
            normal: {
                width: '1',
                type: 'solid',
                curveness: 0.3,
                opacity: 0.2
            },
            emphasis: {
                width: 10
            }
        },
        label: {
            normal: {
                show: true,
                position: 'inside',
                textStyle: {
                    color: 'rgba(164,100,34,0.6)',
                    fontStyle: 'normal',
                    fontWeight: 'bolder',
                    fontFamily: 'sans-serif',
                    fontSize: 15,
                }
            },
            emphasis: {}
        },
        edgeLabel: {
            normal: {
                show: false
            },
        },
        data:[{}],
        links:[{}]

data和 links 比较长,难以上传代码,故给一张图片 force bug 当使用鼠标缩放后,就恢复正常了。

What is expected?

希望能够有好的解决办法,这个问题已经存在很久了,之前有一个人提出了问题但是没上传代码问题被自动关闭了。其他社区也看到有人提出问题,但是没有找到解决办法。

What is actually happening?

实际上就是重新绘制图的时候好像截了动画过程中的一帧,但是如果打开动画,慢慢看他加载完毕,最后结果就是正常的。

回答

5

代码跑不起来,请根据上面的地址保存一个可运行的 demo 吧

8

保存了一个demo,可以观察代码最后两行(有没有 true 都是一样的),运行两次(本来是更新节点数据的时候发现的),会出现节点不在线条指向地方的错误,缩放后正常,提供如下图片:

图片
1

在option中开启animation就不会出现布局错乱,不开启动画偶尔会导致布局错乱

7

在最新版中已经修复~ 4.7.0 Demo https://jsfiddle.net/z378hrtg/ 看看是否解決了你的需求,可以试试 setTimeout 改下数据

似乎并没有修复 image

chart.setOption(init_painting);

chart.setOption(init_painting);

仅仅执行两次绘图还是一样偏移 image

2

animationDurationUpdate: 0

就可以解决这个问题了

是的,这样似乎可以解决问题,但是按道理来说不应该需要这样设置就可以正常运行的