效果图：
image.png
配置：
var option = {
title: {
text: '人物关系拓扑图',
show: true,
textStyle: {
color: '#fff',
fontWeight: 'normal'
},
padding: [10, 0, 10, -90],
left: '50%'
},
tooltip: {},
animationDuration: 1,
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
label: {
normal: {
show: true,
textStyle: {
fontSize: 12
},
}
},
legend: {
x: "center",
show: false,
data: ["事件", "人物"]
},
series: [
{
type: 'graph',
layout: 'force',
force: {
repulsion: 1000,
gravity: 0.01
},
symbolSize: 45,
focusNodeAdjacency: true,
roam: 'scale',
categories: [{
name: '事件',
itemStyle: {
normal: {
color: "#fff",
}
}
}, {
name: '人物',
itemStyle: {
normal: {
color: "#fff",
}
}
}],
label: {
normal: {
show: true,
textStyle: {
fontSize: 12,
color: '#333'
}
}
},
nodes: [{
name: '事件1',
id: '10000',
category: 0,
x: point1.x,
y: point1.y,
fixed: true,
symbolSize: 60
}, {
name: '付世文',
id: '10001',
category: 1
}, {
name: '邓志荣',
id: '10002',
category: 1
}, {
name: '李荣庆',
id: '10003',
category: 1
}, {
name: '郑志勇',
id: '10004',
category: 1
}, {
name: '事件2',
id: '20000',
category: 0,
x: point2.x,
y: point2.y,
fixed: true,
symbolSize: 60
}, {
name: '赵英杰',
id: '20001',
category: 1
}, {
name: '王承军',
id: '20002',
category: 1
}, {
name: '陈卫东',
id: '20003',
category: 1
}, {
name: '邹劲松',
id: '20004',
category: 1
}, {
name: '事件3',
id: '30000',
category: 0,
x: point3.x,
y: point3.y,
fixed: true,
symbolSize: 60
}, {
name: '赵成',
id: '30001',
category: 1
}, {
name: '陈现忠',
id: '30002',
category: 1
}, {
name: '陶泳',
id: '30003',
category: 1
}, {
name: '王德福',
id: '30004',
category: 1
}],
links: [{
source: '10000',
target: '10001',
lineStyle: {
normal: {
color: 'rgb(225,84,78)'
}
}
}, {
source: '10000',
target: '10002',
lineStyle: {
normal: {
color: 'rgb(225,84,78)'
}
}
}, {
source: '10000',
target: '10003',
lineStyle: {
normal: {
color: 'rgb(225,84,78)'
}
}
}, {
source: '10000',
target: '10004',
lineStyle: {
normal: {
color: 'rgb(225,84,78)'
}
}
}, {
source: '20000',
target: '20001',
lineStyle: {
normal: {
color: 'rgb(253,177,56)'
}
}
}, {
source: '20000',
target: '20002',
lineStyle: {
normal: {
color: 'rgb(253,177,56)'
}
}
}, {
source: '20000',
target: '20003',
lineStyle: {
normal: {
color: 'rgb(253,177,56)'
}
}
}, {
source: '20000',
target: '20004',
lineStyle: {
normal: {
color: 'rgb(253,177,56)'
}
}
}, {
source: '30000',
target: '30001',
lineStyle: {
normal: {
color: 'rgb(110,197,75)'
}
}
}, {
source: '30000',
target: '30002',
lineStyle: {
normal: {
color: 'rgb(110,197,75)'
}
}
}, {
source: '30000',
target: '30003',
lineStyle: {
normal: {
color: 'rgb(110,197,75)'
}
}
}, {
source: '30000',
target: '30004',
lineStyle: {
normal: {
color: 'rgb(110,197,75)'
}
}
}, {
source: '20001',
target: '30002',
lineStyle: {
normal: {
type: 'curve',
color: 'rgb(1,252,247)',
curveness: 0.5
}
}
}, {
source: '30003',
target: '20001',
lineStyle: {
normal: {
type: 'curve',
color: 'rgb(1,252,247)',
curveness: 0.5
}
}
}, {
source: '20004',
target: '10004',
lineStyle: {
normal: {
type: 'curve',
color: 'rgb(1,252,247)',
curveness: 0.5
}
}
}, {
source: '30003',
target: '10003',
lineStyle: {
normal: {
type: 'curve',
color: 'rgb(1,252,247)',
curveness: 0.5
}
}
}, {
source: '10002',
target: '30002',
lineStyle: {
normal: {
type: 'curve',
color: 'rgb(1,252,247)',
curveness: 0.5
}
}
}, {
source: '20004',
target: '30001',
lineStyle: {
normal: {
type: 'curve',
color: 'rgb(1,252,247)',
curveness: 0.5
}
}
}, {
source: '30000',
target: '10000',
lineStyle: {
normal: {
type: 'curve',
color: 'rgb(1,252,247)',
curveness: 0.5
}
}
}],
lineStyle: {
normal: {
type: 'solid',
opacity: 1,
width: 2,
curveness: 0
}
}
}
]
};
传送门：
https://github.com/Youzi-wr/echarts-topology/tree/master
网友评论