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

这篇具有很好参考价值的文章主要介绍了vue插件——relation-graph——实现关系图功能——技能提升。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

应用场景

在做组织关系图时,经常会遇到关系图的实现要求,就是要将人与人或者组织与组织或者人与组织之间的关系进行一一展示。已知的就是节点和关系。

需求分析

最近在写后台管理系统时,遇到一个需求,就是要实现关系图:
如下图所示:
vue插件——relation-graph——实现关系图功能——技能提升
在前年写天眼查功能时,我也遇到过这种需求,不过当时不知道可以用插件来实现,因此功能并未完全开发:

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

代码实现

直接上代码:

1.安装

1.1 Npm 方式

npm i relation-graph

1.2 Yarn方式

yarn add relation-graph文章来源地址https://www.toymoban.com/news/detail-515686.html

2.使用

2.1 html部分代码

<template>
  <div>
    <div style="height:calc(100vh - 50px);">
       <RelationGraph ref="seeksRelationGraph" :options="graphOptions" :on-node-click="onNodeClick" :on-line-click="onLineClick" />
    </div>
  </div>
</template>

2.2 script部分代码

 <script>
 import RelationGraph from 'relation-graph';//引入插件
 export default {
   name: 'Demo',
   components: { RelationGraph },//注册插件
   data() {
     return {
     	//设置插件的参数
       graphOptions: {
         allowSwitchLineShape: true,
         allowSwitchJunctionPoint: true,
         defaultJunctionPoint: 'border'
         // 这里可以参考"Graph 图谱"中的参数进行设置:http://relation-graph.com/#/docs/graph
       }
     }
   },
   mounted() {
     this.showSeeksGraph()
   },
   methods: {
     showSeeksGraph() {
     //需要指定 节点参数和连接线的参数
       var __graph_json_data = {
         rootId: 'a',
         nodes: [
            // node配置选项:http://relation-graph.com/#/docs/node
            // node支持通过插槽slot完全自定义,示例:http://relation-graph.com/#/demo/adv-slot
           { 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: [
            // link配置选项:http://relation-graph.com/#/docs/link
           { 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' }
         ]
       }
       this.$refs.seeksRelationGraph.setJsonData(__graph_json_data, (seeksRGGraph) => {
         // Called when the relation-graph is completed 
       })
     },
     onNodeClick(nodeObject, $event) {
       console.log('onNodeClick:', nodeObject)
     },
     onLineClick(linkObject, $event) {
       console.log('onLineClick:', linkObject)
     }
   }
 }
 </script>

3.如果要需要展示鼠标移入后展示节点细节,则可以用下面的方式

3.1 html部分代码

<template>
  <a-spin :spinning="loading">
    <div
      style="height: calc(100vh - 130px); border: 1px solid #ebebeb"
      ref="myPage"
    >
      <RelationGraph
        ref="seeksRelationGraph"
        :options="graphOptions"
        :on-node-click="onNodeClick"
        :on-line-click="onLineClick"
      >
        <div
          slot="node"
          slot-scope="{ node }"
          style="height: 100%"
          @mouseover="showNodeTips(node, $event)"
          @mouseout="hideNodeTips(node, $event)"
        >
          <div
            style="
              border-radius: 50%;
              cursor: pointer;
              word-break: break-all;
              display: flex;
              justify-content: center;
              align-items: center;
              color: #fff;
              height: 100%;
              font-size: 12px;
              overflow: hidden;
            "
          >
            {{
              node.text &&
              node.text
                .replace('https://www.', '')
                .replace('http://www.', '')
                .replace('.com', '')
                .replace('.html', '')
                .split('/').length > 1
                ? node.text
                    .replace('https://www.', '')
                    .replace('http://www.', '')
                    .replace('.com', '')
                    .replace('.html', '')
                    .split('/')[
                    node.text
                      .replace('https://www.', '')
                      .replace('http://www.', '')
                      .replace('.com', '')
                      .replace('.html', '')
                      .split('/').length - 1
                  ]||node.text
                    .replace('https://www.', '')
                    .replace('http://www.', '')
                    .replace('.com', '')
                    .replace('.html', '')
                    .split('/')[
                    node.text
                      .replace('https://www.', '')
                      .replace('http://www.', '')
                      .replace('.com', '')
                      .replace('.html', '')
                      .split('/').length - 2
                  ]
                : node.text
            }}
          </div>
        </div>
        <!-- <div
          slot="bottomPanel"
          style="
            border-top: #efefef solid 1px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            font-size: 18px;
            background-color: #ffffff;
          "
        >
          这里是底部插槽 slot="bottomPanel",可以自定义这里的内容
        </div> -->
      </RelationGraph>
    </div>
    <div
      v-if="isShowNodeTipsPanel"
      :style="{
        left: nodeMenuPanelPosition.x + 'px',
        top: nodeMenuPanelPosition.y + 'px',
      }"
      style="
        z-index: 999;
        padding: 10px;
        background-color: #ffffff;
        border: #eeeeee solid 1px;
        box-shadow: 0px 0px 8px #cccccc;
        position: absolute;
      "
    >
      <div
        style="
          line-height: 25px;
          padding-left: 10px;
          color: #888888;
          font-size: 12px;
        "
      >
        节点名称:{{ currentNode.text }}
      </div>
    </div>
  </a-spin>
</template>

3.2 js部分代码

<script>
import RelationGraph from 'relation-graph';
import { getRelationship } from '@/services/statistics';//我这边的接口地址,需要改成你自己的
export default {
  components: { RelationGraph },
  data() {
    return {
      loading: false,
      data: [],
      activeKey: '',
      src: '',
      isShowCodePanel: false,
      isShowNodeTipsPanel: false,
      nodeMenuPanelPosition: { x: 0, y: 0 },
      currentNode: {},
      graphOptions: {
        allowSwitchLineShape: true,
        allowSwitchJunctionPoint: true,
        layouts: [
          {
            label: '中心',
            layoutName: 'force', //布局方式(tree树状布局/center中心布局/force自动布局)
            layoutClassName: 'seeks-layout-center', //当使用这个布局时,会将此样式添加到图谱上
            defaultJunctionPoint: 'border', //默认的连线与节点接触的方式
            defaultNodeShape: 0, //默认的节点形状,0:圆形;1:矩形
            defaultLineShape: 1, //默认的线条样式(1:直线/2:样式2/3:样式3/4:折线/5:样式5/6:样式6)
            centerOffset_y: 130, //根节点y坐标偏移量(针对项目配置单位为px)
            min_per_width: 150, //节点距离限制:节点之间横向距离最小值
            min_per_height: 180, //节点距离限制:节点之间纵向距离最小值
          },
        ],
        defaultNodeShape: 0, //默认的节点形状,0:圆形;1:矩形
        defaultExpandHolderPosition: 'bottom', //节点展开关闭的按钮位置
        defaultLineShape: 1, //默认的线条样式(1:直线/2:样式2/3:样式3/4:折线/5:样式5/6:样式6)
        defaultJunctionPoint: 'tb', //默认的连线与节点接触的方式(border:边缘/ltrb:上下左右/tb:上下/lr:左右)当布局为树状布局时应使用tb或者lr,这样才会好看
        defaultNodeBorderWidth: 0.2, //节点边框粗细
        defaultcolor: 'rgba(0, 186, 189, 1)', //默认的线条颜色
        defaultNodeColor: 'rgba(0, 206, 209, 1)', //默认的节点背景颜色
        defaultNodeWidth: '80', //节点宽度
        defaultNodeHeight: '80', //节点高度
        defaultFocusRootNode: false, //默认为根节点添加一个被选中的样式
        moveToCenterWhenResize: true, //当图谱的大小发生变化时,是否重新让图谱的内容看起来居中
        // 这里可以参考"Graph 图谱"中的参数进行设置
      },
    };
  },
  activated() {
    this.showSeeksGraph();
  },
  methods: {
    showNodeTips(nodeObject, $event) {
      this.currentNode = nodeObject;
      const _base_position = this.$refs.myPage.getBoundingClientRect();
      this.isShowNodeTipsPanel = true;
      this.nodeMenuPanelPosition.x = $event.clientX - _base_position.x + 10;
      this.nodeMenuPanelPosition.y = $event.clientY - _base_position.y + 10;
    },
    hideNodeTips(nodeObject, $event) {
      this.isShowNodeTipsPanel = false;
    },
    callback(val) {
      this.activeKey = val;
      this.showSeeksGraph();
    },
    //渲染节点和连接线
    showSeeksGraph() {
      getRelationship().then((res) => {
        let nodes = res.node_list || [];
        let links = res.edge_list || [];
        var __graph_json_data = {
          rootId: '0',
          nodes: nodes,
          links: links,
        };
        // 以上数据中的node和link可以参考"Node节点"和"Link关系"中的参数进行配置
        this.$refs.seeksRelationGraph.setJsonData(
          __graph_json_data,
          (graphInstance) => {
            // Called when the relation-graph is completed
            setTimeout(() => {
              graphInstance.stopAutoLayout();
            }, 1000);
          }
        );
      });
    },
    //点击节点触发的函数
    onNodeClick(nodeObject, $event) {
      const allLinks = this.$refs.seeksRelationGraph.getLinks();
      allLinks.forEach((link) => {
        // 还原所有样式
        link.relations.forEach((line) => {
          if (line.data.orignColor) {
            line.color = line.data.orignColor;
          }
          if (line.data.orignFontColor) {
            line.fontColor = line.data.orignColor;
          }
          if (line.data.orignLineWidth) {
            line.lineWidth = line.data.orignLineWidth;
          }
        });
      });
      // 让与{nodeObject}相关的所有连线高亮
      allLinks
        .filter(
          (link) => link.fromNode === nodeObject || link.toNode === nodeObject
        )
        .forEach((link) => {
          link.relations.forEach((line) => {
            line.data.orignColor = line.color;
            line.data.orignFontColor = line.fontColor || line.color;
            line.data.orignLineWidth = line.lineWidth || 1;
            line.color = '#ff0000';
            line.fontColor = '#ff0000';
            line.lineWidth = 3;
          });
        });
      // 有时候更改一些属性后,并不能马上同步到视图,这需要以下方法让视图强制根据数据同步到最新
      this.$refs.seeksRelationGraph.getInstance().dataUpdated();
    },
    //店家连接线触发的函数
    onLineClick(lineObject, $event) {
      console.log('onLineClick:', lineObject);
      // this.$notify({
      //   title: '点击连线:',
      //   type: 'success',
      //   message: '点击了线:' + linkObject.fromNode.text + ' to ' + linkObject.toNode.text
      // });
    },
  },
};
</script>

3.3 css部分代码

<style lang="less" scoped>
.c-my-node2 {
  border: none;
  background-position: center center;
  background-size: 100%;
  height: 74px;
  width: 74px;
  border-radius: 40px;
}
.c-node-name2 {
  width: 160px;
  margin-left: -40px;
  text-align: center;
  margin-top: 85px;
  position: absolute;
}
.c-node-menu-item {
  line-height: 30px;
  padding-left: 10px;
  cursor: pointer;
  color: #444444;
  font-size: 14px;
  border-top: #efefef solid 1px;
}
.c-node-menu-item:hover {
  background-color: rgba(66, 187, 66, 0.2);
}
</style>

到了这里,关于vue插件——relation-graph——实现关系图功能——技能提升的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Relation-Aware Graph Transformer for SQL-to-Text Generation

    SQL2Text 是一项将 SQL 查询映射到相应的自然语言问题的任务。之前的工作将 SQL 表示为稀疏图,并利用 graph-to-sequence 模型来生成问题,其中每个节点只能与 k 跳节点通信。由于无法捕获长期且缺乏特定于 SQL 的关系,这样的模型在适应更复杂的 SQL 查询时将会退化。为了解决这

    2024年01月17日
    浏览(49)
  • 论文阅读《ICDE2023:Relational Message Passing for Fully Inductive Knowledge Graph Completion》

    论文链接 工作简介 在知识图谱补全 (KGC) 中,预测涉及新兴实体和 / 或关系的三元组, 这是在学习 KG 嵌入时看不到的,已成为一个关键挑战。 带有消息传递的子图推理是一个很有前途和流行的解决方案。 最近的一些方法已经取得了很好的性能,但它们 (1) 通常只能预测单独

    2024年02月07日
    浏览(39)
  • 【论文阅读】Relation-Aware Graph Transformer for SQL-to-Text Generation

    SQL2Text 是一项将 SQL 查询映射到相应的自然语言问题的任务。之前的工作将 SQL 表示为稀疏图,并利用 graph-to-sequence 模型来生成问题,其中每个节点只能与 k 跳节点通信。由于无法捕获长期且缺乏特定于 SQL 的关系,这样的模型在适应更复杂的 SQL 查询时将会退化。为了解决这

    2024年02月20日
    浏览(46)
  • 【Vue】使用print.js插件实现打印预览功能,超简单

    目录 一、实现效果  二、实现步骤 【1】安装插件 【2】在需要打印的页面导入 【3】在vue文件中需要打印的部分外层套一层div,给div设置id。作为打印的区域 【4】在打印按钮上添加打印事件 【5】在methods中添加点击事件 三、完整代码   print.js插件,可以打印html、pdf、json数

    2024年02月14日
    浏览(48)
  • vue3插件——vue-web-screen-shot——实现页面截图功能

    最近在看前同事发我的 vue3 框架时,发现他们有个功能是要实现页面截图功能。 最近项目遇到的要求是弹出框上传文件,需要用到页面截图,由于使用的是Vue3的框架于是选择用vue-web-screen-shot组件进行操作。(由于插件是Vue3编写的,所以只适用于Vue3的项目,如果是Vue2的项目,

    2024年02月05日
    浏览(43)
  • vue3实现海康威视根据海康插件进行监控实时预览和回放功能

    因为我的文章已经写过基于vue实现海康web插件进行视频播放开箱即用文章,这个文章是利用 vite+vue3+js 进行编写的,大致内容跟vue2一样,拿过去能直接用。 至于我为什么要用js而不用ts,因为海康提供的三个脚本为js语言的,ts尝试过一次,我道行太浅,没搞明白。 这些代码是

    2024年02月05日
    浏览(90)
  • web前端在vue中通过海康插件嵌入视频,实现实时预览以及视频回放功能

      首先第一步,在海康官网下海康视频插件下载到电脑中海康开放平台    然后新建一个组件,下面我直接把我封装好的组件代码拿出来,重要的地方我在代码中添加了注释   以上是封装的组件,下面是调用的方法   

    2024年02月03日
    浏览(54)
  • vue3 - swiper插件 实现PC端的 视频滑动功能(仿抖音短视频)

     swiper官网 ​​​​​​swiper属性/组件查询 步骤: ① npm install swiper 安装 ② 基础模板:   如图: 属性: direction = \\\" \\\'vertical\\\' \\\" ,滑动方向,vertical 垂直方向。(注:一定要两对引号包裹着,否则不生效,还要给swiper设置实高) modules = \\\"modules\\\" grabCursor=\\\"true\\\" ,鼠标手掌形状

    2024年02月03日
    浏览(81)
  • vue2&vue3 el-table实现整行拖拽排序功能(使用sortablejs插件)

    Vue3组件地址 Vue2组件地址 Vue2基于ElementUi再次封装基础组件文档 vue3+ts基于Element-plus再次封装基础组件文档

    2024年02月08日
    浏览(56)
  • vue2实现海康威视根据海康插件进行监控实时预览和回放功能,全套代码,开箱即用。

     这是一套拿到手就能直接用的根据海康提供的摄像机节点实时预览和回放的全步骤代码,开箱即用。  我的是基于vue2写的,vue3可以看我下一篇文章。 很多人在开发vue项目的时候,不知道怎么去开发视频实时预览和回放功能,然后一直查文档,再去看别人写的项目,就是无

    2023年04月15日
    浏览(72)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包