Relation-graph关系图/流程图，VUE项目基础使用

本文主要是介绍Relation-graph关系图/流程图，VUE项目基础使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、Relation-graph

是支持Vue2、Vue3、React的关系数据展示组件，支持通过【插槽】让使用者使用"普通HTML元素、Vue组件、React组件"来完全自定义图形元素，并提供实用的API接口让使用者轻松构建可交互的图形应用。

二、网站：

RelationGraph：官网网站快速使用
参数配置：参数

三、VUE项目使用

项目中引用relation-graph：
安装：

## npm 下载npm install --save relation-graph## yarn 下载yarn add relation-graph

在Vue 2 中使用
1）relation-graph也支持在main.js文件中使用Vue.use(RelationGraph);
2）或者直接在vue的script中通过import引用

import RelationGraph from 'relation-graph'

四、基础代码示例

<template><div><div>关系图</div><div style="height: calc(100vh - 60px)"><RelationGraphref="graphRef":options="graphOptions":on-node-click="onNodeClick":on-line-click="onLineClick"/></div></div>
</template><script>
import RelationGraph from "relation-graph"; // 引入组件export default {name: "Demo",components: { RelationGraph },data() {return {graphOptions: {defaultJunctionPoint: "border",// 这里可以参考"Graph 图谱"中的参数进行设置 https://www.relation-graph.com/#/docs/graph},};},mounted() {this.showGraph();},methods: {showGraph() {const jsonData = {rootId: "a",nodes: [{ id: "a", text: "A", borderColor: "yellow" },{ id: "b", text: "B", color: "#43a2f1", fontColor: "yellow" },{ id: "c", text: "C", nodeShape: 1, width: 80, height: 60 },{ id: "e", text: "E", nodeShape: 0, width: 150, height: 150 },],lines: [{ from: "a", to: "b", text: "关系1", color: "#43a2f1" },{ from: "a", to: "c", text: "关系2" },{ from: "a", to: "e", text: "关系3" },{ from: "b", to: "e", color: "#67C23A" },],};// 以上数据中的node和link可以参考"Node节点"和"Link关系"中的参数进行配置this.$refs.graphRef.setJsonData(jsonData, (graphInstance) => {// Called when the relation-graph is completedconsole.log("graphInstance", graphInstance);});},onNodeClick(nodeObject, $event) {console.log("onNodeClick:", nodeObject);},onLineClick(lineObject, $event) {console.log("onLineClick:", lineObject);},},
};
</script>