目录
前言:
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博客