Vue和relation-graph庫(kù)打造高質(zhì)量的關(guān)系圖應(yīng)用程序

更新時(shí)間：2023年09月22日 15:08:39 作者：靜Yu

這篇文章主要介紹了Vue和relation-graph庫(kù)打造高質(zhì)量的關(guān)系圖應(yīng)用程序,在這篇文章中,我們深入探討了如何使用Vue和relation-graph高效打造關(guān)系圖,我們?cè)敿?xì)介紹了數(shù)據(jù)準(zhǔn)備、關(guān)系映射、點(diǎn)擊事件等關(guān)鍵步驟,需要的朋友可以參考下

產(chǎn)品提需求啦，有一個(gè)需求就是實(shí)現(xiàn)一個(gè)功能：展現(xiàn)各個(gè)文件之間的調(diào)用關(guān)系，通過(guò)關(guān)系圖的形式進(jìn)行展示出來(lái)。之前考慮使用antv x6實(shí)現(xiàn)此功能，但是考慮到只是展示的功能，也不需要進(jìn)行交互，所以放棄使用antv x6，選擇了更加簡(jiǎn)單的relation-graph插件。

先來(lái)看一個(gè)示例項(xiàng)目：

<template>
  <div>
    <div style="height: calc(100vh - 50px)">
      <RelationGraph
        ref="seeksRelationGraph"
        :options="graphOptions"
        :on-node-click="onNodeClick"
        :on-line-click="onLineClick"
      />
    </div>
  </div>
</template>
<script>
// relation-graph也支持在main.js文件中使用Vue.use(RelationGraph);這樣，你就不需要下面這一行代碼來(lái)引入了。
import RelationGraph from 'relation-graph'
export default {
  name: 'Demo',
  components: { RelationGraph },
  data() {
    return {
      graphOptions: {
        allowSwitchLineShape: true,
        allowSwitchJunctionPoint: true,
        defaultJunctionPoint: 'border'
        // 這里可以參考"Graph 圖譜"中的參數(shù)進(jìn)行設(shè)置
      }
    }
  },
  mounted() {
    this.showSeeksGraph()
  },
  methods: {
    showSeeksGraph() {
      const __graph_json_data = {
        rootId: 'a',
        nodes: [
          { id: 'a', text: 'A', borderColor: 'yellow' },
          { id: 'b', text: 'B', color: '#43a2f1', fontColor: 'yellow' },
          { id: 'c', text: 'C', nodeShape: 1, width: 80, height: 60 },
          { id: 'e', text: 'E', nodeShape: 0, width: 150, height: 150 }
        ],
        lines: [
          { from: 'a', to: 'b', text: '關(guān)系1', color: '#43a2f1' },
          { from: 'a', to: 'c', text: '關(guān)系2' },
          { from: 'a', to: 'e', text: '關(guān)系3' },
          { from: 'b', to: 'e', color: '#67C23A' }
        ]
      }
      // 以上數(shù)據(jù)中的node和link可以參考"Node節(jié)點(diǎn)"和"Link關(guān)系"中的參數(shù)進(jìn)行配置 
      this.$refs.seeksRelationGraph.setJsonData(__graph_json_data, (seeksRGGraph) => {
        // Called when the relation-graph is completed 
      })
    },
    onNodeClick(nodeObject, $event) {
      console.log('onNodeClick:', nodeObject)
    },
    onLineClick(lineObject, $event) {
      console.log('onLineClick:', lineObject)
    }
  }
}
</script>

運(yùn)行效果：

這里有一個(gè)需要注意的點(diǎn)是，如果你的vue版本低于2.6.12時(shí)，圖譜會(huì)顯示異常，圖譜加載不完全甚至網(wǎng)頁(yè)中出現(xiàn)undefined。這時(shí)我們只需要將我們的版本升級(jí)一下就可以。我選擇的是安裝版本為2.6.14，升級(jí)完vue版本之后，記得要 npm install 重新安裝一下依賴，不然會(huì)出現(xiàn) vue-template-compiler 和vue版本不匹配也不能成功運(yùn)行項(xiàng)目的問(wèn)題。

