请问echarts的force力引导图一动就会旋转请问,如何修改?

image.png

如上图,发现在鼠标去拖动其中节点时,就会转动起来,非常影响用户体验,使用layoutAnimation: false,取消了动画,但是这样的话又会导致选择标签时,出来的节点显示混乱,如下图
image.png
中心节点是职业病,但是现在呈现的效果很难看,请问如何调整呢?望赐教,不胜感激。

$(document).keypress(function (e) {
        // 回车键事件
        if (e.which == 13) {
            searchAllrelation();
        }
    });
    window.onresize = function () {

        myChart.resize();
    }

    $.ajaxSetup({ async: false });
    var myChart = echarts.init(document.getElementById("guanxi"));
    // myChart.showLoading();

    // myChart.hideLoading();
    option = {
        // backgroundColor: "white",
        title: {
            
            textStyle: {
                // color: "white",
                fontWeight: "lighter",
            }
        },
        // animationDurationUpdate: 1500,
        // animationEasingUpdate: 'quinticInOut',
        legend: {
            // x: "center",
            right: 0,
            align: "right",
            show: true,
            data: ["疾病","所属科室", "并发症", "症状", "诊断检查", "好评药品", "常用药品", "忌吃","推荐食谱","宜吃"],
            orient: "vertical"
        },
        series: [
            {
                type: 'graph',
                layout: 'force',
                symbolSize: 70,
                edgeSymbol: ['circle', 'arrow'],
                edgeSymbolSize: [4, 4],
                edgeLabel: {
                    normal: {
                        show: true,
                        textStyle: {
                            fontSize: 13
                        },
                        formatter: "{c}"
                    }
                },
                force: {
                    repulsion: 1000,
                    edgeLength: [10, 100],
                    layoutAnimation: false
                },
                focusNodeAdjacency: true,
                draggable: true,
                roam: true, //配置后,树图就可以开启鼠标缩放和平移漫游
                categories: [{
                        name: '疾病',
                    },
                    {
                    name: '所属科室',
                    // itemStyle: {
                    //     normal: {
                    //         color: "#009800",
                    //     }
                    // }
                }, {
                    name: '并发症',
                    // itemStyle: {
                    //     normal: {
                    //         color: "#4592FF",
                    //     }
                    // }
                }, {
                    name: '症状',
                    // itemStyle: {
                    //     normal: {
                    //         color: "#3592F",
                    //     }
                    // }
                },
                {
                    name: '诊断检查',
                }, {
                    name: '好评药品',
                }, {
                    name: '常用药品',
                },
                {
                    name: '忌吃',
                },
               {
                    name: '推荐食谱',
                },
                {
                    name: '宜吃',
                },
                ],
                label: {
                    normal: {
                        show: true,
                        textStyle: {
                            fontSize: 15
                        },
                    }
                },
                tooltip: {
                    formatter: function (node) { // 区分连线和节点,节点上额外显示其他数字
                        if (!node.value) {
                            return node.data.name;
                        } else {
                            return node.data.name + ":" + node.data.showNum;
                        }
                    },
                },
                lineStyle: {
                    normal: {
                        opacity: 0.9,
                        width: 1,
                        curveness: 0.3
                    }
                },
                // progressiveThreshold: 700,
                nodes: [],
                links: [],



            }
        ]
    };

相关echarts配置设置如下

看echarts官网力导向图的demo,它不会有鼠标拖拽就旋转的效果啊,让我觉得还有希望,可是实在不知道如何修改😥
image.png

阅读 3.5k
1 个回答
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题