neo4j+echarts 绘制关系图（前端直接操作数据库）_neo4j echarts

 首先了解一下neo4j是干什么的 (提供给我们可以直接操作数据库的一个插件)下面是官网
Neo4j Aura

话不多说直接上代码

<template>
 
  <div style="width:100vw;height:100vh">
 
    <div
 
      ref="graph"
 
      style="width:100vw;height:100vh"
 
    >
 
    </div>
 
  </div>
 
</template>
 
<script>
 
export default {
 
  data () {
 
    return {
 
      // 绘制知识图谱的节点数据
 
      echartsData: [],
 
      nodesRelation: [],
 
      echartsNode: [],
 
      // 防止出现多个echarts初始化的情况
 
      myChart: '',
 
      options: {},
 
    }
 
  },
 
  mounted () {
 
    this.searchGraph()
 
  },
 
  methods: {
 
    async searchGraph () {
 
      const neo4j = require('neo4j-driver')
 
      const uri = ''; //ip地址
 
      const user = ''; //账号
 
      const password = '';//密码
 
      const driver = neo4j.driver(uri, neo4j.auth.basic(user, password))
 
      const session = driver.session({ database: 'neo4j' })
 
 
 
      try {
 
        // const readQuery1 = `MATCH (n:Person)  RETURN n.name AS name `
 
        const readQuery2 = `MATCH p=()-->() RETURN p`
 
        // const readQuery = `MATCH (p:Person)
 
        //               WHERE p.name = $personName
 
        //               RETURN p.name AS name`
 
        var me = { records: [] }
 
        const result = await session.run(readQuery2, {})
 
        me.records = result.records;
 
        for (let i = 0; i < me.records.length; i++) {
 
          this.echartsData.push({
 
            name: me.records[i]._fields[0].segments[0].start.properties.name,
 
            category: me.records[i]._fields[0].segments[0].start.labels[0]
 
          });
 
          this.echartsData.push({
 
            name: me.records[i]._fields[0].segments[0].end.properties.name,
 
            category: me.records[i]._fields[0].segments[0].end.labels[0]
 
          });
 
          this.nodesRelation.push({
 
            source: me.records[i]._fields[0].segments[0].start.properties.name,
 
            target: me.records[i]._fields[0].segments[0].end.properties.name,
 
            name: me.records[i]._fields[0].segments[0].relationship.type,
 
          });
 
        }
 
        //删除arr中的重复对象
 
        var arrId = [];
 
        var legend = [];
 
        for (var item of this.echartsData) {
 
          legend.push({ name: item.category })
 
          if (arrId.indexOf(item.name) == -1) {
 
            arrId.push(item.name)
 
            this.echartsNode.push(item);
 
          }
 
        }
 
        this.category = Array.from(new Set(legend))
 
        session.close();
 
        // me.closeLoading(false);
 
        var options = {}
 
        options = {
 
          tooltip: {//弹窗
 
            show: false,
 
            // enterable: true,//鼠标是否可进入提示框浮层中
 
            // formatter: formatterHover,//修改鼠标悬停显示的内容
 
          },
 
          legend: {
 
            type: 'scroll',
 
            orient: 'vertical',
 
            left: 10,
 
            top: 20,
 
            bottom: 20,
 
            data: this.category
 
          },
 
          series: [
 
            {
 
              categories: this.category,
 
              type: "graph",
 
              layout: "force",
 
              zoom: 0.6,
 
              symbolSize: 60,
 
              // 节点是否可以拖动
 
              draggable: true,
 
              roam: true,
 
              hoverAnimation: false,
 
              legendHoverLink: false,
 
              nodeScaleRatio: 0.6, //鼠标漫游缩放时节点的相应缩放比例，当设为0时节点不随着鼠标的缩放而缩放
 
              focusNodeAdjacency: false, //是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。
 
              // categories: categories,
 
              itemStyle: {
 
                color: "#67A3FF",
 
              },
 
              edgeSymbol: ["", "arrow"],
 
              // edgeSymbolSize: [80, 10],
 
              edgeLabel: {
 
                normal: {
 
                  show: true,
 
                  textStyle: {
 
                    fontSize: 12,
 
                  },
 
                  formatter (x) {
 
                    return x.data.name;
 
                  },
 
                },
 
              },
 
              label: {
 
                normal: {
 
                  show: true,
 
                  textStyle: {
 
                    fontSize: 12,
 
                  },
 
                  color: "#f6f6f6",
 
                  textBorderColor: '#67A3FF',
 
                  textBorderWidth: '1.3',
 
                  // 多字换行
 
                  formatter: function (params) {
 
                    // console.log(params);
 
                    var newParamsName = "";
 
                    var paramsNameNumber = params.name.length;
 
                    var provideNumber = 7; //一行显示几个字
 
                    var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
 
                    if (paramsNameNumber > provideNumber) {
 
                      for (var p = 0; p < rowNumber; p++) {
 
                        var tempStr = "";
 
                        var start = p * provideNumber;
 
                        var end = start + provideNumber;
 
                        if (p == rowNumber - 1) {
 
                          tempStr = params.name.substring(start, paramsNameNumber);
 
                        } else {
 
                          tempStr = params.name.substring(start, end) + "\n\n";
 
                        }
 
                        newParamsName += tempStr;
 
                      }
 
                    } else {
 
                      newParamsName = params.name;
 
                    }
 
                    return newParamsName;
 
                  },
 
                },
 
              },
 
              force: {
 
                repulsion: 200, // 节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
 
                gravity: 0.01, // 节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
 
                edgeLength: 400, // 边的两个节点之间的距离，这个距离也会受 repulsion影响 。值越大则长度越长
 
                layoutAnimation: true, // 因为力引导布局会在多次迭代后才会稳定，这个参数决定是否显示布局的迭代动画
 
                // 在浏览器端节点数据较多（>100）的时候不建议关闭，布局过程会造成浏览器假死。
 
              },
 
              data: this.echartsData,
 
              links: this.nodesRelation,
 
              // categories: this.categories
 
            }
 
          ]
 
        }
 
        console.log(this, 66633);
 
        //节点自定义拖拽不回弹
 
        this.myChart = this.$echarts.init(this.$refs.graph);
 
        const chart = this.myChart;
 
        this.myChart.setOption(options);
 
        chart.on('mouseup', function (params) {
 
          var option = chart.getOption();
 
          option.series[0].data[params.dataIndex].x = params.event.offsetX;
 
          option.series[0].data[params.dataIndex].y = params.event.offsetY;
 
          option.series[0].data[params.dataIndex].fixed = true;
 
          chart.setOption(option);
 
        });
 
      } catch (error) {
 
        console.error('Something went wrong: ', error)
 
      } finally {
 
        // await session.close()
 
      }
 
    },
 
  }
 
}
 
</script>
 
<style lang='less'  scoped>
 
</style>