ToB企服应用市场:ToB评测及商务社交产业平台

标题: 一文玩转【relation-graph 关系图谱】再也不怕遇到这样的需求 [打印本页]
作者: 羊蹓狼    时间: 2024-9-17 23:07
标题: 一文玩转【relation-graph 关系图谱】再也不怕遇到这样的需求
✨ 关于 relation-graph

relation-graph是支持Vue2、Vue3、React的关系数据展示组件，支持通过【插槽】让利用者利用"普通HTML元素、Vue组件、React组件"来完全自界说图形元素，并提供实用的API接口让利用者轻松构建可交互的图形应用。
官网文档：https://www.relation-graph.com/#/index

✨ 基本利用：（Vue3.0）

第一步：在项目中安装对应的插件
  1. npm install --save relation-graph-vue3
复制代码
第二步：创建对应SFC组件
  1. <template>
  2.   <div>
  3.     <div style="border: #efefef solid 1px; height: calc(100vh - 100px);width: 100%;">
  4.       <relation-graph ref="graphRef$" :options="options" >
  5.                               <template #node="{node}">
  6.                                 <div class="node-item" @click="showNodeTips(node, $event)">
  7.                                         //自定义节点中显示内容
  8.                                         <div class="node-item-info">
  9.                                                 <div class="node-item-info-item">
  10.                                                         <div class="item-label">所属部门：</div>
  11.                                                         <div class="item-value">部门编号+部门名称</div>
  12.                                                 </div>
  13.                                                 <div class="node-item-info-item">
  14.                                                         <div class="item-label">工作电话：</div>
  15.                                                         <div class="item-value">00-1234 1234</div>
  16.                                                 </div>
  17.                                                 <div class="node-item-info-item">
  18.                                                         <div class="item-label">工作邮箱：</div>
  19.                                                         <div class="item-value">Pall.Lin.123@manpowergrc.com</div>
  20.                                                 </div>
  21.                                                 <div class="node-item-info-item">
  22.                                                         <div class="item-label">下属人数：</div>
  23.                                                         <div class="item-value">198人</div>
  24.                                                 </div>
  25.                                         </div>
  26.                                 </div>
  27.                         </template>
  28.                 </relation-graph>
  29.     </div>
  30.   </div>
  31. </template>
  32. <script setup name="RelationGraph">
  33. import RelationGraph from 'relation-graph-vue3'
  34. const options = {
  35.   "backgroundImage": "https://ssl.relation-graph.com/images/relatioon-graph-canvas-bg.png",
  36.   "backgroundImageNoRepeat": true,
  37.   "disableDragNode": true,
  38.   "defaultFocusRootNode": false,
  39.   "disableNodeClickEffect": true,
  40.   "disableLineClickEffect": true,
  41.   "defaultExpandHolderPosition": "bottom",
  42.   "defaultNodeBorderWidth": 1,
  43.   "defaultNodeColor": "#ffffff",
  44.   "defaultNodeBorderColor": "#D8D8D8",
  45.   "defaultNodeFontColor": "#303133",
  46.   "defaultLineColor": "#999",
  47.   "checkedLineColor": null,
  48.   "defaultLineShape": 4,
  49.   "defaultNodeShape": 1,
  50.   "defaultNodeWidth": 340,
  51.   "defaultNodeHeight": 148,
  52.   "defaultJunctionPoint": "tb",
  53.   "layouts": [
  54.     {
  55.       "label": "中心",
  56.       "layoutName": "tree",
  57.       "centerOffset_x": 0,
  58.       "centerOffset_y": 0,
  59.       "distance_coefficient": 1,
  60.       "layoutDirection": "v",
  61.       "from": "top",
  62.       "levelDistance": "",
  63.       "min_per_width": "360",
  64.       "max_per_width": 500,
  65.       "min_per_height": "300",
  66.       "max_per_height": 500
  67.     }
  68.   ]
  69. }
  70. const jsonData = {
  71.     rootId: 'a',
  72.     nodes: [
  73.       { id: 'a', text: 'a', },
  74.       { id: 'b', text: 'b', },
  75.       { id: 'c', text: 'c', },
  76.       { id: 'd', text: 'd', },
  77.       { id: 'e', text: 'e', },
  78.       { id: 'f', text: 'f', },
  79.     ],
  80.     lines: [
  81.       { from: 'a', to: 'b', },
  82.       { from: 'a', to: 'c', },
  83.       { from: 'a', to: 'd', },
  84.       { from: 'a', to: 'e', },
  85.       { from: 'a', to: 'f', },
  86.     ],
  87.   }
  88. //点击当前节点
  89. const showNodeTips = (nodeObject, $event) => {
  90.         isShowNodeTipsPanel.value = true
  91. }
  92. // 点击画布事件
  93. const onCanvasClick = ($event) => {
  94.         isShowNodeTipsPanel.value = false
  95. }
  96. onMounted(()=>{
  97. //初始化画布
  98.         const graphInstance = graphRef.value?.getInstance()
  99.         if (graphInstance) {
  100.                         graphInstance.setOptions(options)
  101.                         graphInstance.setJsonData(jsonData)
  102.                         graphInstance.moveToCenter()
  103.                         graphInstance.zoomToFit()
  104.                 }
  105.         })
