vue+relation-graph绘制关系图实用组件操作方法
作者：-耿瑞-
这篇文章主要介绍了vue+relation-graph绘制关系图实用组件操作方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
先在终端执行命令
vue create relationgraph
创建一个vue2的项目
然后在编辑器中打开新创建的项目在终端中执行命令
npm install relation-graph --save
引入依赖
这样 我们relation-graph就进来了
然后 我们在需要使用的组件中编写代码如下
<template>
<div>
<div 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 {
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)',
}
};
},
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">高级测试管理方案</div>
<div class="A-2">映射工具</div>
</div>`,
},
{
id: 'N17',
text: '微化文案管理',
color: '#4ea2f0',
},
{ id: 'N18', 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.$refs.seeksRelationGraph.setJsonData(
__graph_json_data,
(seeksRGGraph) => {
console.log(seeksRGGraph);
}
);
},
},
};
</script>
<style>
</style>这里 首先 大家要缕清关系 我们每个节点都带有id 例如N1 N15然后 我们设置根节点的id是N1links梳理了元素之前的关系N15 插入在N1 下 剩下的 N16 N17 N18 N19则插入在N15下然后 我们可以通过{ id: ‘唯一标识’, text: ‘内容文本’, color: ‘颜色代码’ }也可以通过{ id: ‘唯一标识’, html: ‘页面结构字符串’, color: ‘颜色代码’ }来完成最后 我们运行出来的效果是这样的
右边的操作了也都是可以用的 我们可以进行放大 缩小 甚至下载到本地
到此这篇关于vue+relation-graph绘制关系图实用组件的文章就介绍到这了,更多相关vue relation graph关系图组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！