開源vue關(guān)系圖譜組件：relation-graph vue實現(xiàn)企業(yè)股權(quán)架構(gòu)圖

用這個關(guān)系圖譜組件可以非常方便的展示如組織機(jī)構(gòu)圖譜、股權(quán)架構(gòu)圖譜、集團(tuán)關(guān)系圖譜等知識圖譜，可提供多種圖譜布局，包括樹狀布局、中心布局、力學(xué)布局自動布局等。

用起來簡單方便，通過組件自身提供的配置項，可以實現(xiàn)非常復(fù)雜的功能，網(wǎng)站中有詳細(xì)使用方法和在線demo，以及可視化的配置工具。

API/配置說明在：http://relation-graph.com/#/docs
項目地址是：https://github.com/seeksdream/relation-graph

用這個做企業(yè)股權(quán)架構(gòu)圖非常合適，我比較了很多插件，這個功能最強大。功能非常齊全。

image.png

實際例子


image.png

常規(guī)樹狀圖是根節(jié)點指向多個子節(jié)點。這個圖中根節(jié)點在最底層，找祖宗節(jié)點，并且箭頭要指向最底層節(jié)點，廢了九牛二虎之力終于實現(xiàn)了。

這里主要注意一點，股權(quán)數(shù)字一般在link里體現(xiàn)，默認(rèn)股權(quán)數(shù)字只會展示在連接線靠近箭頭處，像我這種需求那么股權(quán)數(shù)字就會重疊在一起，改布局的源碼是不可能改了。

所以換個思路，股權(quán)數(shù)字和node節(jié)點綁在一起，節(jié)點node通過slot插槽弄個弄個絕對定位的div來顯示股權(quán)數(shù)字，棒呆！

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

npm install --save relation-graph

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

<template>
  <div>
    <p>箭頭從上往下指   控股文字顯示在箭頭處重疊</p>
    <div v-loading="g_loading" style="margin-top:50px;width: calc(100% - 10px);height:calc(100vh - 140px);">
      <SeeksRelationGraph ref="seeksRelationGraph" :options="graphOptions" :on-node-expand="onNodeExpand" >
      <div slot="node" slot-scope="{node}">
        <!-- @click="showNodeMenus(node, $event)" @contextmenu.prevent.stop="showNodeMenus(node, $event)" -->
          <div style="height:64px;line-height: 64px;border-radius: 32px;cursor: pointer;" >
            <!-- <i style="font-size: 30px;" :class="node.data.myicon" /> -->
            {{node.text}}
          </div>
          <div v-if="!node.data.isRoot" style="color: forestgreen;font-size: 16px;position: absolute;width: 60px;height:25px;line-height: 25px;margin-top:5px;margin-left:8px;text-align: center;background-color: rgba(66,187,66,0.2);">
            {{node.data.num}}
          </div>
        </div>
      </SeeksRelationGraph>

    </div>
  </div>
</template>

