前端-relation-graph实现关系数据展示（关系图/流程图）

目录

前言：

1. relation-graph

2. relation-graph数据关系组件—官方地址relation-graph – A Relationship Graph Componenthttp://www.relation-graph.com/

3. 选择relation-graph的理由

4. 项目中引用relation-graph

4.1 下载命令

4.2 在Vue 2 中使用

4.3 在Vue 3 中使用

4.4 在React中使用

5. 简单的实例代码

6. 参考文献

前言：

        今天公司同事的项目新需求需要实现数据关系展示，我在CSDN上找的了答案，并分享给大家。具体在哪位大佬分享，我会在文章末尾引用标注给出链接。

        话不多说，接下来介绍这个为我们开发人员提供的关系数据组件。

1. relation-graph

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

2. relation-graph数据关系组件—官方地址

relation-graph – A Relationship Graph Componenthttp://www.relation-graph.com/

3. 选择relation-graph的理由

• 主要是免费、免费、免费
• 支持Vue2、Vue3、React
• 完全自定义，可随意定制样式
• 和ECharts图表同样用的json、对象的格式来自定义配置

4. 项目中引用relation-graph

        4.1 下载命令

## npm 下载

npm install –save relation-graph

## yarn 下载

yarn add relation-graph

        4.2 在Vue 2 中使用

         relation-graph也支持在main.js文件中使用Vue.use(RelationGraph);这样，你就不需要下面这一行代码来引入了。
         或者直接在vue的script中通过import引用

import RelationGraph from 'relation-graph'

        4.3 在Vue 3 中使用

import RelationGraph from 'relation-graph/vue3'

        4.4 在React中使用

import RelationGraph, {RelationGraphInstance} from 'relation-graph/react';

5. 简单的实例代码

## 下载好后直接复制下面代码到你的vue3项目中，先看看运行效果

  
    
      
    
  






  .c-my-node{
    background-position: center center;
    background-size: 100%;
    border:#ff8c00 solid 2px;
    height:80px;
    width:80px;
    border-radius: 40px;
  }
  .c-node-name{
    width:160px;margin-left:-40px;text-align:center;margin-top:85px;
  }

        5.1 运行效果截图

6. 参考文献

下面的链接就是我找的答案的地方，点击下面链接可直接查看

vue插件——relation-graph——实现关系图功能——技能提升_关系图插件-CSDN博客