npm install vue@2.6.14

接下來(lái)進(jìn)入我們的正題，詳細(xì)介紹一下開(kāi)發(fā)過(guò)程。

1.引入relation-graph

// 注意：relation-graph支持Vue2、Vue3、React, 但引入的包名稱都是【relation-graph】
npm install --save relation-graph

插件安裝完成之后，需要在我們開(kāi)發(fā)的頁(yè)面中引入和注冊(cè)

import SeeksRelationGraph from 'relation-graph'
components: { SeeksRelationGraph },

2.初始化設(shè)置

然后就是一些初始化的設(shè)置

 <SeeksRelationGraph
        ref="seeksRelationGraph"
        :options="graphOptions"
        :on-node-click="nodeClick"
      />

其中options就是圖譜配置，一個(gè)對(duì)象，里面包含了具體的選項(xiàng)：如果你的需求是單純的展示關(guān)系圖，不需要進(jìn)行節(jié)點(diǎn)拖動(dòng)操作的，可以將拖動(dòng)禁掉

// 禁用拖拽
        disableDragNode: true,

其中l(wèi)ayouts布局設(shè)置，

layoutName :布局方式（tree樹(shù)狀布局/center中心布局/force自動(dòng)布局）
layoutClassName : 當(dāng)使用這個(gè)布局時(shí)，會(huì)將此樣式添加到圖譜上,這里就是設(shè)置我們自定義的樣式
min_per_width :節(jié)點(diǎn)距離限制:節(jié)點(diǎn)之間橫向距離最小值
max_per_width :節(jié)點(diǎn)距離限制:節(jié)點(diǎn)之間橫向距離最大值
min_per_height :節(jié)點(diǎn)距離限制:節(jié)點(diǎn)之間縱向距離最小值
max_per_height :節(jié)點(diǎn)距離限制:節(jié)點(diǎn)之間縱向距離最大值節(jié)點(diǎn)之間的最小距離建議不要太小了，如果節(jié)點(diǎn)內(nèi)容比較多導(dǎo)致節(jié)點(diǎn)比較大，很容易導(dǎo)致節(jié)點(diǎn)之間重疊。

        layouts: [
          {
            label: '中心',
            layoutName: 'tree',
            layoutClassName: 'seeks-layout-center',
            defaultNodeShape: 0,
            from: 'left',
            // 通過(guò)這4個(gè)屬性來(lái)調(diào)整 tree-層級(jí)距離&節(jié)點(diǎn)距離
            min_per_width: '300',
            max_per_width: '300',
            min_per_height: '40',
            max_per_height: '60',
          },
        ],

除此之外我們還可以為我們的圖譜添加工具欄，對(duì)應(yīng)的圖譜配置分別為:

allowShowMiniToolBar :是否顯示工具欄
allowShowRefreshButton :是否在工具欄中顯示【刷新】按鈕
allowShowDownloadButton : 是否在工具欄中顯示【下載圖片】按鈕
allowSwitchLineShape :是否在工具欄中顯示切換線條形狀的按鈕
allowSwitchJunctionPoint :是否在工具欄中顯示切換連接點(diǎn)位置的按鈕

上面列舉的都是一些常用的配置和布局設(shè)置，除此之外官方還提供了很多其他的配置，詳細(xì)參考官方文檔

3、數(shù)據(jù)格式

通過(guò)設(shè)置一個(gè)json對(duì)象的nodes、lines、rootId來(lái)定義圖譜中要展示的節(jié)點(diǎn)、關(guān)系線、根節(jié)點(diǎn)

     const __graph_json_data = {
         rootId: 'a',
         nodes: [
           { id: 'a', text: 'A', borderColor: 'yellow' },
           { id: 'b', text: 'B', color: '#43a2f1', fontColor: 'yellow' },
           { id: 'c', text: 'C', nodeShape: 1, width: 80, height: 60 },
           { id: 'e', text: 'E', nodeShape: 0, width: 150, height: 150 }
         ],
         lines: [
           { from: 'a', to: 'b', text: '關(guān)系1', color: '#43a2f1' },
           { from: 'a', to: 'c', text: '關(guān)系2' },
           { from: 'a', to: 'e', text: '關(guān)系3' },
           { from: 'b', to: 'e', color: '#67C23A' }
         ]
       }

