vue实现组织机构图谱（组织架构图）

最近需要对一些关系知识图谱数据做展示，用d3和echart都觉得用起来太麻烦灵活性还不能满足需求。又赶上现在开发的项目都使用的vue，就搜了一下vue关系图谱组件，结果还真发现一个不错的，尝试了一下感觉很不错，记录一下。
github项目地址是：
https://github.com/seeksdream/relation-graph
官网API文档：
http://relation-graph.com/#/docs
1，这个组件可以直接使用cnpm安装relation-graph：

cnpm install --save relation-graph

2，套用一个示例代码：
<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 href="https://github.com/seeksdream/relation-graph/blob/master/doc/demo/Demo4SceneOrg.vue" 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': '深圳市腾讯计算机系统有限公司', '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': '腾讯医疗健康（深圳）有限公司', 'color': '#4ea2f0' }, { 'id': 'N8', 'text': '深圳市腾讯视频文化传播有限公司', 'color': '#4ea2f0' }, { 'id': 'N9', 'text': '星创互联（北京）科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N10', 'text': '苏州钟鼎创业二号投资中心（有限合伙）', 'color': '#4ea2f0' }, { 'id': 'N11', 'text': '北京驿码神通信息技术有限公司', 'color': '#4ea2f0' }, { 'id': 'N12', 'text': '张家界（北京驿码神通）信息技术有限公司', 'color': '#4ea2f0' }, { 'id': 'N13', 'text': '滨海（天津）金融资产交易中心股份有限公司', 'color': '#4ea2f0' }, { 'id': 'N14', 'text': '深圳腾富博投资有限公司', 'color': '#4ea2f0' }, { 'id': 'N15', 'text': '腾讯影业文化传播有限公司', 'color': '#4ea2f0' }, { 'id': 'N16', 'text': '霍尔果斯晓腾影业文化传播有限公司', 'color': '#4ea2f0' }, { 'id': 'N17', 'text': '苍穹互娱（天津）文化传播有限公司', 'color': '#4ea2f0' }, { 'id': 'N18', 'text': '北京腾讯影业有限公司', 'color': '#4ea2f0' }, { 'id': 'N19', 'text': '霍尔果斯腾影影视发行有限公司', 'color': '#4ea2f0' }, { 'id': 'N20', 'text': '上海腾闻网络科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N21', 'text': '上海宝申数字科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N22', 'text': '海南高灯科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N23', 'text': '益盟股份有限公司', 'color': '#4ea2f0' }, { 'id': 'N24', 'text': '北京魔方无限科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N25', 'text': '北京像素软件科技股份有限公司', 'color': '#4ea2f0' }, { 'id': 'N26', 'text': '深圳市世纪腾华信息技术有限公司', 'color': '#4ea2f0' }, { 'id': 'N27', 'text': '浙江齐聚科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N28', 'text': '未来电视有限公司', 'color': '#4ea2f0' }, { 'id': 'N29', 'text': '北京腾新科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N30', 'text': '河北雄安新区腾讯计算机系统有限公司', 'color': '#4ea2f0' }, { 'id': 'N31', 'text': '深圳市企鹅金融科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N32', 'text': '深圳市移卡科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N33', 'text': '财付通支付科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N34', 'text': '金保信社保卡科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N35', 'text': '网联清算有限公司', 'color': '#4ea2f0' }, { 'id': 'N36', 'text': '北京搜狗信息服务有限公司', 'color': '#4ea2f0' }, { 'id': 'N37', 'text': '北京网罗天下生活科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N120', 'text': '深圳市腾讯商业管理有限公司', 'color': '#4ea2f0' }, { 'id': 'N121', 'text': '深圳市智税链科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N122', 'text': '横琴红土创新创业投资合伙企业（有限合伙）', 'color': '#4ea2f0' }, { 'id': 'N123', 'text': '上海挚信新经济一期股权投资合伙企业（有限合伙）', 'color': '#4ea2f0' }, { 'id': 'N124', 'text': '上海云锋股权投资中心（有限合伙）', 'color': '#4ea2f0' }, { 'id': 'N125', 'text': '北京创新工场投资中心（有限合伙）', 'color': '#4ea2f0' }, { 'id': 'N126', 'text': '广州市擎天柱网络科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N127', 'text': '河南腾河网络科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N128', 'text': '深圳市财付通网络金融小额贷款有限公司', 'color': '#4ea2f0' }, { 'id': 'N129', 'text': '湖北腾楚网络科技有限责任公司', 'color': '#4ea2f0' }, { 'id': 'N130', 'text': '腾讯征信有限公司', 'color': '#4ea2f0' }, { 'id': 'N131', 'text': '百行征信有限公司', 'color': '#4ea2f0' }, { 'id': 'N132', 'text': '广东腾南网络信息科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N133', 'text': '深圳市腾南网络信息科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N134', 'text': '广州腾威会展有限公司', 'color': '#4ea2f0' }, { 'id': 'N135', 'text': '广州南极广告传媒有限公司', 'color': '#4ea2f0' }, { 'id': 'N136', 'text': '广州壹糖网络科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N137', 'text': '广州玩心艺网络科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N138', 'text': '广东腾南网络信息科技有限公司深圳分公司', 'color': '#4ea2f0' }, { 'id': 'N139', 'text': '珠海横琴腾南网络信息科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N140', 'text': '深圳市世纪彩讯科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N141', 'text': '上海腾讯企鹅影视文化传播有限公司', 'color': '#4ea2f0' }, { 'id': 'N142', 'text': '海南周天娱乐有限公司', 'color': '#4ea2f0' }, { 'id': 'N143', 'text': '杭州红杉合远股权投资合伙企业（有限合伙）', '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': '苏州钟鼎三号创业投资中心（有限合伙）', 'color': '#4ea2f0' }, { 'id': 'N150', 'text': '永杨安风（北京）科技股份有限公司', 'color': '#4ea2f0' }, { 'id': 'N151', 'text': '霍尔果斯永杨安风网络科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N152', 'text': '辽宁腾辽科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N153', 'text': '沈阳小黄牛网络科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N154', 'text': '深圳市泰捷软件技术有限公司', 'color': '#4ea2f0' }, { 'id': 'N155', 'text': '众安在线财产保险股份有限公司', 'color': '#4ea2f0' }, { 'id': 'N156', 'text': '深圳市腾讯动漫有限公司', 'color': '#4ea2f0' }, { 'id': 'N157', 'text': '北京奇迹开元文化有限公司', 'color': '#4ea2f0' }, { 'id': 'N158', 'text': '浙江腾讯影业有限公司', 'color': '#4ea2f0' }, { 'id': 'N159', 'text': '北京醋溜网络科技股份有限公司', 'color': '#4ea2f0' }, { 'id': 'N160', 'text': '甘肃刚泰控股（集团）股份有限公司', 'color': '#4ea2f0' }, { 'id': 'N161', 'text': '浙江腾越网络科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N162', 'text': '杭州热秀网络技术有限公司', 'color': '#4ea2f0' }, { 'id': 'N163', 'text': '浙江腾趣网络科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N164', 'text': '湖南腾湘科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N165', 'text': '湖南绘装网络科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N166', 'text': '华谊兄弟传媒股份有限公司', 'color': '#4ea2f0' }, { 'id': 'N167', 'text': '无锡买卖宝信息技术有限公司', 'color': '#4ea2f0' }, { 'id': 'N168', 'text': '优扬文化传媒股份有限公司', 'color': '#4ea2f0' }, { 'id': 'N169', 'text': '武汉鲨鱼网络直播技术有限公司', 'color': '#4ea2f0' }, { 'id': 'N170', 'text': '深圳市腾讯网域计算机网络有限公司', 'color': '#4ea2f0' }, { 'id': 'N171', 'text': '厦门国际金融技术有限公司', 'color': '#4ea2f0' }, { 'id': 'N172', 'text': '深圳市移卡科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N173', 'text': '上海企鹅金融信息服务有限公司', 'color': '#4ea2f0' }, { 'id': 'N174', 'text': '腾安基金销售（深圳）有限公司', 'color': '#4ea2f0' }, { 'id': 'N175', 'text': '深圳微众金融科技集团股份有限公司', 'color': '#4ea2f0' }, { 'id': 'N176', 'text': '深圳瓶子科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N177', 'text': '上海冠润创业投资合伙企业（有限合伙）', 'color': '#4ea2f0' }, { 'id': 'N178', 'text': '深圳前海微众银行股份有限公司', 'color': '#4ea2f0' }, { 'id': 'N179', 'text': '北京英克必成科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N180', 'text': '和泰人寿保险股份有限公司', 'color': '#4ea2f0' }, { 'id': 'N181', 'text': '北京知道创宇信息技术股份有限公司', 'color': '#4ea2f0' }, { 'id': 'N182', 'text': '常州哈酷那软件科技有限公司', 'color': '#4ea2f0' }, { 'id': 'N183', 'text': '腾讯云计算（北京）有限责任公司', '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 === '深圳市腾讯计算机系统有限公司') {
          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) => {
          // 这些写上当图谱初始化完成后需要执行的代码
        })
      }.bind(this), 1000)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
展示效果：
WX20200911-184405@2x.png
一个在线可视化配置工具：
WX20200911-191832@2x.png
设置节点配置：
WX20200911-191918@2x.png