<script>
import SeeksRelationGraph from 'relation-graph'
export default {
  name: 'SeeksRelationGraphDemo',
  components: { SeeksRelationGraph },
  data() {
    return {
      g_loading: true,
      demoname: '---',
      graphOptions: {
        "backgrounImage": "http://ai-mark.cn/images/ai-mark-desc.png",
        "backgrounImageNoRepeat": false,
        "layouts": [
          {
            "label": "中心",
            "layoutName": "tree",
            "layoutClassName": "seeks-layout-center",
            "defaultJunctionPoint": "border",
            "defaultNodeShape": 0,
            "defaultLineShape": 5,  // 1直線
            "min_per_width": "200",
            "max_per_width": "300",
            "min_per_height": "150",
            "max_per_height": "300",
            "centerOffset_x": "0",
            "centerOffset_y": "0",
          }
        ],
        "defaultLineMarker": {  // 箭頭樣式
          "markerWidth": 22,
          "markerHeight": 22,
          "refX":15,
          "refY": 6,
          "data": "M2,2 L10,6 L2,10 L6,6 L2,2"
        },
        "allowShowMiniNameFilter": true,
        "allowShowMiniToolBar": true,
        "allowSwitchLineShape": true,
        "allowSwitchJunctionPoint": true,
        "defaultNodeShape": 1,
        "defaultNodeWidth": "150",
        "defaultNodeHeight": "50",
        "defaultLineShape": 4,
        "defaultJunctionPoint": "tb",
        "defaultShowLineLabel": true,
        "disableZoom": false,
        "disableDragNode": false,
        "defaultExpandHolderPosition": "top",
        "defaultNodeBorderWidth": 2,
        "defaultNodeColor": "rgba(144, 238, 144, 1)",
        "isMoveByParentNode": false,
        isHideArrow: false,
      },
    }
  },
  created() {
  },
  mounted() {
    this.demoname = this.$route.params.demoname
    this.getInitData()
  },
  methods: {
    showNodeMenus(){

    },
    getInitData(){
       var  __graph_json_data={
        "rootId": "a",
        "nodes":[
          {
            "id": "a",
            "text": "a公司",
          },
          {
            "id": "b",
            "id2": "b2222",
            "text": "b公司",
            hasChildren: true,
            'data': { 'num': '11%' }
          },
          {
            "id": "c",
            "text": "c公司"
          },
        ],
        "links": [
          {
            "from": "b",
            "to": "a",
            // text: '控股份111',
            styleClass: "link-class"
          },
          {
            "from": "c",
            "to": "a",
            // text: '控股份222'
          },
          
        ]
      }
      __graph_json_data={
        rootId: '根節(jié)點Id',
        nodes: [
          { id: '根節(jié)點Id', name: '節(jié)點-1', data: { isRoot: true }, fixed:true, x:0, y:200 },
          { id: '節(jié)點b', name: '節(jié)點-b', data: { num: '22%' , hasChildren: true}, fixed:true,  },
          { id: '節(jié)點c', name: '節(jié)點-c', data: { num: '22%' ,hasChildren: true}, fixed:true,  },

        ],
        links: [
          { from: '節(jié)點b', to: '根節(jié)點Id', text: '' },
          { from: '節(jié)點c', to: '根節(jié)點Id', text: '' },

        ]
      }
      // 計算排列第二層級的節(jié)點的位置  使根節(jié)點在中心  第二層的均勻分布 根據(jù)nodes.length
      //(nodes.length-index)
      if(__graph_json_data.nodes.length==2){
        __graph_json_data.nodes[1].fixed=true
        __graph_json_data.nodes[1].x=0
      }
      if(__graph_json_data.nodes.length==3){
        __graph_json_data.nodes[1].fixed=true
        __graph_json_data.nodes[1].x=-250
        __graph_json_data.nodes[2].fixed=true
        __graph_json_data.nodes[2].x=250
      }


      this.setGraphData(__graph_json_data)
    },
    setGraphData(__graph_json_data) {
     
      // console.log(JSON.stringify(__graph_json_data))
      __graph_json_data.nodes.forEach(thisNode => {
        if (thisNode.text === '深圳市騰訊計算機(jī)系統(tǒng)有限公司') {
          thisNode.width = 300
          thisNode.height = 100
          // thisNode.offset_x = -80
        }
        
        // 為節(jié)點《這個節(jié)點原本是沒有子節(jié)點的》設(shè)置屬性expandHolderPosition，使其在沒有子節(jié)點的情況下也能顯示【展開/收縮】按鈕，當(dāng)點擊展開時動態(tài)加載子節(jié)點數(shù)據(jù)
      
        if (thisNode.data.hasChildren ) {
          // thisNode.data = { asyncChild: true, loaded: false, id: thisNode.id }; // 這是一個自定義屬性，用來在后續(xù)判斷如果點擊了這個節(jié)點，則動態(tài)獲取數(shù)據(jù)
          thisNode.data.asyncChild = true
          thisNode.data.loaded = false
          thisNode.expandHolderPosition = "top";
          thisNode.expanded = false;
        }
      })
      setTimeout(function() {
        this.g_loading = false
        this.$refs.seeksRelationGraph.setJsonData(__graph_json_data, (seeksRGGraph) => {
          // 這些寫上當(dāng)圖譜初始化完成后需要執(zhí)行的代碼
           this.$nextTick(()=>{
                this.$refs.seeksRelationGraph.focusRootNode()
              // this.$refs.seeksRelationGraph.refresh();
            })
        })
      }.bind(this), 1000)
    },
    onNodeExpand(node, e) {  // 模擬動態(tài)加載數(shù)據(jù)
      console.log('點擊的節(jié)點',node)
      if (node.data && node.data.asyncChild === true && node.data.loaded === false) {
        this.g_loading = true
        node.data.loaded = true
        setTimeout(function() {
          this.g_loading = false
          var _new_json_data = {
            nodes: [
              { id: node.id + '-child-1', text: node.id + '-的子節(jié)點1', data:{hasChildren: true,num:'12%'},},
              { id: node.id + '-child-2', text: node.id + '-的子節(jié)點2', data:{num:'92%'}},
              // { id: node.id + '-child-3', text: node.id + '-的子節(jié)點3'}
            ],
            links: [
              { to: node.id, from: node.id + '-child-1', },
              { to: node.id, from: node.id + '-child-2', },
              // { from: node.id, to: node.id + '-child-3', text: '動態(tài)子節(jié)點'}
            ]
          }
          _new_json_data.nodes.forEach(thisNode => {
             if (thisNode.data.hasChildren ) {
              // thisNode.data = { asyncChild: true, loaded: false, id: thisNode.id }; // 這是一個自定義屬性，用來在后續(xù)判斷如果點擊了這個節(jié)點，則動態(tài)獲取數(shù)據(jù)
              thisNode.data.asyncChild = true
              thisNode.data.loaded = false
              thisNode.expandHolderPosition = "top";
              thisNode.expanded = false;
            }
          })

         // 動態(tài)追加數(shù)據(jù)
          this.$refs.seeksRelationGraph.appendJsonData(_new_json_data, (seeksRGGraph) => {
            // 這些寫上當(dāng)圖譜初始化完成后需要執(zhí)行的代碼
             this.$nextTick(()=>{
              // this.$refs.seeksRelationGraph.refresh();
            })
          })
        }.bind(this), 1000)
        return
      }
    }
  }
}
</script>
<style >
/* .is-straight {
    & + g {
      .c-rg-link-text {
        transform: rotate(-90deg) translateY(20px);
      }
    }
  } */
  .link-class  .c-rg-link-text {
      transform: rotate(-90deg) translateY(20px);
  }
  .c-rg-link-text{
      /* transform: rotate(-90deg) ; */
  }
</style>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容