nodes定義的是節(jié)點(diǎn)數(shù)據(jù)，lines定義的是關(guān)系線。

node節(jié)點(diǎn)

我們可以定義普通的節(jié)點(diǎn)，不需要進(jìn)行樣式的設(shè)置和定義，官方已經(jīng)為我們定義好了。

        {
            id: 'N16',
            color: '#4ea2f0',
            text: '123311312'
          },

不過(guò)我們可以設(shè)置節(jié)點(diǎn)id,節(jié)點(diǎn)名稱text,節(jié)點(diǎn)背景顏色color,這里與css有所不同，字體顏色是fontColor,節(jié)點(diǎn)形狀nodeShape（0圓形，1矩形），除了使用官方自定義的節(jié)點(diǎn)之外，我們還可以自定義節(jié)點(diǎn)，是通過(guò)html的形式進(jìn)行定義。

          {
            id: 'N15',
            text: this.A.path,
            color: '#4ea2f0',
            width: 100,
            height: 100,
            html: `
            <div class='TIME' @click='nodeClick'>
                  <div>名稱：${this.A.name}</div>
                  <div>掘金:${this.A.path}</div>
                  <div>QQ：${this.A.qq}</div>
              </div>
            `
          },

其中A是在data中定義的一個(gè)對(duì)象

     A: {
        name: '靜Yu',
        path: 'https://juejin.cn/user/2225839800062215',
        qq: '789789798',
      },

lines關(guān)系線

from和to對(duì)應(yīng)的都是節(jié)點(diǎn)的id，除此之外還可以在連接線上添加文字 text ，線條粗細(xì) lineWidth ,線條顏色 color 等等

        links: [
          { from: 'N1', to: 'N15' },
          { from: 'N15', to: 'N16' },
          { from: 'N15', to: 'N17' },
          { from: 'N15', to: 'N18' },
          { from: 'N15', to: 'N19' },
          { from: 'N18', to: 'N20' },
        ],

4.Events事件

官方為我們提供了五種觸發(fā)事件

on-node-click 點(diǎn)擊節(jié)點(diǎn)事件
on-node-expand 展開(kāi)節(jié)點(diǎn)事件
on-node-collapse 收縮節(jié)點(diǎn)事件
on-line-click 點(diǎn)擊線條事件
on-image-download 當(dāng)點(diǎn)擊下載圖片按鈕時(shí)觸發(fā)

較為常用的就是點(diǎn)擊節(jié)點(diǎn)和線條觸發(fā)的事件

  <SeeksRelationGraph
        ref="seeksRelationGraph"
        :options="graphOptions"
        :on-node-click="nodeClick"
   />
   nodeClick(nodeObject) {
      console.log(nodeObject)
   }

參數(shù)會(huì)返回節(jié)點(diǎn)的各種信息供我們使用

5.小結(jié)

在這篇文章中，我們深入探討了如何使用Vue和relation-graph高效打造關(guān)系圖。我們?cè)敿?xì)介紹了數(shù)據(jù)準(zhǔn)備、關(guān)系映射、點(diǎn)擊事件等關(guān)鍵步驟。通過(guò)這些技巧和解決方案，我們可以更好地利用Vue和relation-graph庫(kù)來(lái)創(chuàng)建直觀且易于維護(hù)的關(guān)系圖?？傊?，Vue與relation-graph的結(jié)合為我們提供了一種強(qiáng)大且靈活的方式，以高效地構(gòu)建各種復(fù)雜的關(guān)系圖。通過(guò)掌握這些秘訣，我們可以更好地利用Vue和relation-graph庫(kù)，輕松打造出高質(zhì)量的關(guān)系圖應(yīng)用程序，從而更好地滿足各種需求。

到此這篇關(guān)于Vue和relation-graph庫(kù)打造高質(zhì)量的關(guān)系圖應(yīng)用程序的文章就介紹到這了,更多相關(guān)Vue和relation-graph庫(kù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: