relation-graph获取图谱的Base64图片

参考下面vue3代码，记得点赞哦！

<template>
  <div>
    <div style="border: #efefef solid 1px; height: calc(100vh - 100px); width: 100%;">
      <RelationGraph ref="relationGraph$" :options="options" :on-node-click="onNodeClick">
        <template #node="{ node }">
          <div style="padding-top: 20px;">节点：{{ node.text }}</div>
        </template>
      </RelationGraph>
    </div>
    <button @click="exportToBase64">导出为 Base64</button>
    <div v-if="imageBase64">
      <h3>生成的图片：</h3>
      <img :src="imageBase64" alt="Graph Image" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import RelationGraph, { RGJsonData, RGNode, RGUserEvent } from 'relation-graph/vue3';

const relationGraph$ = ref<RelationGraph>();
const options = {
  defaultExpandHolderPosition: 'right',
  debug: true,
  showDebugPanel: true,
  layout: {
    layoutName: 'force'
  },
};

const imageBase64 = ref<string | null>(null); // 用于存储 Base64 图片

const onNodeClick = (node: RGNode, e: RGUserEvent) => {
  console.log('onNodeClick:', node.id);
  return true;
};

const exportToBase64 = async () => {
  const instance = relationGraph$.value?.getInstance();
  if (instance) {
    // const canvas = await instance.createGraphCanvas(); // 获取 Canvas
    // const base64 = canvas.toDataURL('image/png'); // 获取 Base64 编码
    // imageBase64.value = canvas.toDataURL('image/png'); // 获取并设置 Base64 编码
    imageBase64.value = await instance.getImageBase64()
  }
};

