Vue和relation-graph库打造高质量的关系图应用程序

更新时间：2023年09月22日 15:08:39 作者：静Yu

这篇文章主要介绍了Vue和relation-graph库打造高质量的关系图应用程序,在这篇文章中,我们深入探讨了如何使用Vue和relation-graph高效打造关系图,我们详细介绍了数据准备、关系映射、点击事件等关键步骤,需要的朋友可以参考下

产品提需求啦，有一个需求就是实现一个功能：展现各个文件之间的调用关系，通过关系图的形式进行展示出来。之前考虑使用antv x6实现此功能，但是考虑到只是展示的功能，也不需要进行交互，所以放弃使用antv x6，选择了更加简单的relation-graph插件。

先来看一个示例项目：

<template>
  <div>
    <div style="height: calc(100vh - 50px)">
      <RelationGraph
        ref="seeksRelationGraph"
        :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: {
        allowSwitchLineShape: true,
        allowSwitchJunctionPoint: true,
        defaultJunctionPoint: 'border'
        // 这里可以参考"Graph 图谱"中的参数进行设置
      }
    }
  },
  mounted() {
    this.showSeeksGraph()
  },
  methods: {
    showSeeksGraph() {
      const __graph_json_data = {
        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.seeksRelationGraph.setJsonData(__graph_json_data, (seeksRGGraph) => {
        // Called when the relation-graph is completed 
      })
    },
    onNodeClick(nodeObject, $event) {
      console.log('onNodeClick:', nodeObject)
    },
    onLineClick(lineObject, $event) {
      console.log('onLineClick:', lineObject)
    }
  }
}
</script>

运行效果：

这里有一个需要注意的点是，如果你的vue版本低于2.6.12时，图谱会显示异常，图谱加载不完全甚至网页中出现undefined。这时我们只需要将我们的版本升级一下就可以。我选择的是安装版本为2.6.14，升级完vue版本之后，记得要 npm install 重新安装一下依赖，不然会出现 vue-template-compiler 和vue版本不匹配也不能成功运行项目的问题。

npm install vue@2.6.14

接下来进入我们的正题，详细介绍一下开发过程。

1.引入relation-graph

// 注意：relation-graph支持Vue2、Vue3、React, 但引入的包名称都是【relation-graph】
npm install --save relation-graph

插件安装完成之后，需要在我们开发的页面中引入和注册

import SeeksRelationGraph from 'relation-graph'
components: { SeeksRelationGraph },

2.初始化设置

然后就是一些初始化的设置

 <SeeksRelationGraph
        ref="seeksRelationGraph"
        :options="graphOptions"
        :on-node-click="nodeClick"
      />

其中options就是图谱配置，一个对象，里面包含了具体的选项：如果你的需求是单纯的展示关系图，不需要进行节点拖动操作的，可以将拖动禁掉

// 禁用拖拽
        disableDragNode: true,

其中layouts布局设置，

layoutName :布局方式（tree树状布局/center中心布局/force自动布局）
layoutClassName : 当使用这个布局时，会将此样式添加到图谱上,这里就是设置我们自定义的样式
min_per_width :节点距离限制:节点之间横向距离最小值
max_per_width :节点距离限制:节点之间横向距离最大值
min_per_height :节点距离限制:节点之间纵向距离最小值
max_per_height :节点距离限制:节点之间纵向距离最大值节点之间的最小距离建议不要太小了，如果节点内容比较多导致节点比较大，很容易导致节点之间重叠。

        layouts: [
          {
            label: '中心',
            layoutName: 'tree',
            layoutClassName: 'seeks-layout-center',
            defaultNodeShape: 0,
            from: 'left',
            // 通过这4个属性来调整 tree-层级距离&节点距离
            min_per_width: '300',
            max_per_width: '300',
            min_per_height: '40',
            max_per_height: '60',
          },
        ],

除此之外我们还可以为我们的图谱添加工具栏，对应的图谱配置分别为:

allowShowMiniToolBar :是否显示工具栏
allowShowRefreshButton :是否在工具栏中显示【刷新】按钮
allowShowDownloadButton : 是否在工具栏中显示【下载图片】按钮
allowSwitchLineShape :是否在工具栏中显示切换线条形状的按钮
allowSwitchJunctionPoint :是否在工具栏中显示切换连接点位置的按钮

上面列举的都是一些常用的配置和布局设置，除此之外官方还提供了很多其他的配置，详细参考官方文档

3、数据格式

通过设置一个json对象的nodes、lines、rootId来定义图谱中要展示的节点、关系线、根节点

     const __graph_json_data = {
         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' }
         ]
       }

nodes定义的是节点数据，lines定义的是关系线。

node节点

我们可以定义普通的节点，不需要进行样式的设置和定义，官方已经为我们定义好了。

        {
            id: 'N16',
            color: '#4ea2f0',
            text: '123311312'
          },

