Vue3 实现简单的关系图

一开始查的是【relation-graph】插件，开发过程中发现版本不一致，后面找到了【sf-relation】。

https://gitee.com/ghostgeek/vue-relation/#sf-relation

PS：链接里有详细的节点和线条属性介绍，本文只根据需求用了一部分。

1、安装插件：

npm install --save sf-relation

2、在当前页面直接引用：

import 'sf-relation/sf-relation.min.css';

import SeeksRelationGraph from 'sf-relation';

 3、页面开发：

<div style="height:calc(100%);width: calc(100%);">
    <SeeksRelationGraph ref="seeksRelationGraph" :options="graphOptions" :on-node-click="onNodeClick" :on-line-click="onLineClick" />
</div>

4、配置各种属性：

<script setup>
import { ref, reactive } from 'vue'
import 'sf-relation/sf-relation.min.css';
import SeeksRelationGraph from 'sf-relation';


const seeksRelationGraph = ref(null)

const graphOptions = reactive({
    // backgrounImage: require('/xxxx/xxxx/xxxx.png'),  // 水印地址
    // backgrounImageNoRepeat: false,  // 只在右下角显示水印，不重复显示水印
    allowShowMiniView: false,  // 是否显示缩略图(很像游戏的缩略地图)
    allowShowMiniNameFilter: false,  // 是否显示搜索框
    allowShowMiniToolBar: false,  // 是否显示工具栏
    allowSwitchLineShape: true,  // 是否在工具栏中显示切换线条形状的按钮
    allowSwitchJunctionPoint: true,  // 是否在工具栏中显示切换连接点位置的按钮
    allowShowZoomMenu: true,  // 是否在右侧工具栏显示放大缩小的按钮
    allowSwitchJunctionPoint: false,  // 是否在工具栏中显示切换连接点位置的按钮

    disableZoom: true,  // 是否禁用鼠标滚轮的缩放功能，（禁用后只可以通过图谱工具栏按钮进行缩放）
    disableDragNode: false,  // 是否禁用图谱中节点的拖动
    moveToCenterWhenResize: true,  // 当图谱的大小发生变化时，是否重新让图谱的内容看起来居中
    // defaultFocusRootNode: '',  // 默认为根节点添加一个被选中的样式
    // isMoveByParentNode: true,  // 是否在拖动节点后让子节点跟随
    hideNodeContentByZoom: true,  // 是否根据缩放比例隐藏节点内容

    defaultNodeShape: 0,  // 默认的节点形状，0:圆形；1:矩形
    defaultNodeWidth: '180px',  // 默认的节点宽度
    defaultNodeHeight: '180px',  // 默认的节点高度
    // defaultNodeColor: '',  // 默认的节点背景颜色
    // defaultNodeFontColor: '',  // 默认的节点文字颜色
    // defaultNodeBorderWidth: '2px',  // 默认的节点边框粗细（像素）
    // defaultExpandHolderPosition: 'right',  // 默认的节点展开/关闭按钮位置（left/top/right/bottom）
    defaultJunctionPoint: 'border',  // 默认的线与节点接触的方式（border:边缘 / ltrb:上下左右 / tb:上下 / lr:左右）

    // defaultLineColor: '',  // 默认的线条颜色
    // defaultLineWidth: '',  // 默认线条粗细(px)
    // defaultLineShape: '',  // 默认的线条样式（1:直线/2:样式2/3:样式3/4:折线/5:样式5/6:样式6）
    // defaultLineMarker: '',  // 默认的线条箭头样式
    // defaultShowLineLabel: '',  // 默认是否显示连线文字
    // 布局方式
    layouts: [
        {
        layoutLabel: '自动布局',  // 布局描述
        layoutName: 'force',  // 布局方式（tree树状布局/center中心布局/force自动布局）
        layoutClassName: 'seeks-layout-force'  // 当使用这个布局时，会将此样式添加到图谱上
        }
    ]
})

// 绘制函数
function showSeeksGraph(){
    var graphData = {
        //  rootId: '',  //定义根节点
         nodes: [
           { id: 'a', text: 'A', color: '#5e80f6', 
           fontColor: 'yellow' ,borderColor: 'transparent', },
           { id: 'b', text: 'B', color: '#5e80f6', 
           fontColor: 'yellow' ,borderColor: 'transparent'},
           { id: 'c', text: 'C', color: '#5e80f6)', 
           fontColor: 'yellow' ,borderColor: 'transparent'},
           { id: 'd', text: 'D', color: '#909a9d', 
           fontColor: 'yellow' ,borderColor: 'transparent'},
           { id: 'e', text: 'E', color: '#5e80f6', 
           fontColor: 'yellow' ,borderColor: 'transparent'}
         ],
         links: [
            // link配置选项：http://relation-graph.com/#/docs/link
           { from: 'a', to: 'b', text: '关系1', color: '#43a2f1' },
           { from: 'b', to: 'c', text: '关系2' },
           { from: 'c', to: 'd', text: '关系3' },
           { from: 'd', to: 'e', color: '#67C23A' },
           { from: 'e', to: 'a', color: '#67C23A' },
           { from: 'a', to: 'c', text: '关系1', color: '#43a2f1' },
           { from: 'b', to: 'd', text: '关系1', color: '#43a2f1' },
           { from: 'c', to: 'e', text: '关系1', color: '#43a2f1' },
           { from: 'd', to: 'a', text: '关系1', color: '#43a2f1' },
           { from: 'e', to: 'b', text: '关系1', color: '#43a2f1' },
         ]
       }
       seeksRelationGraph.value.setJsonData(graphData, (seeksRGGraph) => {
         console.log('成功', seeksRGGraph);
       })
}

// 点击节点事件
function onNodeClick(node, $event) {
    console.log( node );
}

// 点击连线事件
function onLineClick(line, $event) {
    console.log( line );
}


onMounted(() => {
    showSeeksGraph()
});
</script>

5、节点位置固定：

（1）修改布局方式：

【自动布局】会将节点居中、对称放置，所以不用【force】

layouts: [
  {
     layoutName: 'center',  // 布局方式
]

（2）给节点定位：

//修改节点的配置
nodes: [
  { id: 'a', text: 'A', color: '#5e80f6', 
      fixed: true, x:200, y:100,  //将节点位置定死（必须加fixed:true，坐标x,y才生效)
      fontColor: 'yellow' ,borderColor: 'transparent', },
  { id: 'b', text: 'B', color: '#5e80f6', 
      fixed: true, x:138, y:320,
      fontColor: 'yellow' ,borderColor: 'transparent'},
  { id: 'c', text: 'C', color: '#5e80f6)', 
      fixed: true, x:383, y:30,
      fontColor: 'yellow' ,borderColor: 'transparent'},
  { id: 'd', text: 'D', color: '#909a9d', 
      fixed: true, x:69, y:240,
      fontColor: 'yellow' ,borderColor: 'transparent'},
  { id: 'e', text: 'E', color: '#5e80f6', 
      fixed: true, x:278, y:170,
      fontColor: 'yellow' ,borderColor: 'transparent'}
  ],