利用echarts模拟Neo4j画图

为了避免在前端直连数据库的问题,采用第三方库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>
  
  

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值