/* 数据 */ 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 = `

${params.data.name}

关系：${params.data.relation}

` } else if (params.data.category === '舍友关系') { html = `

${params.data.name}

关系：${params.data.relation}

年级专业：${params.data.major}

` } else if (params.data.category === '师生关系') { html = `

${params.data.name}

关系：${params.data.relation}

专业技术职务：${params.data.job}

授课课程：${params.data.course}

` } 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 } ] };

Echarts在线免费图表