一文玩转【relation-graph 关系图谱】再也不怕遇到这样的需求

✨ 关于 relation-graph

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

✨ 基本使用：（Vue3.0）

第一步：在项目中安装对应的插件

npm install --save relation-graph-vue3

第二步：创建对应SFC组件

<template><div><div style="border: #efefef solid 1px; height: calc(100vh - 100px);width: 100%;"><relation-graph ref="graphRef$" :options="options" ><template #node="{node}"><div class="node-item" @click="showNodeTips(node, $event)">//自定义节点中显示内容<div class="node-item-info"><div class="node-item-info-item"><div class="item-label">所属部门：</div><div class="item-value">部门编号+部门名称</div></div><div class="node-item-info-item"><div class="item-label">工作电话：</div><div class="item-value">00-1234 1234</div></div><div class="node-item-info-item"><div class="item-label">工作邮箱：</div><div class="item-value">Pall.Lin.123@manpowergrc.com</div></div><div class="node-item-info-item"><div class="item-label">下属人数：</div><div class="item-value">198人</div></div></div></div></template></relation-graph></div></div>
</template>
<script setup name="RelationGraph">
import RelationGraph from 'relation-graph-vue3'
const options = {"backgroundImage": "https://ssl.relation-graph.com/images/relatioon-graph-canvas-bg.png","backgroundImageNoRepeat": true,"disableDragNode": true,"defaultFocusRootNode": false,"disableNodeClickEffect": true,"disableLineClickEffect": true,"defaultExpandHolderPosition": "bottom","defaultNodeBorderWidth": 1,"defaultNodeColor": "#ffffff","defaultNodeBorderColor": "#D8D8D8","defaultNodeFontColor": "#303133","defaultLineColor": "#999","checkedLineColor": null,"defaultLineShape": 4,"defaultNodeShape": 1,"defaultNodeWidth": 340,"defaultNodeHeight": 148,"defaultJunctionPoint": "tb","layouts": [{"label": "中心","layoutName": "tree","centerOffset_x": 0,"centerOffset_y": 0,"distance_coefficient": 1,"layoutDirection": "v","from": "top","levelDistance": "","min_per_width": "360","max_per_width": 500,"min_per_height": "300","max_per_height": 500}]
}
const jsonData = {rootId: 'a',nodes: [{ id: 'a', text: 'a', },{ id: 'b', text: 'b', },{ id: 'c', text: 'c', },{ id: 'd', text: 'd', },{ id: 'e', text: 'e', },{ id: 'f', text: 'f', },],lines: [{ from: 'a', to: 'b', },{ from: 'a', to: 'c', },{ from: 'a', to: 'd', },{ from: 'a', to: 'e', },{ from: 'a', to: 'f', },],}
//点击当前节点
const showNodeTips = (nodeObject, $event) => {isShowNodeTipsPanel.value = true
}
// 点击画布事件
const onCanvasClick = ($event) => {isShowNodeTipsPanel.value = false
}
onMounted(()=>{
//初始化画布const graphInstance = graphRef.value?.getInstance()if (graphInstance) {graphInstance.setOptions(options)graphInstance.setJsonData(jsonData)graphInstance.moveToCenter()graphInstance.zoomToFit()}})

第三步：自定义配置界面
在这里插入图片描述
基本配置json

const options = {"backgroundImage": "https://ssl.relation-graph.com/images/relatioon-graph-canvas-bg.png","backgroundImageNoRepeat": true,"disableDragNode": true,"defaultFocusRootNode": false,"disableNodeClickEffect": true,"disableLineClickEffect": true,"defaultExpandHolderPosition": "bottom","defaultNodeBorderWidth": 1,"defaultNodeColor": "#ffffff","defaultNodeBorderColor": "#D8D8D8","defaultNodeFontColor": "#303133","defaultLineColor": "#999","checkedLineColor": null,"defaultLineShape": 4,"defaultNodeShape": 1,"defaultNodeWidth": 340,"defaultNodeHeight": 148,"defaultJunctionPoint": "tb","layouts": [{"label": "中心","layoutName": "tree","centerOffset_x": 0,"centerOffset_y": 0,"distance_coefficient": 1,"layoutDirection": "v","from": "top","levelDistance": "","min_per_width": "360","max_per_width": 500,"min_per_height": "300","max_per_height": 500}]
}

数据格式：

 const jsonData = {rootId: 'a',nodes: [{ id: 'a', text: 'a', },{ id: 'b', text: 'b', },{ id: 'c', text: 'c', },{ id: 'd', text: 'd', },{ id: 'e', text: 'e', },{ id: 'f', text: 'f', },],lines: [{ from: 'a', to: 'b', },{ from: 'a', to: 'c', },{ from: 'a', to: 'd', },{ from: 'a', to: 'e', },{ from: 'a', to: 'f', },],}