/* 数据 */
const stuName = "王文武"; // 当前学生名字
// 家庭
const familyName = ["王大海", "李梅"]; // 名字
const familyRelation = ['父亲', '母亲']; // 关系
// 舍友
const roommateName = ['张三', '李四', '王五']; // 名字
const roommateRelation = ['舍友', '舍友', '舍友']; // 关系
const roommateMajor = ['19级化学类', '19级化学类', '19级化学类']; // 专业
// 教师
const teacherName = ["张铭轩", "赵雪琴", "李晨曦", "王沥川", "李慧珍"]; // 教师
const teacherRelation = ['授课教师', '授课教师', '授课教师', '授课教师', '授课教师']; // 关系
const teacherJob = ['研究员', '研究员', '研究员', '研究员', '研究员']; // 职务
const teacherCourse = ['物理', '物理', '物理', '物理', '物理']; // 授课课程
/* 数据处理 */
let data = [];
// 家庭
let familyData = familyName.map((item, index) => {
return {
name: item,
relation: familyRelation[index]
}
});
// 舍友
let roommateData = roommateName.map((item, index) => {
return {
name: item,
relation: roommateRelation[index],
major: roommateMajor[index]
}
});
// 教师
let teacherData = teacherName.map((item, index) => {
return {
name: item,
relation: teacherRelation[index],
job: teacherJob[index],
course: teacherCourse[index]
}
});
data = [{
type: '家庭关系',
value: familyData
}, {
type: '舍友关系',
value: roommateData
}, {
type: '师生关系',
value: teacherData
}];
/* series处理 */
// 圆形颜色
const colorList = {
'家庭关系': new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#5998FF'
}, {
offset: 1,
color: '#5CC0FF'
}]),
'舍友关系': new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#0FB27C'
}, {
offset: 1,
color: '#4BCDA1'
}]),
'师生关系': new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#7A7AE9'
}, {
offset: 1,
color: '#899BF9'
}]),
'中心': new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#FF6061'
}, {
offset: 1,
color: '#FF7E7C'
}])
}
// 背景颜色
const shadowList = {
'家庭关系': 'rgba(42, 154, 241, 0.5)',
'舍友关系': 'rgba(33, 186, 135, 0.5)',
'师生关系': 'rgba(129, 138, 241, 0.5)'
}
// 线条颜色
const lineList = {
'家庭关系': '#DCEAF2',
'舍友关系': '#DCF2ED',
'师生关系': '#F1ECF4'
}
let links = []
let linkNum = 1;
const seriesData = data.map((item, index) => {
return item.value.map((it, id) => {
links.push({
source: 0,
target: linkNum++,
lineStyle: {
color: lineList[item.type]
}
})
return {
...it,
itemStyle: {
color: colorList[item.type],
shadowColor: shadowList[item.type],
shadowBlur: 10
},
category: item.type
}
})
})
option = {
tooltip: {
trigger: 'item',
position: function (point, params, dom, rect, size) { // 提示框位置
let x = 0;
let y = 0;
// 提示框位置
if (point[0] + size.contentSize[0] < size.viewSize[0]) {
x = point[0]
} else if (point[0] > size.contentSize[0]) {
x = point[0] - size.contentSize[0]
} else {
x = "30%"
}
if (point[1] > size.contentSize[1]) {
y = point[1] - size.contentSize[1]
} else if (point[1] + size.contentSize[1] < size.viewSize[1]) {
y = point[1]
} else {
y = "30%"
}
return [x, y];
},
backgroundColor: '#fff',
formatter: function (params) {
let html = ''
if (params.data.category === '家庭关系') {
html = `
<div style="font-size:16px;font-family: Source Han Sans CN-Medium;color:rgba(0,0,0,0.85);font-weight:500">${params.data.name}</div>
<div style="margin-top:16px;font-size:14px;font-family: Source Han Sans CN-Regular;color:rgba(0,0,0,0.65)">关系：<span style="color:rgba(0,0,0,0.85)">${params.data.relation}</span></div>
`
} else if (params.data.category === '舍友关系') {
html = `
<div style="font-size:16px;font-family: Source Han Sans CN-Medium;color:rgba(0,0,0,0.85);font-weight:500">${params.data.name}</div>
<div style="margin-top:16px;font-size:14px;font-family: Source Han Sans CN-Regular;color:rgba(0,0,0,0.65)">关系：<span style="color:rgba(0,0,0,0.85)">${params.data.relation}</span></div>
<div style="margin-top:8px;font-size:14px;font-family: Source Han Sans CN-Regular;color:rgba(0,0,0,0.65)">年级专业：<span style="color:rgba(0,0,0,0.85)">${params.data.major}</span></div>
`
} else if (params.data.category === '师生关系') {
html = `
<div style="font-size:16px;font-family: Source Han Sans CN-Medium;color:rgba(0,0,0,0.85);font-weight:500">${params.data.name}</div>
<div style="margin-top:16px;font-size:14px;font-family: Source Han Sans CN-Regular;color:rgba(0,0,0,0.65)">关系：<span style="color:rgba(0,0,0,0.85)">${params.data.relation}</span></div>
<div style="margin-top:8px;font-size:14px;font-family: Source Han Sans CN-Regular;color:rgba(0,0,0,0.65)">专业技术职务：<span style="color:rgba(0,0,0,0.85)">${params.data.job}</span></div>
<div style="margin-top:8px;font-size:14px;font-family: Source Han Sans CN-Regular;color:rgba(0,0,0,0.65)">授课课程：<span style="color:rgba(0,0,0,0.85)">${params.data.course}</span></div>
`
}
return html
},
extraCssText: 'white-space:normal;padding:12px 24px;word-break:break-all;box-shadow: 1px 6px 15px 0px rgba(0, 0, 0, 0.13)'
},
label: {
fontSize: 12
},
legend: {
itemWidth: 10,
itemHeight: 10,
itemGap: 25,
right: 24,
top: 8,
textStyle: {
color: 'rgba(0, 0, 0, 0.45)',
fontFamily: 'Source Han Sans CN-Regular',
fontSize: 14,
padding: [0, 0, 0, 8],
},
data: ['家庭关系', '舍友关系', '师生关系']
},
series: [
{
type: 'graph',
layout: 'force',
symbolSize: 80,
center: ['50%', '50%'],
draggable: true,
focusNodeAdjacency: true,
roam: true,
itemStyle: {
color: colorList['中心'],
shadowColor: 'rgba(255, 100, 100, 0.5)',
shadowBlur: 10
},
categories: [
{
name: '家庭关系',
itemStyle: {
color: colorList['家庭关系']
}
},
{
name: '舍友关系',
itemStyle: {
color: colorList['舍友关系']
}
},
{
name: '师生关系',
itemStyle: {
color: colorList['师生关系']
}
}
],
label: {
color: '#ffffff',
show: true,
fontSize: 12
},
force: {
repulsion: 1000,
gravity: 0.1,
edgeLength: [100, 200]
},
edgeSymbolSize: [4, 50],
lineStyle: {
normal: {
width: 5,
curveness: 0.1, // 线的弯曲度 0-1之间 越大则歪曲度更大
color: '#B5D7C9'
}
},
data: [{ name: stuName }, ...seriesData.flat(2)],
links: links
}
]
};