一文玩转【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.具有丰富的变乱与交互供大家利用

常用的变乱：

• node-click 节点点击变乱
  
• line-click 节点连线点击变乱
  
• canvas-click 画布点击变乱
  

4.自界说图表动画效果

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