項目上需要在vue的界面上展示一下所做的知識圖譜，看了很多工具，只是簡單展示的話，Neovis這個庫比較簡單些。但是看了很多引用方式，有npm裝包的，也有直接導入neovis.js的，安裝包的時候也報了很多錯，下面是自己嘗試過后通的方法。

1. 我成功的方法

由于自己經過了很多嘗試，既裝了包，又放了文件在靜態(tài)文件夾，就不知道到底哪個方法起作用，最終有了一個解決方法，直接引入npm的包，使用script標簽，在index.html里面。
在vue中的index.html里面加入。不好的是，可能會不穩(wěn)定，但是我用方法二有時候會失效，也可能是我的方法混了導致失效。

<script src="https://unpkg.com/neovis.js@2.0.2"></script>

知識圖譜vue組件：

<template>
	<div>
	    <el-card class="box-card">
	      <div class="myDiv">
	        <el-row>
	            <p style="color:red;margin-left:20px;">！?。〉谝淮芜M入頁面請先點擊獲取樣圖按鈕后，再進行搜索</p>
	        </el-row>
	        <el-form label-width="10%" :model="formInline" class="demo-form-inline">
	          <el-row>
	            <el-col :span="12">
	              <el-form-item label="Cypher:">
	                <el-select
	                    style="width: 300px"
	                    v-model="formInline.input"
	                    placeholder="選擇搜索語句"
	                    filterable
	                    clearable>
	                    <el-option v-for="(item,index) in option"
	                        :key="index"
	                        :label="item.label"
	                        :value="item.value"></el-option>
	                </el-select>
	                <!-- <el-input type="textarea" :rows="2" v-model="formInline.input" placeholder="請輸入內容"></el-input> -->
	              </el-form-item>
	            </el-col>
	            <el-col :span="6">
	              <el-form-item class="btn">
	                  <el-button :disabled="isClicked" type="primary" icon="el-icon-search" @click="submit">搜索</el-button>
	                  <el-button type="primary" icon="el-icon-check" @click="draw">獲取樣圖</el-button>
	                  <!-- <el-button type="primary" icon="el-icon-check" @click="stabilize">stabilize</el-button> -->
	              </el-form-item>
	            </el-col>
	          </el-row>
	        </el-form>
	        <div id="viz"></div>
	      </div>
	    </el-card>
	  </div>
</template>

<script>
import config from './neo4j.config.js' //這是對圖譜的精細化設置

export default {
  name: 'knowledge',
  data () {
    return {
      formInline: {
        input: ''
      },
      viz: {}, // 定義一個viz對象,
      // 是否點擊該按鈕
      isClicked: true,
      // 列舉了一些語句
      option: [
        {
          value: 'MATCH (n:Food) RETURN n LIMIT 25',
          label: '檢索前25個食物節(jié)點'
        },
        {
          value: 'MATCH p=()-[r:`亮氨酸`]->() RETURN p LIMIT 25',
          label: '檢索含有亮氨酸的前25個關系節(jié)點'
        },
        {
          value: 'MATCH p=()-[r:HasEffect]->() RETURN p LIMIT 25',
          label: '小麥胚粉影響的前25個疾病'
        },
        {
          value: 'MATCH p=()-[r:need_check]->() RETURN p LIMIT 25',
          label: '需要做哪些檢查'
        }
      ]
    }
  },
  mounted () {
  },
  methods: {
    submit () {
      let cypher = this.formInline.input
      if (cypher.length > 3) {
        this.viz.renderWithCypher(cypher)
      } else {
        this.viz.reload()
      }
    },
    stabilize () {
      this.viz.stabilize()
    },
    draw () {
      this.viz = new NeoVis.default(config)
      this.viz.render()
      // 點擊完搜索全圖之后 才能開啟搜索功能，因為需要先渲染一下
      this.isClicked = false
    }
  }
}
</script>

<style lang='less' scoped>
.box-card {
  margin: 0 auto;
  width: 95%;
  .myDiv {
    width: 100%;
    height: 800px;
  }
  #viz {
      width: 100%;
      height: 80%;
      border: 1px solid #000;
      font: 22pt arial;
  }
}
</style>

配置的文件如下：

export default {
  containerId: 'viz',
  neo4j: {
    serverUrl: 'bolt://IP地址:7687',
    serverUser: 'neo4j',
    serverPassword: '數(shù)據(jù)庫密碼'
  },
  labels: {
    // 可以配置樣式 但是我設置無效，有知道怎么設置的小伙伴嗎
    // 食物圖數(shù)據(jù)節(jié)點
    third_level_food: {
      label: 'name',
      font: { size: 20 }, // 節(jié)點字體大小
      size: 100,           // 節(jié)點大小
      color: '#EE2233'    // 節(jié)點顏色
    },

效果展示：這個顏色怎么感覺是自帶的。anyway只是展示的話，對我來說足夠了。

2 嘗試一 （大家可以先試試這個）script 標簽引入包

參考這篇博文：vue+neo4j +純前端（neovis.js / neo4j-driver） 實現(xiàn) 知識圖譜的集成 大干貨–踩坑無數(shù)?。?！將經驗分享給有需要的小伙伴
寫的非常詳細，大家可以直接git clone下來這個代碼，改成自己的數(shù)據(jù)庫，嘗試了是可以通的，將neovis.jshe neovis.js.map放在對應的文件夾。但是對應的node節(jié)點和邊的樣式，設置無效，至今不知道為啥，希望有知道的小伙伴可以滴滴我。

3 嘗試二 npm 包

安裝neovis的包

npm install neovis.js

導入neovis包

import NeoVis from 'neovis.js'

之后報錯,找不到對應依賴：

This dependency was not found:

* core-js/modules/web.dom-collections.iterator.js in ./node_modules/neovis.js/dist/neovis-without-dependencies.js.
* To install it, you can run: npm install --save core-js/modules/web.dom-collections.iterator.js

參考了這篇博文：鏈接
說是引入語句改成下面所示：

import NeoVis from 'neovis.js/dist/neovis.js'

又是一下錯誤：沒有l(wèi)oader去處理這個類型

./node_modules/neovis.js/dist/neovis.js
Module parse failed: Unexpected token (2:1149512)
You may need an appropriate loader to handle this file type.

文中說要使用對應版本的loader，我沒有嘗試，大家可以嘗試一下。

參考

1.vue+neo4j +純前端（neovis.js / neo4j-driver） 實現(xiàn) 知識圖譜的集成 大干貨–踩坑無數(shù)?。?！將經驗分享給有需要的小伙伴
2../node_modules/neovis.js/dist/neovis.jsModule parse failed: Unexpected token (2:1149512)
You may need an appropriate loader to handle this file type.
3.Neo4j前端可視化組件Neovis.js使用說明
4. Neovis的github官方項目文章來源地址http://www.zghlxwxcb.cn/news/detail-834510.html

到了這里，關于Vue+Neovis+Neo4j展示知識圖譜的demo，遇到的問題的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！