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