一开始查的是【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'), // 水印地址
// backgrounImageNoR