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)">
      <RelationGraph
        ref="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 completed
        console.log("graphInstance", graphInstance);
      });
    },
    onNodeClick(nodeObject, $event) {
      console.log("onNodeClick:", nodeObject);
    },
    onLineClick(lineObject, $event) {
      console.log("onLineClick:", lineObject);
    },
  },
};
</script>