当前位置:首页 » 《关注互联网》 » 正文

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

1 人参与  2024年12月01日 16:00  分类 : 《关注互联网》  评论

点击全文阅读


✨ 关于 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', },    ],  }

数据赋值:

graphRef$.value.setJsonData(jsonData)

完成这些之后我们就可以得到一个基本的关系图谱
在这里插入图片描述
在这里插入图片描述

✨ 如何自定义图谱结构以及样式

1.配置界面进行可视化配置
在这里插入图片描述

2.完成之后点击此处,copy 出我们的json对象,替换到我们自定义组件中即可
在这里插入图片描述
3.具有丰富的事件与交互供大家使用
在这里插入图片描述
常用的事件:

node-click 节点点击事件line-click 节点连线点击事件canvas-click 画布点击事件

4.自定义图表动画效果

在这里插入图片描述


点击全文阅读


本文链接:http://zhangshiyu.com/post/195016.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1