Vue2下使用neovis.js实现neo4j知识图谱可视化

最新推荐文章于 2025-03-04 09:27:28 发布

jay 逸

最新推荐文章于 2025-03-04 09:27:28 发布

阅读量4.1k

点赞数 2

分类专栏： neo4j 文章标签： javascript neo4j 知识图谱

本文链接：https://blog.csdn.net/Naive1999/article/details/131471764

版权

Vue2下使用neovis.js实现neo4j知识图谱可视化

neovis.js安装下载

// 下载依赖
 npm install -save neovis.js

在vue中导入

// 依赖导入
 import NeoVis from 'neovis.js';

知识图谱展示：
在这里插入图片描述

vue项目代码

// 依赖导入
 <template>
  <el-row class="MainArea">
    <el-col :span="24" class="Mainleft" v-loading="fullscreenLoading">
      <div class="left" id="viz1" ref="viz1"></div>
      <el-divider></el-divider>
      <div>
        请输入查询语句: <textarea rows="4" cols=50 id="cypher"></textarea><br>
        <el-button type="success" id="reload" @click="submit">提交</el-button>
        <el-button type="warning" id="stabilize" @click="stabilize">锁定</el-button>
      </div>
    </el-col>

  </el-row>

</template>
<script>
import NeoVis from 'neovis.js';

export default {
   

  data() {
   
    return {
   
      viz: {
   },

      SQL: "MATCH p=()-->() RETURN p limit 100", //写自己的Cypher

      driver: null,
      cypherkeyword: false,
      graphtable: false,
      records: [],
      clearAll: false,