为了避免在前端直连数据库的问题,采用第三方库echarts进行模拟:
快速安装echarts环境:
快速上手 - 使用手册 - Apache ECharts
<template>
<div id="myChart"></div>
</template>
<style>
#myChart {
width: 100%;
height: 100%;
}
</style>
<script>
export default {
name: "Neo4j",
data() {
return {
msg: "Welcome to Your Vue.js App",
initData: {
name: "科目全部",
className: "全年级",
students: [],
subjects: [
{
name: "语文",
className: "高一",
students: [
{
name: "张弛1",
age: 30,
students: [
{
name: "蒋龙",
age: 20,
},
],
},
{
name: "蒋龙2",
age: 20,
},
{
name: "刘波",
age: 28,
students: [
{
name: "龙傲天",
age: 25,
},
],
},
{
name: "龙傲天3",
age: 25,
},
{
name: "李豆豆",
age: 27,
},
],
},
],
},
categories: [],
resData: [],
graphData: [],
graphLinks: [],
};
},
mounted() {
for (var i = 0; i < 2; i++) {
this.categories[i] = {
name: "类目" + i,
};
}
this.loadData();
//this.drawLine();
},
methods: {
drawLine() {
let myChart = this.$echarts.init(document.getElementById("myChart"));
myChart.setOption({
title: {
text: "案例分析图谱",
},
tooltip: {},
series: [
{
type: "graph", // 类型:关系图
layout: "force", //图的布局,类型为力导图
symbolSize: 40, // 调整节点的大小
roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
edgeSymbol: ["circle", "arrow"],
edgeSymbolSize: [2, 10],
edgeLabel: {
normal: {
textStyle: {
fontSize: 10,
},
},
},
force: {
repulsion: 2500,
edgeLength: [10, 50],
},
draggable: true,
lineStyle: {
normal: {
width: 2,
// color: "#4b565b",
},
},
label: {
normal: {
show: true,
textStyle: {},
},
},
data: this.graphData,
links: this.graphLinks,
categories: this.categories,
},
],
});
},
loadData() {
let me = this;
me.resData = this.initData;
//主节点,第一父节点,只有一个
me.graphData.push({
name: me.resData.name,
des: me.resData.className,
symbolSize: 80,
category: 2,
});
//所有第二节点,科目
let dataSubjects = me.resData.subjects;
if (dataSubjects.length > 0) {
for (var b = 0; b < dataSubjects.length; b++) {
me.graphData.push({
name: dataSubjects[b].name,
des: dataSubjects[b].className,
symbolSize: 80,
category: 1,
});
me.graphLinks.push({
source: dataSubjects[b].name,
target: me.resData.name,
label: {
show: true,
},
});
let studentsData = dataSubjects[b].students;
this.setGraph(me, studentsData, dataSubjects[b]);
}
}
me.drawLine();
},
//递归
setGraph(me, studentsData, dataIncludes) {
if (studentsData != undefined && studentsData.length > 0) {
for (var c = 0; c < studentsData.length; c++) {
me.graphData.push({
name: studentsData[c].name,
des: studentsData[c].age,
symbolSize: 80,
});
me.graphLinks.push({
source: dataIncludes.name,
target: studentsData[c].name,
label: {
show: true,
},
});
if (studentsData[c].students != undefined) {
console.log(studentsData[c]);
this.setGraph(me, studentsData[c].students, studentsData[c]);
}
}
}
},
},
};
</script>