开源vue关系图谱组件：relation-graph vue实现
2021-11-30 本文已影响0人
爱学习的小仙女早睡早起
用这个关系图谱组件可以非常方便的展示如组织机构图谱、股权架构图谱、集团关系图谱等知识图谱，可提供多种图谱布局，包括树状布局、中心布局、力学布局自动布局等。
用起来简单方便，通过组件自身提供的配置项，可以实现非常复杂的功能，网站中有详细使用方法和在线demo，以及可视化的配置工具。
API/配置说明在：http://relation-graph.com/#/docs
项目地址是：https://github.com/seeksdream/relation-graph
用这个做企业股权架构图非常合适，我比较了很多插件，这个功能最强大。功能非常齐全。
image.png
实际例子
image.png
常规树状图是根节点指向多个子节点。这个图中根节点在最底层，找祖宗节点，并且箭头要指向最底层节点，废了九牛二虎之力终于实现了。
这里主要注意一点，股权数字一般在link里体现，默认股权数字只会展示在连接线靠近箭头处，像我这种需求那么股权数字就会重叠在一起，改布局的源码是不可能改了。
所以换个思路，股权数字和node节点绑在一起，节点node通过slot插槽弄个弄个绝对定位的div来显示股权数字，棒呆！
1，首先，使用npm或者cnpm安装relation-graph：
npm install --save relation-graph
2，在你的vue页面中使用这个组件：
<template>
<div>
<p>箭头从上往下指 控股文字显示在箭头处重叠</p>
<div v-loading="g_loading" style="margin-top:50px;width: calc(100% - 10px);height:calc(100vh - 140px);">
<SeeksRelationGraph ref="seeksRelationGraph" :options="graphOptions" :on-node-expand="onNodeExpand" >
<div slot="node" slot-scope="{node}">
<!-- @click="showNodeMenus(node, $event)" @contextmenu.prevent.stop="showNodeMenus(node, $event)" -->
<div style="height:64px;line-height: 64px;border-radius: 32px;cursor: pointer;" >
<!-- <i style="font-size: 30px;" :class="node.data.myicon" /> -->
{{node.text}}
</div>
<div v-if="!node.data.isRoot" style="color: forestgreen;font-size: 16px;position: absolute;width: 60px;height:25px;line-height: 25px;margin-top:5px;margin-left:8px;text-align: center;background-color: rgba(66,187,66,0.2);">
{{node.data.num}}
</div>
</div>
</SeeksRelationGraph>
</div>
</div>
</template>
<script>
import SeeksRelationGraph from 'relation-graph'
export default {
name: 'SeeksRelationGraphDemo',
components: { SeeksRelationGraph },
data() {
return {
g_loading: true,
demoname: '---',
graphOptions: {
"backgrounImage": "http://ai-mark.cn/images/ai-mark-desc.png",
"backgrounImageNoRepeat": false,
"layouts": [
{
"label": "中心",
"layoutName": "tree",
"layoutClassName": "seeks-layout-center",
"defaultJunctionPoint": "border",
"defaultNodeShape": 0,
"defaultLineShape": 5, // 1直线
"min_per_width": "200",
"max_per_width": "300",
"min_per_height": "150",
"max_per_height": "300",
"centerOffset_x": "0",
"centerOffset_y": "0",
}
],
"defaultLineMarker": { // 箭头样式
"markerWidth": 22,
"markerHeight": 22,
"refX":15,
"refY": 6,
"data": "M2,2 L10,6 L2,10 L6,6 L2,2"
},
"allowShowMiniNameFilter": true,
"allowShowMiniToolBar": true,
"allowSwitchLineShape": true,
"allowSwitchJunctionPoint": true,
"defaultNodeShape": 1,
"defaultNodeWidth": "150",
"defaultNodeHeight": "50",
"defaultLineShape": 4,
"defaultJunctionPoint": "tb",
"defaultShowLineLabel": true,
"disableZoom": false,
"disableDragNode": false,
"defaultExpandHolderPosition": "top",
"defaultNodeBorderWidth": 2,
"defaultNodeColor": "rgba(144, 238, 144, 1)",
"isMoveByParentNode": false,
isHideArrow: false,
},
}
},
created() {
},
mounted() {
this.demoname = this.$route.params.demoname
this.getInitData()
},
methods: {
showNodeMenus(){
},
getInitData(){
var __graph_json_data={
"rootId": "a",
"nodes":[
{
"id": "a",
"text": "a公司",
},
{
"id": "b",
"id2": "b2222",
"text": "b公司",
hasChildren: true,
'data': { 'num': '11%' }
},
{
"id": "c",
"text": "c公司"
},
],
"links": [
{
"from": "b",
"to": "a",
// text: '控股份111',
styleClass: "link-class"
},
{
"from": "c",
"to": "a",
// text: '控股份222'
},
]
}
__graph_json_data={
rootId: '根节点Id',
nodes: [
{ id: '根节点Id', name: '节点-1', data: { isRoot: true }, fixed:true, x:0, y:200 },
{ id: '节点b', name: '节点-b', data: { num: '22%' , hasChildren: true}, fixed:true, },
{ id: '节点c', name: '节点-c', data: { num: '22%' ,hasChildren: true}, fixed:true, },
],
links: [
{ from: '节点b', to: '根节点Id', text: '' },
{ from: '节点c', to: '根节点Id', text: '' },
]
}
// 计算排列第二层级的节点的位置 使根节点在中心 第二层的均匀分布 根据nodes.length
//(nodes.length-index)
if(__graph_json_data.nodes.length==2){
__graph_json_data.nodes[1].fixed=true
__graph_json_data.nodes[1].x=0
}
if(__graph_json_data.nodes.length==3){
__graph_json_data.nodes[1].fixed=true
__graph_json_data.nodes[1].x=-250
__graph_json_data.nodes[2].fixed=true
__graph_json_data.nodes[2].x=250
}
this.setGraphData(__graph_json_data)
},
setGraphData(__graph_json_data) {
// console.log(JSON.stringify(__graph_json_data))
__graph_json_data.nodes.forEach(thisNode => {
if (thisNode.text === '深圳市腾讯计算机系统有限公司') {
thisNode.width = 300
thisNode.height = 100
// thisNode.offset_x = -80
}
// 为节点《这个节点原本是没有子节点的》设置属性expandHolderPosition，使其在没有子节点的情况下也能显示【展开/收缩】按钮，当点击展开时动态加载子节点数据
if (thisNode.data.hasChildren ) {
// thisNode.data = { asyncChild: true, loaded: false, id: thisNode.id }; // 这是一个自定义属性，用来在后续判断如果点击了这个节点，则动态获取数据
thisNode.data.asyncChild = true
thisNode.data.loaded = false
thisNode.expandHolderPosition = "top";
thisNode.expanded = false;
}
})
setTimeout(function() {
this.g_loading = false
this.$refs.seeksRelationGraph.setJsonData(__graph_json_data, (seeksRGGraph) => {
// 这些写上当图谱初始化完成后需要执行的代码
this.$nextTick(()=>{
this.$refs.seeksRelationGraph.focusRootNode()
// this.$refs.seeksRelationGraph.refresh();
})
})
}.bind(this), 1000)
},
onNodeExpand(node, e) { // 模拟动态加载数据
console.log('点击的节点',node)
if (node.data && node.data.asyncChild === true && node.data.loaded === false) {
this.g_loading = true
node.data.loaded = true
setTimeout(function() {
this.g_loading = false
var _new_json_data = {
nodes: [
{ id: node.id + '-child-1', text: node.id + '-的子节点1', data:{hasChildren: true,num:'12%'},},
{ id: node.id + '-child-2', text: node.id + '-的子节点2', data:{num:'92%'}},
// { id: node.id + '-child-3', text: node.id + '-的子节点3'}
],
links: [
{ to: node.id, from: node.id + '-child-1', },
{ to: node.id, from: node.id + '-child-2', },
// { from: node.id, to: node.id + '-child-3', text: '动态子节点'}
]
}
_new_json_data.nodes.forEach(thisNode => {
if (thisNode.data.hasChildren ) {
// thisNode.data = { asyncChild: true, loaded: false, id: thisNode.id }; // 这是一个自定义属性，用来在后续判断如果点击了这个节点，则动态获取数据
thisNode.data.asyncChild = true
thisNode.data.loaded = false
thisNode.expandHolderPosition = "top";
thisNode.expanded = false;
}
})
// 动态追加数据
this.$refs.seeksRelationGraph.appendJsonData(_new_json_data, (seeksRGGraph) => {
// 这些写上当图谱初始化完成后需要执行的代码
this.$nextTick(()=>{
// this.$refs.seeksRelationGraph.refresh();
})
})
}.bind(this), 1000)
return
}
}
}
}
</script>
<style >
/* .is-straight {
& + g {
.c-rg-link-text {
transform: rotate(-90deg) translateY(20px);
}
}
} */
.link-class .c-rg-link-text {
transform: rotate(-90deg) translateY(20px);
}
.c-rg-link-text{
/* transform: rotate(-90deg) ; */
}
</style>