onMounted(() => {
  const __graph_json_data = { 'rootId': 'N1', 'nodes': [{ 'id': 'N1', 'text': '刘玉国', 'color': '#ec6941', 'borderColor': '#ff875e', 'data': { 'nodetype': 'ctrler' }}, { 'id': 'N2', 'text': '毛华', 'color': '#ec6941', 'borderColor': '#ff875e', 'data': { 'nodetype': 'ctrler' }}, { 'id': 'N3', 'text': '张颖', 'color': '#ec6941', 'borderColor': '#ff875e', 'data': { 'nodetype': 'ctrler' }}, { 'id': 'N4', 'text': '田鑫', 'color': '#ec6941', 'borderColor': '#ff875e', 'data': { 'nodetype': 'ctrler' }}, { 'id': 'N5', 'text': 'Applefield Global Limited', 'color': '#ec6941', 'borderColor': '#ff875e', 'data': { 'nodetype': 'ctrler' }}, { 'id': 'N6', 'text': '陈宇', 'color': '#ec6941', 'borderColor': '#ff875e', 'data': { 'nodetype': 'ctrler' }}, { 'id': 'N7', 'text': '马化腾', 'color': '#ec6941', 'borderColor': '#ff875e', 'data': { 'nodetype': 'ctrler' }}, { 'id': 'N8', 'text': '丁国云', 'color': '#ec6941', 'borderColor': '#ff875e', 'data': { 'nodetype': 'ctrler' }}, { 'id': 'N9', 'text': '唐毅斌', 'color': '#ec6941', 'borderColor': '#ff875e', 'data': { 'nodetype': 'ctrler' }}, { 'id': 'N10', 'text': '腾创控股有限公司', 'color': '#ec6941', 'borderColor': '#ff875e', 'data': { 'nodetype': 'ctrler' }}, { 'id': 'N11', 'text': '张福茂', 'color': '#ec6941', 'borderColor': '#ff875e', 'data': { 'nodetype': 'ctrler' }}, { 'id': 'N12', 'text': '奚丹', 'color': '#ec6941', 'borderColor': '#ff875e', 'data': { 'nodetype': 'ctrler' }}, { 'id': 'N13', 'text': '胡建龙', 'color': '#ec6941', 'borderColor': '#ff875e', 'data': { 'nodetype': 'ctrler' }}, { 'id': 'N14', 'text': '中霸集团有限公司', 'color': '#ec6941', 'borderColor': '#ff875e', 'data': { 'nodetype': 'ctrler' }}, { 'id': 'N15', 'text': '马化腾', 'color': '#ec6941', 'borderColor': '#ff875e', 'data': { 'nodetype': 'ctrler' }}, { 'id': 'N16', 'text': '廖卫怡', 'color': '#ec6941', 'borderColor': '#ff875e', 'data': { 'nodetype': 'ctrler' }}, { 'id': 'N17', 'text': '向宇东', 'color': '#ec6941', 'borderColor': '#ff875e', 'data': { 'nodetype': 'ctrler' }}, { 'id': 'N18', 'text': '浙江腾趣网络科技有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N19', 'text': '杭州恒信信息系统工程有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N20', 'text': '成都信仰投资有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N21', 'text': '林芝文娱本源科技有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N22', 'text': '大连市世纪鲲鹏科技有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N23', 'text': '贵安新区腾讯数码有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N24', 'text': '霍尔果斯晓腾影业文化传播有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N25', 'text': '鹰王（深圳）科技有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N26', 'text': '深圳市腾讯信息技术有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N27', 'text': '上海腾闻网络科技有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N28', 'text': '横琴红土创新创业投资合伙企业（有限合伙）', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N29', 'text': '深圳市世纪天游科技有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N30', 'text': '深圳辰薰贸易有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N31', 'text': '武汉市腾讯教育科技有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N32', 'text': '深圳市腾讯网域计算机网络有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N33', 'text': '深圳市腾讯商业管理有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N34', 'text': '上海腾讯信息技术有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N35', 'text': '海南周天娱乐有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N36', 'text': '成都美奥广告有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N37', 'text': '深圳市企鹅金融科技有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N38', 'text': '浙江腾越网络科技有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N39', 'text': '珠海横琴腾南网络信息科技有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N40', 'text': '霍尔果斯腾影影视发行有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N41', 'text': '上海腾富金融信息服务有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N42', 'text': '杭州腾讯魔乐软件有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N43', 'text': '财付通支付科技有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N44', 'text': '华骏科技（深圳）有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N45', 'text': '清远市腾讯数码有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N46', 'text': '武汉市世纪冲鸣科技有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N47', 'text': '腾讯影业文化传播有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N48', 'text': '深圳市文娱华章科技有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N49', 'text': '腾安基金销售（深圳）有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N50', 'text': '湖南腾湘科技有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N51', 'text': '广州腾讯科技有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N52', 'text': '深圳市腾讯创业基地发展有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N53', 'text': '南京网典科技有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N54', 'text': '深圳市腾讯教育科技有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N55', 'text': '桐庐平顶之上文化创意有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N56', 'text': '深圳市腾南网络信息科技有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N57', 'text': '重庆市瑞德铭科技发展有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N58', 'text': '北京腾讯影业有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N59', 'text': '深圳市文娱华彩科技有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N60', 'text': '深圳市世纪彩讯科技有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N61', 'text': '海南腾讯互动娱乐有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N62', 'text': '北京弘泰永盛资本管理有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N63', 'text': '深圳市世纪腾华信息技术有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N64', 'text': '深圳市智税链科技有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N65', 'text': '河南腾河网络科技有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N66', 'text': '深圳市世纪凯旋科技有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N67', 'text': '上海腾讯企鹅影视文化传播有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N68', 'text': '深圳市腾讯动漫有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N69', 'text': '仪征腾讯数码有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N70', 'text': '深圳瓶子科技有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N71', 'text': '北京游侠网信息技术有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N72', 'text': '河北雄安新区腾讯计算机系统有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N73', 'text': '南京腾讯数码有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N74', 'text': '腾讯科技（深圳）有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N75', 'text': '海南天天众猜科技有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N76', 'text': '北京驿码神通信息技术有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N77', 'text': '深圳市天美互动娱乐有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N78', 'text': '成都友巢互动网络科技有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N79', 'text': '张家界（北京驿码神通）信息技术有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N80', 'text': '腾讯科技（上海）有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N81', 'text': '腾讯云科技有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N82', 'text': '深圳市腾讯魔方科技有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N83', 'text': '重庆腾讯信息技术有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N84', 'text': '深圳市腾讯文化传媒有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N85', 'text': '北京英克必成科技有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N86', 'text': '成都恒宇装饰有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N87', 'text': '腾讯科技(成都)有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N88', 'text': '合肥市腾讯信息科技有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N89', 'text': '腾创（深圳）有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N90', 'text': '上海挚信新经济一期股权投资合伙企业（有限合伙）', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N91', 'text': '宝石岭（天津）科技有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N92', 'text': '深圳市宏大酒店用品有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N93', 'text': '北京倍嘉时代科技有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N94', 'text': '碁震（上海）云计算科技有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N95', 'text': '腾讯云计算（北京）有限责任公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N96', 'text': '深圳市腾讯网络信息技术有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N97', 'text': '广东腾南网络信息科技有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N98', 'text': '腾创控股（深圳）有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N99', 'text': '浙江腾讯影业有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N100', 'text': '腾讯医疗健康（深圳）有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N101', 'text': '腾讯大地通途（北京）科技有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N102', 'text': '广州菠萝蜜网络科技有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N103', 'text': '腾讯征信有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N104', 'text': '辽宁腾辽科技有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N105', 'text': '深圳市腾讯计算机系统有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N106', 'text': '重庆市腾讯计算机系统有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N107', 'text': '烟台帝思普网络科技有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N108', 'text': '北京有个节目文化传播有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N109', 'text': '腾创未来（深圳）有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N110', 'text': '北京市掌中星天下信息技术有限公司', 'color': '#4ea2f0', 'borderColor': '#6cc0ff', 'data': { 'nodetype': 'ent' }}, { 'id': 'N111', 'text': '集团名称：腾创未来（深圳）有限公司', 'color': '#ec6941', 'borderColor': '#ff875e', 'data': { 'nodetype': 'main' }}], 'lines': [{ 'from': 'N8', 'to': 'N36', 'text': '50%', 'fontColor': '#d2c0a5' }, { 'from': 'N7', 'to': 'N98', 'text': '执行董事;总经理%', 'fontColor': '#d2c0a5' }, { 'from': 'N7', 'to': 'N42', 'text': '54.2857%', 'fontColor': '#d2c0a5' }, { 'from': 'N1', 'to': 'N91', 'text': '100%', 'fontColor': '#d2c0a5' }, { 'from': 'N15', 'to': 'N103', 'text': '51.571415%', 'fontColor': '#d2c0a5' }, { 'from': 'N11', 'to': 'N102', 'text': '60%', 'fontColor': '#d2c0a5' }, { 'from': 'N12', 'to': 'N87', 'text': '董事长兼总经理%', 'fontColor': '#d2c0a5' }, { 'from': 'N9', 'to': 'N30', 'text': '总经理;执行董事%', 'fontColor': '#d2c0a5' }, { 'from': 'N14', 'to': 'N87', 'text': '77.2727%', 'fontColor': '#d2c0a5' }, { 'from': 'N80', 'to': 'N73', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N17', 'to': 'N62', 'text': '50%', 'fontColor': '#d2c0a5' }, { 'from': 'N3', 'to': 'N76', 'text': '经理;执行董事%', 'fontColor': '#d2c0a5' }, { 'from': 'N17', 'to': 'N86', 'text': '60%', 'fontColor': '#d2c0a5' }, { 'from': 'N15', 'to': 'N63', 'text': '54.2857%', 'fontColor': '#d2c0a5' }, { 'from': 'N7', 'to': 'N74', 'text': '董事长;总经理%', 'fontColor': '#d2c0a5' }, { 'from': 'N7', 'to': 'N31', 'text': '54.2857%', 'fontColor': '#d2c0a5' }, { 'from': 'N1', 'to': 'N93', 'text': '执行董事;经理%', 'fontColor': '#d2c0a5' }, { 'from': 'N14', 'to': 'N57', 'text': '100%', 'fontColor': '#d2c0a5' }, { 'from': 'N9', 'to': 'N30', 'text': '50%', 'fontColor': '#d2c0a5' }, { 'from': 'N53', 'to': 'N94', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N105', 'to': 'N85', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N7', 'to': 'N66', 'text': '54.2857%', 'fontColor': '#d2c0a5' }, { 'from': 'N66', 'to': 'N107', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N67', 'to': 'N35', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N47', 'to': 'N40', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N66', 'to': 'N95', 'text': '80%', 'fontColor': '#ed724d' }, { 'from': 'N7', 'to': 'N107', 'text': '54.2857%', 'fontColor': '#d2c0a5' }, { 'from': 'N80', 'to': 'N69', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N33', 'to': 'N28', 'text': '99%', 'fontColor': '#ed724d' }, { 'from': 'N105', 'to': 'N32', 'text': '29%', 'fontColor': '#ed724d' }, { 'from': 'N66', 'to': 'N71', 'text': '65.79%', 'fontColor': '#ed724d' }, { 'from': 'N54', 'to': 'N31', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N59', 'to': 'N48', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N14', 'to': 'N23', 'text': '77.2727%', 'fontColor': '#d2c0a5' }, { 'from': 'N38', 'to': 'N18', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N14', 'to': 'N22', 'text': '100%', 'fontColor': '#d2c0a5' }, { 'from': 'N74', 'to': 'N88', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N66', 'to': 'N54', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N66', 'to': 'N110', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N66', 'to': 'N103', 'text': '5%', 'fontColor': '#ed724d' }, { 'from': 'N17', 'to': 'N78', 'text': '董事兼总经理%', 'fontColor': '#d2c0a5' }, { 'from': 'N7', 'to': 'N89', 'text': '100%', 'fontColor': '#d2c0a5' }, { 'from': 'N14', 'to': 'N73', 'text': '100%', 'fontColor': '#d2c0a5' }, { 'from': 'N15', 'to': 'N85', 'text': '54.2857%', 'fontColor': '#d2c0a5' }, { 'from': 'N3', 'to': 'N62', 'text': '50%', 'fontColor': '#d2c0a5' }, { 'from': 'N6', 'to': 'N61', 'text': '执行董事%', 'fontColor': '#d2c0a5' }, { 'from': 'N4', 'to': 'N78', 'text': '董事长%', 'fontColor': '#d2c0a5' }, { 'from': 'N8', 'to': 'N20', 'text': '50%', 'fontColor': '#d2c0a5' }, { 'from': 'N15', 'to': 'N33', 'text': '51.571415%', 'fontColor': '#d2c0a5' }, { 'from': 'N3', 'to': 'N51', 'text': '执行董事兼总经理%', 'fontColor': '#d2c0a5' }, { 'from': 'N7', 'to': 'N54', 'text': '54.2857%', 'fontColor': '#d2c0a5' }, { 'from': 'N14', 'to': 'N34', 'text': '100%', 'fontColor': '#d2c0a5' }, { 'from': 'N4', 'to': 'N20', 'text': '执行董事兼总经理%', 'fontColor': '#d2c0a5' }, { 'from': 'N7', 'to': 'N43', 'text': '董事长%', 'fontColor': '#d2c0a5' }, { 'from': 'N14', 'to': 'N61', 'text': '100%', 'fontColor': '#d2c0a5' }, { 'from': 'N15', 'to': 'N28', 'text': '51.05570085%', 'fontColor': '#d2c0a5' }, { 'from': 'N87', 'to': 'N23', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N10', 'to': 'N98', 'text': '100%', 'fontColor': '#d2c0a5' }, { 'from': 'N14', 'to': 'N77', 'text': '100%', 'fontColor': '#d2c0a5' }, { 'from': 'N2', 'to': 'N19', 'text': '50%', 'fontColor': '#d2c0a5' }, { 'from': 'N83', 'to': 'N57', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N9', 'to': 'N75', 'text': '50%', 'fontColor': '#d2c0a5' }, { 'from': 'N74', 'to': 'N83', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N105', 'to': 'N37', 'text': '29%', 'fontColor': '#ed724d' }, { 'from': 'N105', 'to': 'N97', 'text': '51%', 'fontColor': '#ed724d' }, { 'from': 'N74', 'to': 'N26', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N2', 'to': 'N42', 'text': '总经理%', 'fontColor': '#d2c0a5' }, { 'from': 'N74', 'to': 'N51', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N105', 'to': 'N72', 'text': '90%', 'fontColor': '#ed724d' }, { 'from': 'N105', 'to': 'N52', 'text': '95%', 'fontColor': '#ed724d' }, { 'from': 'N105', 'to': 'N99', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N66', 'to': 'N52', 'text': '5%', 'fontColor': '#ed724d' }, { 'from': 'N74', 'to': 'N77', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N74', 'to': 'N61', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N66', 'to': 'N93', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N7', 'to': 'N53', 'text': '54.2857%', 'fontColor': '#d2c0a5' }, { 'from': 'N15', 'to': 'N43', 'text': '51.571415%', 'fontColor': '#d2c0a5' }, { 'from': 'N11', 'to': 'N71', 'text': '经理%', 'fontColor': '#d2c0a5' }, { 'from': 'N12', 'to': 'N80', 'text': '董事长兼总经理%', 'fontColor': '#d2c0a5' }, { 'from': 'N7', 'to': 'N89', 'text': '总经理;执行董事%', 'fontColor': '#d2c0a5' }, { 'from': 'N12', 'to': 'N92', 'text': '100%', 'fontColor': '#d2c0a5' }, { 'from': 'N7', 'to': 'N44', 'text': '执行董事;总经理%', 'fontColor': '#d2c0a5' }, { 'from': 'N15', 'to': 'N60', 'text': '53.742843%', 'fontColor': '#d2c0a5' }, { 'from': 'N11', 'to': 'N102', 'text': '执行董事兼总经理%', 'fontColor': '#d2c0a5' }, { 'from': 'N7', 'to': 'N108', 'text': '54.2857%', 'fontColor': '#d2c0a5' }, { 'from': 'N14', 'to': 'N46', 'text': '100%', 'fontColor': '#d2c0a5' }, { 'from': 'N12', 'to': 'N75', 'text': '50%', 'fontColor': '#d2c0a5' }, { 'from': 'N14', 'to': 'N74', 'text': '100%', 'fontColor': '#d2c0a5' }, { 'from': 'N105', 'to': 'N43', 'text': '95%', 'fontColor': '#ed724d' }, { 'from': 'N9', 'to': 'N37', 'text': '执行董事;总经理%', 'fontColor': '#d2c0a5' }, { 'from': 'N105', 'to': 'N27', 'text': '51%', 'fontColor': '#ed724d' }, { 'from': 'N15', 'to': 'N35', 'text': '51.571415%', 'fontColor': '#d2c0a5' }, { 'from': 'N105', 'to': 'N38', 'text': '51%', 'fontColor': '#ed724d' }, { 'from': 'N15', 'to': 'N59', 'text': '54.2857%', 'fontColor': '#d2c0a5' }, { 'from': 'N9', 'to': 'N26', 'text': '总经理;执行董事%', 'fontColor': '#d2c0a5' }, { 'from': 'N66', 'to': 'N37', 'text': '71%', 'fontColor': '#ed724d' }, { 'from': 'N105', 'to': 'N68', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N4', 'to': 'N78', 'text': '50%', 'fontColor': '#d2c0a5' }, { 'from': 'N66', 'to': 'N32', 'text': '71%', 'fontColor': '#ed724d' }, { 'from': 'N105', 'to': 'N76', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N66', 'to': 'N67', 'text': '5%', 'fontColor': '#ed724d' }, { 'from': 'N15', 'to': 'N24', 'text': '51.571415%', 'fontColor': '#d2c0a5' }, { 'from': 'N105', 'to': 'N67', 'text': '95%', 'fontColor': '#ed724d' }, { 'from': 'N20', 'to': 'N36', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N15', 'to': 'N21', 'text': '54.2857%', 'fontColor': '#d2c0a5' }, { 'from': 'N74', 'to': 'N46', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N4', 'to': 'N20', 'text': '50%', 'fontColor': '#d2c0a5' }, { 'from': 'N108', 'to': 'N55', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N76', 'to': 'N79', 'text': '51%', 'fontColor': '#ed724d' }, { 'from': 'N110', 'to': 'N42', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N105', 'to': 'N63', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N74', 'to': 'N22', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N32', 'to': 'N70', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N74', 'to': 'N96', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N7', 'to': 'N109', 'text': '总经理;执行董事%', 'fontColor': '#d2c0a5' }, { 'from': 'N15', 'to': 'N40', 'text': '51.571415%', 'fontColor': '#d2c0a5' }, { 'from': 'N4', 'to': 'N36', 'text': '50%', 'fontColor': '#d2c0a5' }, { 'from': 'N10', 'to': 'N109', 'text': '100%', 'fontColor': '#d2c0a5' }, { 'from': 'N7', 'to': 'N55', 'text': '54.2857%', 'fontColor': '#d2c0a5' }, { 'from': 'N7', 'to': 'N94', 'text': '54.2857%', 'fontColor': '#d2c0a5' }, { 'from': 'N14', 'to': 'N82', 'text': '100%', 'fontColor': '#d2c0a5' }, { 'from': 'N15', 'to': 'N52', 'text': '51.571415%', 'fontColor': '#d2c0a5' }, { 'from': 'N15', 'to': 'N105', 'text': '54.2857%', 'fontColor': '#d2c0a5' }, { 'from': 'N7', 'to': 'N93', 'text': '54.2857%', 'fontColor': '#d2c0a5' }, { 'from': 'N97', 'to': 'N56', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N32', 'to': 'N49', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N105', 'to': 'N50', 'text': '51%', 'fontColor': '#ed724d' }, { 'from': 'N105', 'to': 'N100', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N33', 'to': 'N90', 'text': '50%', 'fontColor': '#ed724d' }, { 'from': 'N66', 'to': 'N106', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N15', 'to': 'N81', 'text': '54.2857%', 'fontColor': '#d2c0a5' }, { 'from': 'N105', 'to': 'N33', 'text': '95%', 'fontColor': '#ed724d' }, { 'from': 'N15', 'to': 'N99', 'text': '54.2857%', 'fontColor': '#d2c0a5' }, { 'from': 'N14', 'to': 'N26', 'text': '100%', 'fontColor': '#d2c0a5' }, { 'from': 'N14', 'to': 'N69', 'text': '100%', 'fontColor': '#d2c0a5' }, { 'from': 'N105', 'to': 'N59', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N13', 'to': 'N19', 'text': '50%', 'fontColor': '#d2c0a5' }, { 'from': 'N15', 'to': 'N47', 'text': '51.571415%', 'fontColor': '#d2c0a5' }, { 'from': 'N5', 'to': 'N44', 'text': '100%', 'fontColor': '#d2c0a5' }, { 'from': 'N15', 'to': 'N58', 'text': '51.571415%', 'fontColor': '#d2c0a5' }, { 'from': 'N105', 'to': 'N81', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N6', 'to': 'N25', 'text': '总经理;执行董事%', 'fontColor': '#d2c0a5' }, { 'from': 'N15', 'to': 'N67', 'text': '51.571415%', 'fontColor': '#d2c0a5' }, { 'from': 'N66', 'to': 'N33', 'text': '5%', 'fontColor': '#ed724d' }, { 'from': 'N14', 'to': 'N45', 'text': '100%', 'fontColor': '#d2c0a5' }, { 'from': 'N14', 'to': 'N88', 'text': '100%', 'fontColor': '#d2c0a5' }, { 'from': 'N15', 'to': 'N100', 'text': '54.2857%', 'fontColor': '#d2c0a5' }, { 'from': 'N66', 'to': 'N47', 'text': '5%', 'fontColor': '#ed724d' }, { 'from': 'N47', 'to': 'N24', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N16', 'to': 'N30', 'text': '50%', 'fontColor': '#d2c0a5' }, { 'from': 'N59', 'to': 'N21', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N15', 'to': 'N101', 'text': '54.2857%', 'fontColor': '#d2c0a5' }, { 'from': 'N105', 'to': 'N101', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N51', 'to': 'N45', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N97', 'to': 'N39', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N1', 'to': 'N91', 'text': '执行董事;经理%', 'fontColor': '#d2c0a5' }, { 'from': 'N14', 'to': 'N83', 'text': '100%', 'fontColor': '#d2c0a5' }, { 'from': 'N15', 'to': 'N76', 'text': '54.2857%', 'fontColor': '#d2c0a5' }, { 'from': 'N7', 'to': 'N103', 'text': '执行董事%', 'fontColor': '#d2c0a5' }, { 'from': 'N15', 'to': 'N64', 'text': '51.571415%', 'fontColor': '#d2c0a5' }, { 'from': 'N15', 'to': 'N48', 'text': '54.2857%', 'fontColor': '#d2c0a5' }, { 'from': 'N12', 'to': 'N92', 'text': '执行董事;总经理%', 'fontColor': '#d2c0a5' }, { 'from': 'N85', 'to': 'N95', 'text': '20%', 'fontColor': '#ed724d' }, { 'from': 'N47', 'to': 'N58', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N7', 'to': 'N106', 'text': '54.2857%', 'fontColor': '#d2c0a5' }, { 'from': 'N12', 'to': 'N29', 'text': '50%', 'fontColor': '#d2c0a5' }, { 'from': 'N14', 'to': 'N51', 'text': '100%', 'fontColor': '#d2c0a5' }, { 'from': 'N15', 'to': 'N68', 'text': '54.2857%', 'fontColor': '#d2c0a5' }, { 'from': 'N14', 'to': 'N96', 'text': '100%', 'fontColor': '#d2c0a5' }, { 'from': 'N29', 'to': 'N75', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N32', 'to': 'N41', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N7', 'to': 'N110', 'text': '54.2857%', 'fontColor': '#d2c0a5' }, { 'from': 'N17', 'to': 'N86', 'text': '执行董事兼总经理%', 'fontColor': '#d2c0a5' }, { 'from': 'N6', 'to': 'N25', 'text': '100%', 'fontColor': '#d2c0a5' }, { 'from': 'N14', 'to': 'N84', 'text': '100%', 'fontColor': '#d2c0a5' }, { 'from': 'N80', 'to': 'N34', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N9', 'to': 'N29', 'text': '50%', 'fontColor': '#d2c0a5' }, { 'from': 'N105', 'to': 'N103', 'text': '95%', 'fontColor': '#ed724d' }, { 'from': 'N66', 'to': 'N53', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N33', 'to': 'N64', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N74', 'to': 'N84', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N14', 'to': 'N80', 'text': '100%', 'fontColor': '#d2c0a5' }, { 'from': 'N66', 'to': 'N108', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N105', 'to': 'N104', 'text': '51%', 'fontColor': '#ed724d' }, { 'from': 'N105', 'to': 'N47', 'text': '95%', 'fontColor': '#ed724d' }, { 'from': 'N105', 'to': 'N65', 'text': '51%', 'fontColor': '#ed724d' }, { 'from': 'N74', 'to': 'N82', 'text': '100%', 'fontColor': '#ed724d' }, { 'from': 'N66', 'to': 'N43', 'text': '5%', 'fontColor': '#ed724d' }, { 'from': 'N105', 'to': 'N60', 'text': '99%', 'fontColor': '#ed724d' }, { 'from': 'N111', 'to': 'N105', 'text': 'null%', 'fontColor': '#d2c0a5' }, { 'from': 'N111', 'to': 'N86', 'text': 'null%', 'fontColor': '#d2c0a5' }, { 'from': 'N111', 'to': 'N30', 'text': 'null%', 'fontColor': '#d2c0a5' }, { 'from': 'N111', 'to': 'N74', 'text': 'null%', 'fontColor': '#d2c0a5' }, { 'from': 'N111', 'to': 'N66', 'text': 'null%', 'fontColor': '#d2c0a5' }, { 'from': 'N111', 'to': 'N25', 'text': 'null%', 'fontColor': '#d2c0a5' }, { 'from': 'N111', 'to': 'N78', 'text': 'null%', 'fontColor': '#d2c0a5' }, { 'from': 'N111', 'to': 'N98', 'text': 'null%', 'fontColor': '#d2c0a5' }, { 'from': 'N111', 'to': 'N62', 'text': 'null%', 'fontColor': '#d2c0a5' }, { 'from': 'N111', 'to': 'N29', 'text': 'null%', 'fontColor': '#d2c0a5' }, { 'from': 'N111', 'to': 'N109', 'text': 'null%', 'fontColor': '#d2c0a5' }, { 'from': 'N111', 'to': 'N92', 'text': 'null%', 'fontColor': '#d2c0a5' }, { 'from': 'N111', 'to': 'N44', 'text': 'null%', 'fontColor': '#d2c0a5' }, { 'from': 'N111', 'to': 'N89', 'text': 'null%', 'fontColor': '#d2c0a5' }, { 'from': 'N111', 'to': 'N87', 'text': 'null%', 'fontColor': '#d2c0a5' }, { 'from': 'N111', 'to': 'N20', 'text': 'null%', 'fontColor': '#d2c0a5' }, { 'from': 'N111', 'to': 'N80', 'text': 'null%', 'fontColor': '#d2c0a5' }, { 'from': 'N111', 'to': 'N102', 'text': 'null%', 'fontColor': '#d2c0a5' }, { 'from': 'N111', 'to': 'N19', 'text': 'null%', 'fontColor': '#d2c0a5' }, { 'from': 'N111', 'to': 'N91', 'text': 'null%', 'fontColor': '#d2c0a5' }] };

  /*const graphJsonData: RGJsonData = {
    rootId: 'N3',
    nodes: [
      { id: 'N4', text: '十4' },
      { id: 'N5', text: '十5' },
      { id: 'N6', text: '十6' },
      { id: 'N7', text: '十7' },
      { id: 'N3', text: '十三' },
      { id: 'N9', text: '152****3393' },
    ],
    lines: [
      { from: 'N3', to: 'N9', text: '分享' },
      { from: 'N3', to: 'N4', text: '分享444' },
      { from: 'N3', to: 'N5', text: '分享555' },
      { from: 'N3', to: 'N6', text: '分享666' },
      { from: 'N3', to: 'N7', text: '分享777' },
      { from: 'N9', to: 'N4', text: '分享x' },
    ],
  };*/
  relationGraph$.value.setJsonData(__graph_json_data, () => {
    console.log('relationGraph ready!');
  });
});
</script>