neo4j+vue2+vis.js渲染图表（自用记录）_vue neo4j

 参考文章：vue+neo4j +纯前端（neovis.js / neo4j-driver） 实现 知识图谱的集成 大干货--踩坑无数！！！将经验分享给有需要的小伙伴_neovis.js vue-CSDN博客

1、安装环境

npm install -save neovis.js

npm install neo4j-driver

npm install vis --save  

2、入口函数中引用

import vis from "vis";

Vue.prototype.$vis = vis;

1、局部引入neo4j工具   import neo4j from "neo4j-driver"

2、处理数据的函数（根据自己返回的数据结构进行处理，没什么参考价值）

//实参是你的neo4j里调用的放法

let query=“MATCH (n) RETURN n LIMIT 25”

 dealData(query) {

      this.echartsNode = []  //节点数组

      this.nodesRelation = [] //关系线数组

      this.category = [] //echarts图例数据数

      let newNodes = []

      // 创建实例

     //1、获取到你数据库里的数据

       this.driver = neo4j.driver('bolt://localhost:8081', neo4j.auth.basic('neo4j', '你的密码'));

      // this.driver = neo4j.driver('bolt://localhost:7687', neo4j.auth.basic('neo4j', '123456'));

      console.log("this.drive", this.driver)

      let that = this;

      that .records = [];

      this.clearAll = true;

      let session = this.driver.session();

      if (query == "") return;

      session.run(query, {}).then((result) => {

        console.log("result", result);

        that .clearAll = false;

        that .records = result.records;

        console.log("neo4j 查询结果", result.records);

        // 准备label的字典

        let idList = []

        let newData = []

        // 开始处理数据

        // 拿到要展示的label字典，我是根据这个写死的

        for (let i = 0; i < that .records.length; i++) {

          idList.push(that .records[i]._fields[1][0].type)

          let index1 = newData.findIndex(item => {

            return item.label === that .records[i]._fields[2].labels[0]

          })

          if (index1 === -1) {

            newData.push({

              label: that .records[i]._fields[2].labels[0],

              value: that .records[i]._fields[2].properties

            })

          }

          // 拼接边数据和节点数据（边数据可以没有id可以重复，节点数据需要id不可以重复）

          let index = newNodes.findIndex(item => {

            return item.id === that .records[i]._fields[2].identity.low

          })

          if (index === -1) {

            // 节点数据

            newNodes.push({

              id: that .records[i]._fields[2].identity.low,

              label: that .records[i]._fields[2].properties[that .dealLabels(that .records[i]._fields[2].labels[0])],

              properties: that .records[i]._fields[2].properties })

          }

          // 边数据

         this.nodesRelation.push({

            from: that .records[i]._fields[1][0].start.low,

            to: that .records[i]._fields[1][0].end.low,

            label: that .records[i]._fields[1][0].type,

            // id: that .records[i]._fields[1][0].identity.low,

            properties: that .records[i]._fields[1][0].properties

          });

        }

        console.log("labelList", newData, idList);

        console.log("value", this.nodesRelation, newNodes);

        this.nodesArray = newNodes  //节点数组

        this.edgesArray = this.nodesRelation //关系线数组

        this.$nextTick(() => {

          this.visDraw()

        })

        session.close();

        that .closeLoading(false);

      }).catch(function (error) {

        console.log("Cypher 执行失败！", error);

        that .driver.close();

        session.close();

      });

    },

 图表渲染

 visDraw() {

      let container = this.$refs.network_id;

      let data = { nodes: this.nodesArray, edges: this.edgesArray }

      console.log("声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】