不过我们可以设置节点id,节点名称text,节点背景颜色color,这里与css有所不同，字体颜色是fontColor,节点形状nodeShape（0圆形，1矩形），除了使用官方自定义的节点之外，我们还可以自定义节点，是通过html的形式进行定义。

          {
            id: 'N15',
            text: this.A.path,
            color: '#4ea2f0',
            width: 100,
            height: 100,
            html: `
            <div class='TIME' @click='nodeClick'>
                  <div>名称：${this.A.name}</div>
                  <div>掘金:${this.A.path}</div>
                  <div>QQ：${this.A.qq}</div>
              </div>
            `
          },

其中A是在data中定义的一个对象

     A: {
        name: '静Yu',
        path: 'https://juejin.cn/user/2225839800062215',
        qq: '789789798',
      },

lines关系线

from和to对应的都是节点的id，除此之外还可以在连接线上添加文字 text ，线条粗细 lineWidth ,线条颜色 color 等等

        links: [
          { from: 'N1', to: 'N15' },
          { from: 'N15', to: 'N16' },
          { from: 'N15', to: 'N17' },
          { from: 'N15', to: 'N18' },
          { from: 'N15', to: 'N19' },
          { from: 'N18', to: 'N20' },
        ],

4.Events事件

官方为我们提供了五种触发事件

on-node-click 点击节点事件
on-node-expand 展开节点事件
on-node-collapse 收缩节点事件
on-line-click 点击线条事件
on-image-download 当点击下载图片按钮时触发

较为常用的就是点击节点和线条触发的事件

  <SeeksRelationGraph
        ref="seeksRelationGraph"
        :options="graphOptions"
        :on-node-click="nodeClick"
   />
   nodeClick(nodeObject) {
      console.log(nodeObject)
   }

参数会返回节点的各种信息供我们使用

5.小结

在这篇文章中，我们深入探讨了如何使用Vue和relation-graph高效打造关系图。我们详细介绍了数据准备、关系映射、点击事件等关键步骤。通过这些技巧和解决方案，我们可以更好地利用Vue和relation-graph库来创建直观且易于维护的关系图。总之，Vue与relation-graph的结合为我们提供了一种强大且灵活的方式，以高效地构建各种复杂的关系图。通过掌握这些秘诀，我们可以更好地利用Vue和relation-graph库，轻松打造出高质量的关系图应用程序，从而更好地满足各种需求。

到此这篇关于Vue和relation-graph库打造高质量的关系图应用程序的文章就介绍到这了,更多相关Vue和relation-graph库内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue实现滑动拼图验证码功能
这篇文章主要介绍了Vue实现滑动拼图验证码功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-09-09
el-tooltip根据条件控制显示的示例代码
这篇文章主要介绍了el-tooltip根据条件控制显示的示例代码,包括列表型和树状图型,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2023-12-12
一篇带你搞懂Vue项目里的权限控制
这篇文章主要为大家介绍了vue项目里的权限控制，文中有详细的代码示例供大家参考，有需要的朋友可以借鉴参考下，希望能够有所帮助
2023-06-06
vue中使用element日历组件的示例代码
这篇文章主要介绍了vue中如何使用element的日历组件，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2021-09-09
vue.js实现含搜索的多种复选框（附源码）
这篇文章主要给大家介绍了利用vue.js实现含搜索的多种复选框的相关资料，文中给出了简单的介绍，但提供了完整的实例源码供大家下载学习，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。
2017-03-03
Vuejs开发环境搭建及热更新【推荐】
Vue.js是目前很火的一个前端框架，采用MVVM模式设计，它是以数据驱动和组件化的思想构建的。本文重点给大家介绍Vuejs开发环境搭建及热更新的相关知识，需要的朋友参考下吧
2018-09-09
解决echarts echarts数据动态更新和dataZoom被重置问题
这篇文章主要介绍了解决echarts echarts数据动态更新和dataZoom被重置问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
vue-cli-service不是内部或外部命令,也不是可运行的程序或批处理文件问题
在Vue项目构建过程中,如果遇到无法识别'vue-cli-service'命令的错误提示,通常是因为没有全局安装vue-cli,解决这个问题的步骤主要包括：首先检查Vue版本,如果未安装则先安装Vue；其次全局安装vue-cli；若在安装过程中遇到cnpm命令找不到的情况
2024-10-10
vue中tinymce的使用实例详解
TinyMCE Vue是TinyMCE官方发布的Vue组件，可以更轻松地在Vue应用程序中使用TinyMCE，这篇文章主要介绍了vue中tinymce的使用,需要的朋友可以参考下
2022-11-11
Vue3中的Refs和Ref详情
这篇文章主要介绍了Vue3中的Refs和Ref，文章围绕Vue3中的Refs和Ref得相关资料应用举例烦人方式展开详细内容,需要的朋友可以参考一下
2021-11-11