前端关系图组件 relation-graph 推荐与使用

前言

Relation-Graph 是一个开源的免费关系图谱组件，支持 Vue2、Vue3 和 React 框架。它提供开箱即用的体验，配置简单，文档清晰，并支持通过插槽自定义节点样式。文章详细介绍了在 Vue2、Vue3 和 React 中的安装和使用方法，包含完整的代码示例和运行效果图。该组件具有高度可定制性，支持节点点击事件等交互功能，适用于构建各种关系图谱应用。

官网地址

relation-graph - A Relationship Graph Component

推荐原因

1. 超级容易上手，基本开箱即用
2. 官方文档清晰明了，有在线示例、可自定义配置，配置完可直接复制配置的代码
3. 完全支持 Vue2、Vue3、React 三种框架
4. 关系节点可通过插槽完全自定义定制
5. 免费

使用方法

1. Vue2 使用

1.1 安装 relation-graph

npm install --save relation-graph

1.2 可直接复制到 Vue 文件中运行使用

<template>
  <div>
    <div>
      <RelationGraph ref="graphRef" :options="graphOptions" :on-node-click="onNodeClick" :on-line-click="onLineClick" />
    </div>
  </div>
</template>
<script>
// relation-graph 也支持在 main.js 文件中使用 Vue.use(RelationGraph);这样，你就不需要下面这一行代码来引入了。
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
      })
    },
    onNodeClick(nodeObject, $event) {
      console.log('onNodeClick:', nodeObject)
    },
    onLineClick(lineObject, $event) {
      console.log('onLineClick:', lineObject)
    }
  }
}
</script>

2. Vue3 使用

2.1 安装 relation-graph

npm install --save relation-graph-vue3