一文玩转【relation-graph 关系图谱】再也不怕遇到这样的需求
✨ 关于 relation-graphrelation-graph是支持Vue2、Vue3、React的关系数据展示组件，支持通过【插槽】让利用者利用"普通HTML元素、Vue组件、React组件"来完全自界说图形元素，并提供实用的API接口让利用者轻松构建可交互的图形应用。
官网文档：https://www.relation-graph.com/#/index
https://i-blog.csdnimg.cn/direct/0d2a72c738e34c6a9f1dc712e33da188.png
✨ 基本利用：（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()
}
})
第三步：自界说设置界面
https://i-blog.csdnimg.cn/direct/b1b0933ca3fe49c88586fa2e591f5aad.png
基本设置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', },
],
}
数据赋值：
graphRef$.value.setJsonData(jsonData)
完成这些之后我们就可以得到一个基本的关系图谱
https://i-blog.csdnimg.cn/direct/e935bd27ac9f41f5a176c5a30f3f254b.png
https://i-blog.csdnimg.cn/direct/13cc81b7890145878250b61c8e871585.png
✨ 如何自界说图谱布局以及样式
1.设置界面举行可视化设置
https://i-blog.csdnimg.cn/direct/4642b199b86241979e8df2db11d33540.png
2.完成之后点击此处，copy 出我们的json对象，更换到我们自界说组件中即可
https://i-blog.csdnimg.cn/direct/5210eb67fcd8434e978cc3d38e6f9013.png
3.具有丰富的变乱与交互供大家利用
https://i-blog.csdnimg.cn/direct/eb1ef5a756154c1e88c9298b1393ed59.png
常用的变乱：
[*]node-click 节点点击变乱
[*]line-click 节点连线点击变乱
[*]canvas-click 画布点击变乱
4.自界说图表动画效果
https://i-blog.csdnimg.cn/direct/590276cf6b7c4315bfe4cc8b65a61cc6.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]