复制代码
第三步：自界说设置界面

基本设置json
  1. const options = {
  2.   "backgroundImage": "https://ssl.relation-graph.com/images/relatioon-graph-canvas-bg.png",
  3.   "backgroundImageNoRepeat": true,
  4.   "disableDragNode": true,
  5.   "defaultFocusRootNode": false,
  6.   "disableNodeClickEffect": true,
  7.   "disableLineClickEffect": true,
  8.   "defaultExpandHolderPosition": "bottom",
  9.   "defaultNodeBorderWidth": 1,
  10.   "defaultNodeColor": "#ffffff",
  11.   "defaultNodeBorderColor": "#D8D8D8",
  12.   "defaultNodeFontColor": "#303133",
  13.   "defaultLineColor": "#999",
  14.   "checkedLineColor": null,
  15.   "defaultLineShape": 4,
  16.   "defaultNodeShape": 1,
  17.   "defaultNodeWidth": 340,
  18.   "defaultNodeHeight": 148,
  19.   "defaultJunctionPoint": "tb",
  20.   "layouts": [
  21.     {
  22.       "label": "中心",
  23.       "layoutName": "tree",
  24.       "centerOffset_x": 0,
  25.       "centerOffset_y": 0,
  26.       "distance_coefficient": 1,
  27.       "layoutDirection": "v",
  28.       "from": "top",
  29.       "levelDistance": "",
  30.       "min_per_width": "360",
  31.       "max_per_width": 500,
  32.       "min_per_height": "300",
  33.       "max_per_height": 500
  34.     }
  35.   ]
  36. }
复制代码
数据格式：
  1. const jsonData = {
  2.     rootId: 'a',
  3.     nodes: [
  4.       { id: 'a', text: 'a', },
  5.       { id: 'b', text: 'b', },
  6.       { id: 'c', text: 'c', },
  7.       { id: 'd', text: 'd', },
  8.       { id: 'e', text: 'e', },
  9.       { id: 'f', text: 'f', },
  10.     ],
  11.     lines: [
  12.       { from: 'a', to: 'b', },
  13.       { from: 'a', to: 'c', },
  14.       { from: 'a', to: 'd', },
  15.       { from: 'a', to: 'e', },
  16.       { from: 'a', to: 'f', },
  17.     ],
  18.   }
复制代码
数据赋值：
  1. graphRef$.value.setJsonData(jsonData)
复制代码
完成这些之后我们就可以得到一个基本的关系图谱


✨ 如何自界说图谱布局以及样式

1.设置界面举行可视化设置

2.完成之后点击此处，copy 出我们的json对象，更换到我们自界说组件中即可

3.具有丰富的变乱与交互供大家利用

常用的变乱：
4.自界说图表动画效果


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4