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

// 引入Neo4j相关的库
import neo4j from 'neo4j-driver'
 
// 创建Neo4j驱动实例
const driver = neo4j.driver(
  'bolt://localhost',
  neo4j.auth.basic('neo4j', 'password')
)
 
// 使用Vue的生命周期钩子来在组件创建时执行数据加载
export default {
  data() {
    return {
      nodes: [],
      edges: [],
    }
  },
  created() {
    this.fetchNeo4jData()
  },
  methods: {
    async fetchNeo4jData() {
      // 从Neo4j获取数据
      const session = driver.session()
      const result = await session.run(`
        MATCH (n:Label)
        OPTIONAL MATCH (n)-[r]->(m)
        RETURN n, r, m
      `)
      session.close()
 
      // 将Neo4j结果转换为vis.js网络图支持的格式
      result.records.forEach(record => {
        const nodeId = record.get(0).identity.toInt();
        const node = {
          id: nodeId,
          label: record.get(0).properties.name,
        }
        this.nodes.push(node)
 
        if (record.get(1)) {
          const edgeId = record.get(1).identity.toInt();
          const edge = {
            from: nodeId,
            to: record.get(2).identity.toInt(),
            label: record.get(1).properties.type,
            id: edgeId,
          }
          this.edges.push(edge)
        }
      })
    }
  }
}

这段代码展示了如何在Vue组件的created生命周期钩子中，使用Neo4j驱动连接到Neo4j数据库，执行一个匹配查询，并将结果转换为vis.js网络图组件可以使用的节点和边的格式。这是一个基本的例子，实际应用中可能需要更复杂的查询和数据处理。