关系图/族谱

最新推荐文章于 2024-10-15 16:23:45 发布

不求猿

最新推荐文章于 2024-10-15 16:23:45 发布

阅读量514

点赞数

分类专栏：笔记文章标签： vue

本文链接：https://blog.csdn.net/qq_50879110/article/details/125786996

版权

笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

开源vue关系图谱组件：relation-graph
1，首先，使用npm或者cnpm安装relation-graph：

npm install --save relation-graph

2，在你的vue页面中使用这个组件：

<template>
  <div>
    <div v-loading="g_loading" style="width: calc(180vh);height:calc(90vh);">
      <SeeksRelationGraph ref="seeksRelationGraph" :options="graphOptions" />
    </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': 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>

上图效果：在这里插入图片描述
3. 解决页面抽动问题
官网给的代码中最外层div样式为

style="height:calc(100vh - 50px);"

改成以下，即可不抽搐

style="width: calc(180vh);height:calc(90vh);"