一、relation-graph简介
一个Vue的关系图谱组件,使用非常方便
二、使用步骤
引入relation-graph
npm install --save relation-graph
三、参数配置
1.Graph 图谱
配置图谱的一些默认样式,工具栏等
代码如下(示例):
graphOptions: {
// debug: true,
// 禁用拖拽
disableDragNode: true,
// backgrounImage: 'http://ai-mark.cn/images/ai-mark-desc.png',
backgrounImageNoRepeat: true,
layouts: [
{
label: '中心',
layoutName: 'tree',
layoutClassName: 'seeks-layout-center',
defaultJunctionPoint: 'border',
defaultNodeShape: 0,
defaultLineShape: 1,
from: 'left',
// 通过这4个属性来调整 tree-层级距离&节点距离
min_per_width: '200',
max_per_width: '500',
// min_per_height: '40',
// max_per_height: '60',
// 如果此选项有值,则优先级高于上面那4个选项
levelDistance: '',
},
],
// 箭头样式
defaultLineMarker: {
markerWidth: '0',
markerHeight: '0',
refX: '0',
refY: '0',
},
defaultExpandHolderPosition: 'right',
defaultNodeShape: 1,
defaultNodeWidth: '100', // 节点宽度
defaultLineShape: 4, //线条样式
defaultJunctionPoint: 'lr',
defaultNodeBorderWidth: 0,
defaultLineColor: 'rgba(0, 186, 189, 1)',
defaultNodeColor: 'rgba(0, 206, 209, 1)',
},
2.Node 节点
nodes: [
{ id: 'N1', text: '深圳市腾讯计算机系统有限公司', color: '#2E4E8F' },
{ id: 'N15', text: '腾讯影业文化传播有限公司', color: '#4ea2f0' },
{
id: 'N16',
color: '#4ea2f0',
html: `<div class="A">
<div class="A-1">${this.A.title}</div>
<div class="A-2">${this.A.name}</div>
</div>
<div class="TIME">
<div>${this.A.date}</div>
<div>${this.A.date2}</div>
</div>`,
},
{
id: 'N17',
text: '苍穹互娱(天津)文化传播有限公司',
color: '#4ea2f0',
},
{ id: 'N18', text: '北京腾讯影业有限公司', color: '#4ea2f0' },
{ id: 'N19', text: '霍尔果斯腾影影视发行有限公司', color: '#4ea2f0' },
],
3.Link 关系
links是指节点之间的关系(link),图谱会根据这些关系来生成线条(Line)
links: [
{ from: 'N1', to: 'N15' },
{ from: 'N15', to: 'N16' },
{ from: 'N15', to: 'N17' },
{ from: 'N15', to: 'N18' },
{ from: 'N15', to: 'N19' },
],
总结
先上图
文章来源:https://www.toymoban.com/news/detail-580360.html
2、主要代码文章来源地址https://www.toymoban.com/news/detail-580360.html
<template>
<div>
<div v-loading="g_loading" style="width: calc(100% - 10px);height:100vh;">
<SeeksRelationGraph ref="seeksRelationGraph" :options="graphOptions" />
</div>
</div>
</template>
<script>
import SeeksRelationGraph from 'relation-graph';
export default {
name: 'SeeksRelationGraphDemo',
components: { SeeksRelationGraph },
data() {
return {
g_loading: true,
demoname: '---',
graphOptions: {
// debug: true,
// 禁用拖拽
disableDragNode: true,
// backgrounImage: 'http://ai-mark.cn/images/ai-mark-desc.png',
backgrounImageNoRepeat: true,
layouts: [
{
label: '中心',
layoutName: 'tree',
layoutClassName: 'seeks-layout-center',
defaultJunctionPoint: 'border',
defaultNodeShape: 0,
defaultLineShape: 1,
from: 'left',
// 通过这4个属性来调整 tree-层级距离&节点距离
min_per_width: '200',
max_per_width: '500',
// min_per_height: '40',
// max_per_height: '60',
// 如果此选项有值,则优先级高于上面那4个选项
levelDistance: '',
},
],
// 箭头样式
defaultLineMarker: {
markerWidth: '0',
markerHeight: '0',
refX: '0',
refY: '0',
},
defaultExpandHolderPosition: 'right',
defaultNodeShape: 1,
defaultNodeWidth: '100', // 节点宽度
defaultLineShape: 4, //线条样式
defaultJunctionPoint: 'lr',
defaultNodeBorderWidth: 0,
defaultLineColor: 'rgba(0, 186, 189, 1)',
defaultNodeColor: 'rgba(0, 206, 209, 1)',
},
A: {
name: '文化传播有限公司',
title: '霍尔果斯晓腾影业',
date: '2022-10-12',
date2: '11:39',
},
};
},
mounted() {
this.setGraphData();
},
methods: {
setGraphData() {
var __graph_json_data = {
rootId: 'N1',
nodes: [
{ id: 'N1', text: '深圳市腾讯计算机系统有限公司', color: '#2E4E8F' },
{ id: 'N15', text: '腾讯影业文化传播有限公司', color: '#4ea2f0' },
{
id: 'N16',
color: '#4ea2f0',
html: `<div class="A">
<div class="A-1">${this.A.title}</div>
<div class="A-2">${this.A.name}</div>
</div>
<div class="TIME">
<div>${this.A.date}</div>
<div>${this.A.date2}</div>
</div>`,
},
{
id: 'N17',
text: '苍穹互娱(天津)文化传播有限公司',
color: '#4ea2f0',
},
{ id: 'N18', text: '北京腾讯影业有限公司', color: '#4ea2f0' },
{ id: 'N19', text: '霍尔果斯腾影影视发行有限公司', color: '#4ea2f0' },
],
links: [
{ from: 'N1', to: 'N15' },
{ from: 'N15', to: 'N16' },
{ from: 'N15', to: 'N17' },
{ from: 'N15', to: 'N18' },
{ from: 'N15', to: 'N19' },
],
};
this.g_loading = false;
this.$refs.seeksRelationGraph.setJsonData(
__graph_json_data,
(seeksRGGraph) => {
// 这些写上当图谱初始化完成后需要执行的代码
}
);
},
},
};
</script>
<style lang="scss">
.TIME {
font-size: 12px;
color: red;
display: flex;
justify-content: space-around;
}
.A {
border: 1px solid #ccc;
.A-1 {
border-bottom: 1px solid #ccc;
padding: 5px;
}
.A-2 {
padding: 5px;
background-color: aqua;
}
}
</style>
到了这里,关于relation-graph一个vue关系图谱组件的使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!