97国产精品乱码人妻,VA不卡点

開源的vue知識圖譜展示組件：relation-graph

這個項(xiàng)目使用典型的vue編程方式，代碼簡單易懂。
用這個關(guān)系圖譜組件可以非常方便的展示如組織機(jī)構(gòu)圖譜、股權(quán)架構(gòu)圖譜、集團(tuán)關(guān)系圖譜等知識圖譜，可提供多種圖譜布局，包括樹狀布局、中心布局、力學(xué)布局自動布局等。
用起來簡單方便，通過組件自身提供的配置項(xiàng)，可以實(shí)現(xiàn)非常復(fù)雜的功能，API/配置說明在：
http://relation-graph.com/#/docs
上面這個網(wǎng)站中有詳細(xì)使用方法和在線demo，以及可視化的配置工具
項(xiàng)目地址是：
https://github.com/seeksdream/relation-graph

1，首先，使用npm或者cnpm安裝relation-graph：

npm install --save relation-graph

2，在你的vue頁面中使用這個組件：

<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>
 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(query) {
       var __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 }
         ],
         links: [
           { 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>

上面代碼的效果：