Shulou(Shulou.com)06/01 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.