How to implement a Force directed Graph in Echarts
Today, I would like to talk to you about how to achieve a force map in Echarts, many people may not know much about it. In order to make you understand better, the editor summarized the following content for you. I hope you can get something according to this article.
Html page:
Js Code:
$(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); }); 最终展示效果如图：
After reading the above, do you have any further understanding of how to implement a force digraph in Echarts? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.
