relation-graph-zw
v2.0.24TypeScript
relation-graph，Vue 关联关系图谱组件，可以展示如组织机构图谱、股权架构图谱、集团关系图谱等知识图谱，可提供多种图谱布局，包括树状布局、中心布局、力学布局自动布局等。Vue component for relationship graph , which can display knowledge graphs, such as organization graph, equity structure graph, group relationship graph, etc.
0/weekUpdated 2 years agoMITUnpacked: 1.0 MB
Published by seeks
npm install relation-graph-zw
---
relation-graph 当前版本：v2.0.19 (支持Vue2、Vue3、React)
----
2023-02-19 版本v2.0.12起开始支持vue3
2023-02-24 版本v2.0.19起开始支持react
``shell script
`
Vue2使用方法： import RelationGraph from 'relation-graph'
Vue3使用方法： import RelationGraph from 'relation-graph/vue3'
React使用方法： import RelationGraph from 'relation-graph/react'
vue2完整小示例：https://github.com/seeksdream/relation-graph-vue2-demo
vue3完整小示例：https://github.com/seeksdream/relation-graph-vue3-demo
React完整小示例：https://github.com/seeksdream/relation-graph-react-demo
`
2023-02-24 最新版本v2.0.24
新增circle布局，环形布局
2023-02-24 最新版本v2.0.25
将默认选项options.moveToCenterWhenRefresh的默认值修改为true
---
这是一个Vue关系图谱组件，可以展示如组织机构图谱、股权架构图谱、集团关系图谱等知识图谱，可提供多种图谱布局，包括树状布局、中心布局、力学布局自动布局等。
这个项目使用典型的vue编程方式，代码简单易懂。如果需要实现一些自定义的高级功能，你可以直接使用源码作为一个component放到你的项目中去用，轻松、任意的修改。
详细使用方法、配置选项、在线demo，以及可视化的配置工具，可以访问这个网址：
http://relation-graph.com （国内用户，无需科学上网）
https://seeksdream.github.io（For regions outside of China）
---
快速使用：
shell script
`
npm install --save relation-graph
`shell script
`
注意：
relation-graph支持Vue2、Vue3、React, 引入的包名称都是【relation-graph】
但在使用时，根据你的环境，需要引入不同的名称
Vue2使用方法： import RelationGraph from 'relation-graph'
Vue3使用方法： import RelationGraph from 'relation-graph/vue3'
React使用方法： import RelationGraph from 'relation-graph/react'
`
示例代码：
vue
`
//（以下为Vue2示例代码，如果你使用的是Vue3或者React）
// Vue3完整小示例：https://github.com/seeksdream/relation-graph-vue3-demo
// React完整小示例：https://github.com/seeksdream/relation-graph-react-demo
`
vue
``
完整的、可运行的示例项目：
vue2完整小示例：https://github.com/seeksdream/relation-graph-vue2-demo
vue3完整小示例：https://github.com/seeksdream/relation-graph-vue3-demo
React完整小示例：https://github.com/seeksdream/relation-graph-react-demo
上面代码的效果：
!简单示例效果图
!简单示例效果图
!简单示例效果图
!简单示例效果图
!简单示例效果图
!简单示例效果图
!简单示例效果图
!简单示例效果图
!简单示例效果图
!简单示例效果图
!简单示例效果图
!简单示例效果图
!简单示例效果图
!简单示例效果图
更多效果及使用方法：
http://relation-graph.com （国内用户，无需科学上网）
https://seeksdream.github.io（For regions outside of China）
---
v2.x版本重要新特性：
* 修改了线条文字的展示方式，现在线条文字会跟随线条轨迹走
* 新增线条插槽
* 新增画布插槽
这个项目使用典型的vue编程方式，代码简单易懂，如果需要实现一些高级功能，你还可以直接使用源码作为一个component放到你的项目中去用，如果有一些优化或者新特性，欢迎提交pull request。
有问题可以加QQ：3235808353，提bug、提建议、一起交流分享前端开发心得，第一获取新版本发布消息。