最近業務開發遇到了組織結構的展示，多級不固定，改了三板第一版用了echarts，第二版自己用遞歸組件寫了發現很局限不靈活，內容確定的還好點不固定的就很亂了，期間也看了幾個相關的組件比如：vue-org-tree、vue-okr-tree,其實都挺不錯的但就是不太符合我們產品需要實現的效果，最后采用了relation-graph 這個。

先說說需求，需要實現怎樣的，大體就是下面這個圖這樣的，一般來說實現類似這樣多級樹結構的時候在vue中需要遞歸組件去實現了，但對于不同的節點需要不同的展現方式就需要很靈活了目前我沒能實現有實現了的朋友可以踢下我，我學習學習

類似效果圖

期間我發現highcharts的這個也不錯，但不能商用，這個網站也挺不錯，是一個用純 JAVAScript 編寫的一個圖表庫，能夠很簡單便捷的在 Web 網站或是 Web 應用程序添加有交互性的圖表，并且免費提供給個人學習、個人網站和非商業用途使用。

highcharts

下面說下采用的relation-graph 這個,這是一個Vue關系圖譜組件，可以展示如組織機構圖譜、股權架構圖譜、集團關系圖譜等知識圖譜，可提供多種圖譜布局，包括樹狀布局、中心布局、力學布局自動布局等

relation-graph.com

使用上也簡單，分兩步，設置配置項，加載數據

// 定義區域
<div style="height:calc(100vh - 200px);">
      <SeeksRelationGraph ref="seeksRelationGraph"
                          :options="graphOptions"
                          :on-node-click="onNodeClick"
                          :on-line-click="onLineClick" /></div>
// 導入組件
import SeeksRelationGraph from 'relation-graph'

data() {
    return {
      graphOptions: {
       ... 
        // 具體的配置項數據可從網站上可視化配置后獲取
      }
    }
  }，
  mounted() {
    this.showSeeksGraph()
  }，
  methods:{
  	 showSeeksGraph() {
       const obj = {
        	rootId:0,// 根節點
         nodes:[],// 節點數據
         links: [],// 連接線數據
       }
       // 調用接口獲取數據
       this.$refs.seeksRelationGraph.setJsonData(obj, (seeksRGGraph) => {
          // Called when the relation-graph is completed 
        })
     }
  }

具體的數據處理看實際的了，我說下我的數據處理，我接口得到的數據是多級的樹結構數據，類似如下這樣：

數據結構

所以需要先將數據進行扁平化處理下,利用reduce進行遞歸處理

export function flatTreeToArrayTable({
  data = [],
  keyChildren = "children",
  key = 'id',
  includeChildren = false
} = {}) {
  data.some(item => {
    item.parid = item.parid ? item.parid : 0
  })
  function maker(result, item) {
    result.push(includeChildren ? item : omit(item, [keyChildren]));
    if (hasChildren(item, keyChildren)) {
      item[keyChildren].some(ichi => {
        ichi.parid = item[key]
      })
      result = result.concat(item[keyChildren].reduce(maker, []));
    }
    return result;
  }
  return data.reduce(maker, []);
}

再說說節點處理，需要的格式是from->to 樹節點中轉化也就是parid -> id.