效果图

力引导关系图

  力引导布局是模拟弹簧电荷模型在每两个节点之间添加一个斥力，每条边的两个节点之间添加一个引力，每次迭代节点会在各个斥力和引力的作用下移动位置，多次迭代后节点会静止在一个受力平衡的位置，达到整个模型的能量最小化。力引导布局的结果有良好的对称性和局部聚合性。

数据

chartData:{data:[{name: 'node1',symbolSize: 50,itemStyle:{color: '#fac858'}},{name: 'node2',symbolSize: 30,itemStyle:{color: '#91cc75'}},{name: 'node3',symbolSize: 30,itemStyle:{color: '#91cc75'}},{name: 'node4',symbolSize: 30,itemStyle:{color: '#91cc75'}},{name: 'node5',symbolSize: 30,itemStyle:{color: '#91cc75'}},{name: 'node6',symbolSize: 20},{name: 'node7',symbolSize: 20},{name: 'node8',symbolSize: 20},{name: 'node9',symbolSize: 20},{name: 'node10',symbolSize: 20},{name: 'node11',symbolSize: 20},{name: 'node12',symbolSize: 20},],links:[{source: 'node1',target: 'node2'},{source: 'node1',target: 'node3'},{source: 'node1',target: 'node4'},{source: 'node1',target: 'node5'},{source: 'node2',target: 'node6'},{source: 'node2',target: 'node7'},{source: 'node3',target: 'node8'},{source: 'node4',target: 'node9'},{source: 'node5',target: 'node10'},{source: 'node4',target: 'node11'},{source: 'node3',target: 'node12'},]}

Dom

<div id="tupuDom" style="height: 400px;margin-top: 20px;"></div>

函数

initChart(){let option = {};echarts.dispose(document.getElementById("tupuDom"))let charts = echarts.init(document.getElementById("tupuDom"));option = {tooltip: {trigger: 'item',             },series: [{name: 'Les Miserables',type: 'graph',// 采用力引导布局layout: 'force',force:{// 节点之间的斥力因子repulsion: 150,// 显示布局的迭代动画,数据节点较多时建议开启layoutAnimation: true,// 边的两个节点之间的距离edgeLength: 50},data: this.chartData.data,links: this.chartData.links,// 开启鼠标缩放和平移漫游roam: true,label: {show: 'true',position: 'inside',// 'truncate': 截断，并在末尾显示ellipsis配置的文本，默认为…; ‘break’: 换行overflow: 'truncate',ellipsis: '...',// 标签宽度width: 50},lineStyle: {// 连线的颜色color: 'source',// 边的曲度,从 0 到 1 的值，值越大曲度越大。curveness: 0.3},emphasis: {// 在高亮图形时,聚焦关系图中的邻接点和边的图形。focus: 'adjacency',// 高亮时线的宽度lineStyle: {width: 10}},// 提示框信息tooltip: {formatter: (item)=>{if(item.data.name){// 鼠标移入节点提示框信息return item.name}else{// 鼠标移入线的提示框信息return item.data.source + '-'+item.data.target}}}}]};charts.setOption(option);}

调用

this.initChart()