最近需要對(duì)一些關(guān)系知識(shí)圖譜數(shù)據(jù)做展示，用d3和echart都覺(jué)得用起來(lái)太麻煩靈活性還不能滿足需求。又趕上現(xiàn)在開(kāi)發(fā)的項(xiàng)目都使用的vue，就搜了一下vue關(guān)系圖譜組件，結(jié)果還真發(fā)現(xiàn)一個(gè)不錯(cuò)的，嘗試了一下感覺(jué)很不錯(cuò)，記錄一下。

github項(xiàng)目地址是：
https://github.com/seeksdream/relation-graph
官網(wǎng)API文檔：
http://relation-graph.com/#/docs

1，這個(gè)組件可以直接使用cnpm安裝relation-graph：

cnpm install --save relation-graph

2，套用一個(gè)示例代碼：

<template>
  <div>
    <div v-loading="g_loading" style="margin-top:50px;width: calc(100% - 10px);height:calc(100vh - 140px);">
      <SeeksRelationGraph ref="seeksRelationGraph" :options="graphOptions" />
    </div>
    <el-button type="success" class="c-show-code-button"><el-link  target="_blank" style="color: #ffffff;">查看代碼</el-link></el-button>
  </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': true,
        'layouts': [
          {
            'label': '中心',
            'layoutName': 'tree',
            'layoutClassName': 'seeks-layout-tree',
            'defaultJunctionPoint': 'border',
            'defaultNodeShape': 0,
            'defaultLineShape': 1,
            'centerOffset_x': -300,
            'centerOffset_y': 0,
            'min_per_width': '60',
            'min_per_height': '400'
          }
        ],
        'defaultLineShape': 4,
        'defaultJunctionPoint': 'tb',
        'defaultNodeShape': 1,
        'defaultNodeWidth': '50',
        'defaultNodeHeight': '250',
        'defaultNodeBorderWidth': 0
      }
    }
  },
  created() {
  },
  mounted() {
    this.demoname = this.$route.params.demoname
    this.setGraphData()
  },
  methods: {
    setGraphData() {
      var __graph_json_data = { 'rootId': 'N1', 'nodes': [{ 'id': 'N1', 'text': '深圳市騰訊計(jì)算機(jī)系統(tǒng)有限公司', 'color': '#2E4E8F' }, { 'id': 'N2', 'text': '張志東', 'color': '#4ea2f0' }, { 'id': 'N3', 'text': '陳一丹', 'color': '#4ea2f0' }, { 'id': 'N4', 'text': '許晨曄', 'color': '#4ea2f0' }, { 'id': 'N5', 'text': '馬化騰', 'color': '#4ea2f0' }, { 'id': 'N6', 'text': '騰訊云科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N7', 'text': '騰訊醫(yī)療健康（深圳）有限公司', 'color': '#4ea2f0' }, { 'id': 'N8', 'text': '深圳市騰訊視頻文化傳播有限公司', 'color': '#4ea2f0' }, { 'id': 'N9', 'text': '星創(chuàng)互聯(lián)（北京）科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N10', 'text': '蘇州鐘鼎創(chuàng)業(yè)二號(hào)投資中心（有限合伙）', 'color': '#4ea2f0' }, { 'id': 'N11', 'text': '北京驛碼神通信息技術(shù)有限公司', 'color': '#4ea2f0' }, { 'id': 'N12', 'text': '張家界（北京驛碼神通）信息技術(shù)有限公司', 'color': '#4ea2f0' }, { 'id': 'N13', 'text': '濱海（天津）金融資產(chǎn)交易中心股份有限公司', 'color': '#4ea2f0' }, { 'id': 'N14', 'text': '深圳騰富博投資有限公司', 'color': '#4ea2f0' }, { 'id': 'N15', 'text': '騰訊影業(yè)文化傳播有限公司', 'color': '#4ea2f0' }, { 'id': 'N16', 'text': '霍爾果斯曉騰影業(yè)文化傳播有限公司', 'color': '#4ea2f0' }, { 'id': 'N17', 'text': '蒼穹互娛（天津）文化傳播有限公司', 'color': '#4ea2f0' }, { 'id': 'N18', 'text': '北京騰訊影業(yè)有限公司', 'color': '#4ea2f0' }, { 'id': 'N19', 'text': '霍爾果斯騰影影視發(fā)行有限公司', 'color': '#4ea2f0' }, { 'id': 'N20', 'text': '上海騰聞網(wǎng)絡(luò)科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N21', 'text': '上海寶申數(shù)字科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N22', 'text': '海南高燈科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N23', 'text': '益盟股份有限公司', 'color': '#4ea2f0' }, { 'id': 'N24', 'text': '北京魔方無(wú)限科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N25', 'text': '北京像素軟件科技股份有限公司', 'color': '#4ea2f0' }, { 'id': 'N26', 'text': '深圳市世紀(jì)騰華信息技術(shù)有限公司', 'color': '#4ea2f0' }, { 'id': 'N27', 'text': '浙江齊聚科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N28', 'text': '未來(lái)電視有限公司', 'color': '#4ea2f0' }, { 'id': 'N29', 'text': '北京騰新科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N30', 'text': '河北雄安新區(qū)騰訊計(jì)算機(jī)系統(tǒng)有限公司', 'color': '#4ea2f0' }, { 'id': 'N31', 'text': '深圳市企鵝金融科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N32', 'text': '深圳市移卡科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N33', 'text': '財(cái)付通支付科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N34', 'text': '金保信社保卡科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N35', 'text': '網(wǎng)聯(lián)清算有限公司', 'color': '#4ea2f0' }, { 'id': 'N36', 'text': '北京搜狗信息服務(wù)有限公司', 'color': '#4ea2f0' }, { 'id': 'N37', 'text': '北京網(wǎng)羅天下生活科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N120', 'text': '深圳市騰訊商業(yè)管理有限公司', 'color': '#4ea2f0' }, { 'id': 'N121', 'text': '深圳市智稅鏈科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N122', 'text': '橫琴紅土創(chuàng)新創(chuàng)業(yè)投資合伙企業(yè)（有限合伙）', 'color': '#4ea2f0' }, { 'id': 'N123', 'text': '上海摯信新經(jīng)濟(jì)一期股權(quán)投資合伙企業(yè)（有限合伙）', 'color': '#4ea2f0' }, { 'id': 'N124', 'text': '上海云鋒股權(quán)投資中心（有限合伙）', 'color': '#4ea2f0' }, { 'id': 'N125', 'text': '北京創(chuàng)新工場(chǎng)投資中心（有限合伙）', 'color': '#4ea2f0' }, { 'id': 'N126', 'text': '廣州市擎天柱網(wǎng)絡(luò)科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N127', 'text': '河南騰河網(wǎng)絡(luò)科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N128', 'text': '深圳市財(cái)付通網(wǎng)絡(luò)金融小額貸款有限公司', 'color': '#4ea2f0' }, { 'id': 'N129', 'text': '湖北騰楚網(wǎng)絡(luò)科技有限責(zé)任公司', 'color': '#4ea2f0' }, { 'id': 'N130', 'text': '騰訊征信有限公司', 'color': '#4ea2f0' }, { 'id': 'N131', 'text': '百行征信有限公司', 'color': '#4ea2f0' }, { 'id': 'N132', 'text': '廣東騰南網(wǎng)絡(luò)信息科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N133', 'text': '深圳市騰南網(wǎng)絡(luò)信息科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N134', 'text': '廣州騰威會(huì)展有限公司', 'color': '#4ea2f0' }, { 'id': 'N135', 'text': '廣州南極廣告?zhèn)髅接邢薰?, 'color': '#4ea2f0' }, { 'id': 'N136', 'text': '廣州壹糖網(wǎng)絡(luò)科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N137', 'text': '廣州玩心藝網(wǎng)絡(luò)科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N138', 'text': '廣東騰南網(wǎng)絡(luò)信息科技有限公司深圳分公司', 'color': '#4ea2f0' }, { 'id': 'N139', 'text': '珠海橫琴騰南網(wǎng)絡(luò)信息科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N140', 'text': '深圳市世紀(jì)彩訊科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N141', 'text': '上海騰訊企鵝影視文化傳播有限公司', 'color': '#4ea2f0' }, { 'id': 'N142', 'text': '海南周天娛樂(lè)有限公司', 'color': '#4ea2f0' }, { 'id': 'N143', 'text': '杭州紅杉合遠(yuǎn)股權(quán)投資合伙企業(yè)（有限合伙）', 'color': '#4ea2f0' }, { 'id': 'N144', 'text': '廣州銀漢科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N145', 'text': '深圳市文娛華彩科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N146', 'text': '林芝文娛本源科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N147', 'text': '深圳市文娛華章科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N148', 'text': '騰訊大地通途（北京）科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N149', 'text': '蘇州鐘鼎三號(hào)創(chuàng)業(yè)投資中心（有限合伙）', 'color': '#4ea2f0' }, { 'id': 'N150', 'text': '永楊安風(fēng)（北京）科技股份有限公司', 'color': '#4ea2f0' }, { 'id': 'N151', 'text': '霍爾果斯永楊安風(fēng)網(wǎng)絡(luò)科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N152', 'text': '遼寧騰遼科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N153', 'text': '沈陽(yáng)小黃牛網(wǎng)絡(luò)科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N154', 'text': '深圳市泰捷軟件技術(shù)有限公司', 'color': '#4ea2f0' }, { 'id': 'N155', 'text': '眾安在線財(cái)產(chǎn)保險(xiǎn)股份有限公司', 'color': '#4ea2f0' }, { 'id': 'N156', 'text': '深圳市騰訊動(dòng)漫有限公司', 'color': '#4ea2f0' }, { 'id': 'N157', 'text': '北京奇跡開(kāi)元文化有限公司', 'color': '#4ea2f0' }, { 'id': 'N158', 'text': '浙江騰訊影業(yè)有限公司', 'color': '#4ea2f0' }, { 'id': 'N159', 'text': '北京醋溜網(wǎng)絡(luò)科技股份有限公司', 'color': '#4ea2f0' }, { 'id': 'N160', 'text': '甘肅剛泰控股（集團(tuán)）股份有限公司', 'color': '#4ea2f0' }, { 'id': 'N161', 'text': '浙江騰越網(wǎng)絡(luò)科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N162', 'text': '杭州熱秀網(wǎng)絡(luò)技術(shù)有限公司', 'color': '#4ea2f0' }, { 'id': 'N163', 'text': '浙江騰趣網(wǎng)絡(luò)科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N164', 'text': '湖南騰湘科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N165', 'text': '湖南繪裝網(wǎng)絡(luò)科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N166', 'text': '華誼兄弟傳媒股份有限公司', 'color': '#4ea2f0' }, { 'id': 'N167', 'text': '無(wú)錫買賣寶信息技術(shù)有限公司', 'color': '#4ea2f0' }, { 'id': 'N168', 'text': '優(yōu)揚(yáng)文化傳媒股份有限公司', 'color': '#4ea2f0' }, { 'id': 'N169', 'text': '武漢鯊魚(yú)網(wǎng)絡(luò)直播技術(shù)有限公司', 'color': '#4ea2f0' }, { 'id': 'N170', 'text': '深圳市騰訊網(wǎng)域計(jì)算機(jī)網(wǎng)絡(luò)有限公司', 'color': '#4ea2f0' }, { 'id': 'N171', 'text': '廈門國(guó)際金融技術(shù)有限公司', 'color': '#4ea2f0' }, { 'id': 'N172', 'text': '深圳市移卡科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N173', 'text': '上海企鵝金融信息服務(wù)有限公司', 'color': '#4ea2f0' }, { 'id': 'N174', 'text': '騰安基金銷售（深圳）有限公司', 'color': '#4ea2f0' }, { 'id': 'N175', 'text': '深圳微眾金融科技集團(tuán)股份有限公司', 'color': '#4ea2f0' }, { 'id': 'N176', 'text': '深圳瓶子科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N177', 'text': '上海冠潤(rùn)創(chuàng)業(yè)投資合伙企業(yè)（有限合伙）', 'color': '#4ea2f0' }, { 'id': 'N178', 'text': '深圳前海微眾銀行股份有限公司', 'color': '#4ea2f0' }, { 'id': 'N179', 'text': '北京英克必成科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N180', 'text': '和泰人壽保險(xiǎn)股份有限公司', 'color': '#4ea2f0' }, { 'id': 'N181', 'text': '北京知道創(chuàng)宇信息技術(shù)股份有限公司', 'color': '#4ea2f0' }, { 'id': 'N182', 'text': '常州哈酷那軟件科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N183', 'text': '騰訊云計(jì)算（北京）有限責(zé)任公司', 'color': '#4ea2f0' }], 'links': [{ 'from': 'N2', 'to': 'N1', 'text': '' }, { 'from': 'N3', 'to': 'N1', 'text': '' }, { 'from': 'N4', 'to': 'N1', 'text': '' }, { 'from': 'N5', 'to': 'N1', 'text': '' }, { 'from': 'N1', 'to': 'N6', 'text': '出資:100%' }, { 'from': 'N1', 'to': 'N7', 'text': '出資:100%' }, { 'from': 'N1', 'to': 'N8', 'text': '出資:95%' }, { 'from': 'N1', 'to': 'N9', 'text': '出資:37.22%' }, { 'from': 'N1', 'to': 'N10', 'text': '出資:0%' }, { 'from': 'N1', 'to': 'N11', 'text': '出資:100%' }, { 'from': 'N11', 'to': 'N12', 'text': '出資:51%' }, { 'from': 'N11', 'to': 'N13', 'text': '出資:30%' }, { 'from': 'N11', 'to': 'N14', 'text': '出資:57.8%' }, { 'from': 'N1', 'to': 'N15', 'text': '出資:95%' }, { 'from': 'N15', 'to': 'N16', 'text': '出資:100%' }, { 'from': 'N15', 'to': 'N17', 'text': '出資:10%' }, { 'from': 'N15', 'to': 'N18', 'text': '出資:100%' }, { 'from': 'N15', 'to': 'N19', 'text': '出資:100%' }, { 'from': 'N1', 'to': 'N20', 'text': '出資:51%' }, { 'from': 'N20', 'to': 'N21', 'text': '出資:44%' }, { 'from': 'N1', 'to': 'N22', 'text': '出資:20.23%' }, { 'from': 'N1', 'to': 'N23', 'text': '出資:19.12%' }, { 'from': 'N1', 'to': 'N24', 'text': '出資:0%' }, { 'from': 'N1', 'to': 'N25', 'text': '出資:14.68%' }, { 'from': 'N1', 'to': 'N26', 'text': '出資:100%' }, { 'from': 'N1', 'to': 'N27', 'text': '出資:16.03%' }, { 'from': 'N1', 'to': 'N28', 'text': '出資:19.9%' }, { 'from': 'N1', 'to': 'N29', 'text': '出資:0%' }, { 'from': 'N1', 'to': 'N30', 'text': '出資:90%' }, { 'from': 'N1', 'to': 'N31', 'text': '出資:29%' }, { 'from': 'N31', 'to': 'N32', 'text': '出資:0.31%' }, { 'from': 'N1', 'to': 'N33', 'text': '出資:95%' }, { 'from': 'N33', 'to': 'N34', 'text': '出資:15%' }, { 'from': 'N33', 'to': 'N35', 'text': '出資:9.61%' }, { 'from': 'N1', 'to': 'N36', 'text': '出資:45%' }, { 'from': 'N1', 'to': 'N37', 'text': '出資:22.82%' }, { 'from': 'N1', 'to': 'N120', 'text': '出資:95%' }, { 'from': 'N120', 'to': 'N121', 'text': '出資:100%' }, { 'from': 'N120', 'to': 'N122', 'text': '出資:99%' }, { 'from': 'N120', 'to': 'N123', 'text': '出資:0%' }, { 'from': 'N120', 'to': 'N124', 'text': '出資:0%' }, { 'from': 'N120', 'to': 'N125', 'text': '出資:44.44%' }, { 'from': 'N1', 'to': 'N126', 'text': '出資:39.05%' }, { 'from': 'N1', 'to': 'N127', 'text': '出資:51%' }, { 'from': 'N1', 'to': 'N128', 'text': '出資:95%' }, { 'from': 'N1', 'to': 'N129', 'text': '出資:50%' }, { 'from': 'N1', 'to': 'N130', 'text': '出資:95%' }, { 'from': 'N130', 'to': 'N131', 'text': '出資:0%' }, { 'from': 'N1', 'to': 'N132', 'text': '出資:51%' }, { 'from': 'N132', 'to': 'N133', 'text': '出資:100%' }, { 'from': 'N132', 'to': 'N134', 'text': '出資:38%' }, { 'from': 'N132', 'to': 'N135', 'text': '出資:15%' }, { 'from': 'N132', 'to': 'N136', 'text': '出資:0%' }, { 'from': 'N132', 'to': 'N137', 'text': '出資:20%' }, { 'from': 'N132', 'to': 'N138', 'text': '出資:0%' }, { 'from': 'N132', 'to': 'N139', 'text': '出資:100%' }, { 'from': 'N1', 'to': 'N140', 'text': '出資:99%' }, { 'from': 'N1', 'to': 'N141', 'text': '出資:95%' }, { 'from': 'N141', 'to': 'N142', 'text': '出資:100%' }, { 'from': 'N1', 'to': 'N143', 'text': '出資:0%' }, { 'from': 'N1', 'to': 'N144', 'text': '出資:8%' }, { 'from': 'N1', 'to': 'N145', 'text': '出資:100%' }, { 'from': 'N145', 'to': 'N146', 'text': '出資:100%' }, { 'from': 'N145', 'to': 'N147', 'text': '出資:100%' }, { 'from': 'N1', 'to': 'N148', 'text': '出資:100%' }, { 'from': 'N1', 'to': 'N149', 'text': '出資:0%' }, { 'from': 'N1', 'to': 'N150', 'text': '出資:12.69%' }, { 'from': 'N150', 'to': 'N151', 'text': '出資:100%' }, { 'from': 'N1', 'to': 'N152', 'text': '出資:51%' }, { 'from': 'N152', 'to': 'N153', 'text': '出資:2.01%' }, { 'from': 'N1', 'to': 'N154', 'text': '出資:39%' }, { 'from': 'N1', 'to': 'N155', 'text': '出資:10.21%' }, { 'from': 'N1', 'to': 'N156', 'text': '出資:100%' }, { 'from': 'N156', 'to': 'N157', 'text': '出資:45%' }, { 'from': 'N1', 'to': 'N158', 'text': '出資:100%' }, { 'from': 'N1', 'to': 'N159', 'text': '出資:10.06%' }, { 'from': 'N1', 'to': 'N160', 'text': '出資:1.52%' }, { 'from': 'N1', 'to': 'N161', 'text': '出資:51%' }, { 'from': 'N161', 'to': 'N162', 'text': '出資:0%' }, { 'from': 'N161', 'to': 'N163', 'text': '出資:100%' }, { 'from': 'N1', 'to': 'N164', 'text': '出資:51%' }, { 'from': 'N164', 'to': 'N165', 'text': '出資:5%' }, { 'from': 'N1', 'to': 'N166', 'text': '出資:7.88%' }, { 'from': 'N1', 'to': 'N167', 'text': '出資:47.53%' }, { 'from': 'N1', 'to': 'N168', 'text': '出資:9%' }, { 'from': 'N1', 'to': 'N169', 'text': '出資:51.72%' }, { 'from': 'N1', 'to': 'N170', 'text': '出資:29%' }, { 'from': 'N170', 'to': 'N171', 'text': '出資:3.89%' }, { 'from': 'N170', 'to': 'N172', 'text': '出資:3.83%' }, { 'from': 'N170', 'to': 'N173', 'text': '出資:100%' }, { 'from': 'N170', 'to': 'N174', 'text': '出資:100%' }, { 'from': 'N170', 'to': 'N175', 'text': '出資:0%' }, { 'from': 'N170', 'to': 'N176', 'text': '出資:100%' }, { 'from': 'N170', 'to': 'N177', 'text': '出資:0%' }, { 'from': 'N170', 'to': 'N178', 'text': '出資:21.43%' }, { 'from': 'N1', 'to': 'N179', 'text': '出資:100%' }, { 'from': 'N179', 'to': 'N180', 'text': '出資:15%' }, { 'from': 'N179', 'to': 'N181', 'text': '出資:10.5%' }, { 'from': 'N179', 'to': 'N182', 'text': '出資:24.84%' }, { 'from': 'N179', 'to': 'N183', 'text': '出資:20%' }] }

      console.log(JSON.stringify(__graph_json_data))
      __graph_json_data.nodes.forEach(thisNode => {
        if (thisNode.text === '深圳市騰訊計(jì)算機(jī)系統(tǒng)有限公司') {
          thisNode.width = 300
          thisNode.height = 100
          thisNode.offset_x = -80
        }
        if (thisNode.text === '張志東' || thisNode.text === '陳一丹' || thisNode.text === '許晨曄' || thisNode.text === '馬化騰') {
          thisNode.width = 100
          thisNode.height = 80
          thisNode.offset_y = 80
        }
      })
      setTimeout(function() {
        this.g_loading = false
        this.$refs.seeksRelationGraph.setJsonData(__graph_json_data, (seeksRGGraph) => {
          // 這些寫上當(dāng)圖譜初始化完成后需要執(zhí)行的代碼
        })
      }.bind(this), 1000)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

展示效果：

WX20200911-184405@2x.png

一個(gè)在線可視化配置工具：

WX20200911-191832@2x.png

設(shè)置節(jié)點(diǎn)配置：

WX20200911-191918@2x.png