Echarts中怎么实现一个力导向图

今天就跟大家聊聊有关Echarts中怎么实现一个力导向图，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

html页面：

js代码：

 $(function () {                    var  data = [{                name: 'node01',                des: 'nodedes01',                symbolSize: 70,                category: 0,            }, {                name: 'node02',                des: 'nodedes02',                symbolSize: 50,                category: 1,            }, {                name: 'node03',                des: 'nodedes3',                symbolSize: 50,                category: 1,            }, {                name: 'node04',                des: 'nodedes04',                symbolSize: 50,                category: 1,            },  {                name: 'node99',                des: 'nodedes99',                symbolSize: 50,                category: 1,            }, {                name: 'node05',                des: 'nodedes05',                symbolSize: 50,                category: 1,            }];            var links = [{                source: 'node01',                target: 'node02',                name: 'link01',                des: 'link01des'            }, {                source: 'node01',                target: 'node03',                name: 'link02',                des: 'link02des'            }, {                source: 'node01',                target: 'node04',                name: 'link03',                des: 'link03des'            }, {                source: 'node04',                target: 'node99',                name: 'link99',                des: 'link99des'            }, {                source: 'node01',                target: 'node05',                name: 'link04',                des: 'link05des'            }];                                var categories = [];                    for (var i = 0; i < 2; i++) {                        categories[i] = {                            name: '类目' + i                        };                    }                var pieChart = echarts.init(document.getElementById("echarts-pie-chart"));                var pieoption = {                    title : {                        text: '某用户画像分析',                    },                    tooltip : {                       formatter: function (x) {                                return x.data.des;                            }                    },                     legend: [{                            // selectedMode: 'single',                            data: categories.map(function (a) {                                return a.name;                            })                        }],                                       series : [                        {                                      type:'graph',                               layout: 'force', //图的布局，类型为力导图                                                 symbolSize: 40, // 调整节点的大小                                            roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启                                            edgeSymbol: ['circle', 'arrow'],                                            edgeSymbolSize: [2, 10],                                            edgeLabel: {                                                normal: {                                                    textStyle: {                                                        fontSize: 20                                                    }                                                }                                            },                                                                    force: {                                                //力引导图基本配置                                           layoutAnimation:true,                                            // xAxisIndex : 0, //x轴坐标 有多种坐标系轴坐标选项                                            // yAxisIndex : 0, //y轴坐标                                            gravity:0.02, //节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。                                            edgeLength: 30, //边的两个节点之间的距离，这个距离也会受 repulsion。[10, 50] 。值越小则长度越长                                            repulsion: 2500 //节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。                                            // repulsion: 3000, //节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。                                            // edgeLength: 80 //边的两个节点之间的距离，这个距离也会受 repulsion。[10, 50] 。值越小则长度越长                                            },                                            draggable: true,                                            lineStyle: {                                                normal: {                                                    width: 2,                                                    color: '#4b565b',                                                }                                            },                                            label: {                                                normal: {                                                    show: true,                                                    textStyle: {}                                                }                                            },                                            edgeLabel: {                                                normal: {                                                    show: true,                                                    formatter: function (x) {                                                        return x.data.name;                                                    }                                                }                                            },                                                        data:data,                            links:links,                             categories: categories                        }                    ]                                  };                pieChart.setOption(pieoption);                $(window).resize(pieChart.resize);                            });

最终展示效果如图：

看完上述内容，你们对Echarts中怎么实现一个力导向图有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注行业资讯频道，感谢大家的支持。