先上效果图
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>ECharts 关系图</title>
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-3.2.1min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 1000px; height: 800px"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'))
var categories = []
for (var i = 0; i < 3; i++) {
categories[i] = {
name: '类目' + i
}
}
option = {
// 图的标题
title: {
text: 'ECharts 关系图'
},
// 提示框的配置
tooltip: {
formatter: function (x) {
return x.data.des
}
},
// 工具箱
toolbox: {
// 显示工具箱
show: true,
feature: {
mark: {
show: true
},
// 还原
restore: {
show: true
},
// 保存为图片
saveAsImage: {
show: true
}
}
},
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: {
repulsion: 2500,
edgeLength: [10, 50]
},
draggable: true,
lineStyle: {
normal: {
width: 2,
color: '#4b565b'
}
},
edgeLabel: {
normal: {
show: true,
formatter: function (x) {
return x.data.name
}
}
},
label: {
normal: {
show: true,
textStyle: {}
}
},
// 数据
data: [
{
name: '夏东海',
des: '性别：男\n职业：编导',
symbolSize: 70,
category: 0
},
{
name: '刘梅',
des: '性别：女\n职业：护士长',
symbolSize: 50,
category: 1
},
{
name: '刘星',
des: '性别：男\n职业：学生',
symbolSize: 50,
category: 2
},
{
name: '夏雪',
des: '性别：女\n职业：学生',
symbolSize: 50,
category: 2
},
{
name: '夏雨',
des: '性别：男\n职业：学生',
symbolSize: 50,
category: 2
},
{
name: '胡统一',
des: '性别：男\n职业：无业游民',
symbolSize: 50,
category: 2
},
{
name: '玛丽',
des: '性别：女\n职业：',
symbolSize: 50,
category: 2
},
{
name: '戴明明',
des: '性别：女\n职业：学生',
symbolSize: 50,
category: 2
},
{
name: '戴天高',
des: '性别：男\n职业：',
symbolSize: 50,
category: 2
},
{
name: '胖婶',
des: '性别：女\n职业：社区工作人员',
symbolSize: 50,
category: 2
},
{
name: '夏祥',
des: '性别：男\n职业：',
symbolSize: 50,
category: 2
}
],
links: [
{
source: '夏东海',
target: '夏祥',
name: '儿子',
des: '夏东海是夏祥的儿子'
},
{
source: '夏东海',
target: '玛丽',
name: '前夫',
des: '夏东海是玛丽的前夫'
},
{
source: '夏东海',
target: '夏雨',
name: '父亲',
des: '夏东海是夏雨的父亲'
},
{
source: '夏东海',
target: '夏雪',
name: '父亲',
des: '夏东海是夏雪的父亲'
},
{
source: '夏东海',
target: '刘星',
name: '继父',
des: '夏东海是刘星的继父'
},
{
source: '夏东海',
target: '刘梅',
name: '丈夫',
des: '夏东海是刘梅的丈夫'
},
{
source: '刘梅',
target: '胖婶',
name: '邻居',
des: '刘梅是胖婶的邻居'
},
{
source: '刘梅',
target: '胡统一',
name: ' 前妻',
des: '胡统一刘梅是的前妻'
},
{
source: '刘梅',
target: '戴天高',
name: '同学',
des: '刘梅是戴天高的同学'
},
{
source: '戴明明',
target: '戴天高',
name: '女儿',
des: '戴明明是戴天高的女儿'
},
{
source: '戴明明',
target: '夏雪',
name: '同学',
des: '戴明明是夏雪的同学'
},
{
source: '刘星',
target: '胡统一',
name: '儿子',
des: '刘星是胡统一的儿子'
},
{
source: '夏雨',
target: '玛丽',
name: '儿子',
des: '夏雨是玛丽的儿子'
},
{
source: '夏雪',
target: '玛丽',
name: '女儿',
des: '夏雪是玛丽的女儿'
}
],
categories: categories
}
]
}
myChart.setOption(option)
</script>
</body>
</html>
注：代码是在https://blog.csdn.net/qq_38737992/article/details/89042164的基础上，修改cdn引入和data内容
待优化项：
1. 从后端获取人员和关系
2. 智能问答对话框
标签：name,展示,图谱,des,50,source,symbolSize,Echarts,target From： https://www.cnblogs.com/waketzheng/p/17015647.html