关系图实现企业架构图、关系图等（天眼查、企查查等实现企业架构图等）

最编程 2024-07-07 18:02:03

...

企业架构图，关系图等实现

业务需求
- 1、公司想要的效果图
- 2、relation-graph插件自带的dome效果图
- 3、实现效果图
官方文档地址
实现代码
接口返回数据格式（最最最重要点）
动态效果图
全部代码
遗憾
效果优化
- 思路：
- 优化效果图
- 优化代码（效果优化后全部代码）
第二种方法实现（[d3.js实现穿透图](https://blog.****.net/wangjie****/article/details/130488425?spm=1001.2014.3001.5501)）连接线可以展示文字

业务需求

文章篇幅可能过长，注重讲解想要的效果图属性怎么配置，动态请求后端接口数据的渲染，以及点击节点或者节点展开按钮追加数据逻辑。如想直接实现效果图，可直接拉取全部代码标题中的代码，跟后端沟通返回数据格式，更改接口即可，文章最后还有优化代码，会比效果图更加完善，也可自行翻阅。

1、公司想要的效果图

在这里插入图片描述

2、relation-graph插件自带的dome效果图

在这里插入图片描述

3、实现效果图

在这里插入图片描述

官方文档地址

官方文档地址：http://www.relation-graph.com/#/docs/start
初始化关系图时需要配置属性，参考文档api

在这里插入图片描述

实现代码

引入relation-graph

npm install --save relation-graph

建立关系图dom节点（必须拿div包裹，height设置节点高度适配屏幕）

<div class="legalperson">
    <div style="height: calc(100vh - 50px)" v-loading="relationLoading">
      <SeeksRelationGraph
        ref="seeksRelationGraph"
        :options="graphOptions"
        :on-node-click="onNodeClick"
        :on-line-click="onLineClick"
        :on-node-expand="onNodeExpand"
      />
    </div>
  </div>

引入插件，配置关系图属性，初始化根节点(可根据不同项目配置自己想要的属性)

<script>
import SeeksRelationGraph from "relation-graph";   //引入插件
import { query_tree1 } from "@/api/affiliated";   //接口api

export default {
  name: "legalperson",
  components: { SeeksRelationGraph },
  data() {
    return {
      relationLoading: false,
      currentCase: "双向树",
	  //关系图属性配置（重要）
      graphOptions: {
        layouts: [
          {
            label: "中心",
            layoutName: "tree",   //布局方式（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: 1,    //默认的节点形状，0:圆形；1:矩形
        defaultExpandHolderPosition: "bottom",  //节点展开关闭的按钮位置
        defaultLineShape: 4,   //默认的线条样式（1:直线/2:样式2/3:样式3/4:折线/5:样式5/6:样式6）
        defaultJunctionPoint: "tb", //默认的连线与节点接触的方式（border:边缘/ltrb:上下左右/tb:上下/lr:左右）当布局为树状布局时应使用tb或者lr，这样才会好看
        defaultNodeBorderWidth: 0.2, //节点边框粗细
        defaultLineColor: "rgba(0, 186, 189, 1)",    //默认的线条颜色
        defaultNodeColor: "rgba(0, 206, 209, 1)",    //默认的节点背景颜色
        defaultNodeWidth: "130", //节点宽度
        defaultNodeHeight: "80", //节点高度
        defaultFocusRootNode: false,   //默认为根节点添加一个被选中的样式
        moveToCenterWhenResize: false,   //当图谱的大小发生变化时，是否重新让图谱的内容看起来居中
      },
      __graph_json_data: {},   //节点的数据
    };
  },
  mounted() {
    this.showSeeksGraph();
  },
  methods: {
    //初始化节点数据
    showSeeksGraph(query) {
      this.__graph_json_data = {
        rootId: "0",    //根节点唯一id
        nodes: [
          {
            id: "0",
            offset_x: -59,    //根节点位置偏移量
            text: "XXXXXX股份有限公司",  //节点文本
            width: 250,     //根节点宽度
            color: "#0084ff",   //根节点背景色
            fontColor: "#ffffff",   //根节点字体颜色
            childrenLoaded: true,   //配置标识，点击展开节点按钮时判断，不需要重复请求接口（懒加载数据）
          },
          //也可以在此添加静态子节点（展示效果图）
          {
            id: "101",
            text: "节点1",
            expandHolderPosition: "top",    //展开节点的显示位置，查看后续效果图
            expanded: false,
            childrenLoaded: false,   //节点重复展开标识
          },
          {
            id: "102",
            text: "节点2",
            expandHolderPosition: "bottom",
            expanded: false,
            childrenLoaded: false,   //节点重复展开标识
          },
        ],
        links: [
        //根节点上方侧的关系数据，注意关系的方向，是从 节点--->根节点：
          { from: "101", to: "0" },    //上方（从子节点出发到根节点）
          { from: "0", to: "102" },   //下方（从根节点出发到子节点）
        ],
      };
      //将根节点渲染进图谱中
      this.$refs.seeksRelationGraph.setJsonData(this.__graph_json_data,(seeksRGGraph) => {
          this.shareholdersData();
        }
      );
    },
  },
};
</script>

现在所实现的效果图(前端写死的静态节点值)；
动态获取接口数据渲染

可以看到结构树需要的数据里属性必须有自己的要求，所以公司想要实现案例本就没太多的可选性，所以只能希望后端配合自己做返回的数据处理，如果把数据处理都放在前端的话，性能要求可能会有问题，不建议此操作。

重复代码就不多写了，直接写请求接口获取渲染数据的方法，属性配置不变

 mounted() {
    this.showSeeksGraph();
  },
  methods: {
    //加载根节点数据后请求接口
    showSeeksGraph(query) {
      this.__graph_json_data = {
        rootId: "0",
        nodes: [
          {
            id: "0",
            offset_x: -59,
            text: "XXXXXX股份有限公司",
            width: 250,
            color: "#0084ff",
            fontColor: "#ffffff",
            childrenLoaded: false,
          },
          // { id: "102", text: "对外投资", color: '#83D942', expandHolderPosition: 'bottom', expanded: false, childrenLoaded: false, },
          // { id: "101", text: "股东",},
        ],
        links: [
          // { from: "101", to: "0", color: "#6d9bfd", },
        ],
      };
      //setJsonData初始化数据方法
      this.$refs.seeksRelationGraph.setJsonData(this.__graph_json_data,(seeksRGGraph) => {
        this.shareholdersData();
        }
      );
    },
    //加载接口数据
    shareholdersData() {
      let dictionary = {
        parentcodeName: "",
        relatedtypedetail: "101",
      };
      query_tree1(dictionary).then((res) => {
        this.__graph_json_data.nodes = res.data.nodes;
        this.__graph_json_data.links = res.data.links;
        //找到节点appendJsonData方法是追加数据
        this.$refs.seeksRelationGraph.appendJsonData(this.__graph_json_data,(seeksRGGraph) => {}
        );
      });
    },
    //点击展开节点按钮触发
    onNodeExpand(node, e) {
      this.additionalData(node);
    },
    //像图谱中追加数据
    additionalData(info) {
      let dictionary = {
        parentcodeName: info.text,
        parentcode: info.id,
      };
      //判断是否已经动态加载数据了
      if (info.data.childrenLoaded) {
        console.log("这个节点的子节点已经加载过了");
        // this.$refs.seeksRelationGraph.refresh()   //可以看官方文档，此方法可以刷新布局
        return;
      }
      info.data.expanded = true;
      info.data.childrenLoaded = true;
      query_tree1(dictionary)
        .then((res) => {
          this.__graph_json_data.nodes = res.data.nodes;
          this.__graph_json_data.links = res.data.links;
          // this.$refs.seeksRelationGraph.refresh()
          this.$refs.seeksRelationGraph.appendJsonData(this.__graph_json_data,(seeksRGGraph) => {
            }
          );
        })
    },
    onNodeClick() {},
    onLineClick() {},
  },

动态加载数据也简单，就是拿到数据后调用appendJsonData方法，将数据追加进去就行，可以直接用关系图的__graph_json_data数据等于接口返回值。

接口返回数据格式（最最最重要点）

在这里插入图片描述

动态效果图

在这里插入图片描述

全部代码

<template>
  <div class="legalperson">
    <div style="height: calc(100vh - 50px)" v-loading="relationLoading">
      <SeeksRelationGraph
        ref="seeksRelationGraph"
        :options="graphOptions"
        :on-node-click="onNodeClick"
        :on-line-click="onLineClick"
        :on-node-expand="onNodeExpand"
      />
    </div>
  </div>
</template>
<script>
import SeeksRelationGraph from "relation-graph";
import { query_tree1 } from "@/api/affiliated";

export default {
  name: "legalperson",
  components: { SeeksRelationGraph },
  data() {
    return {
      dialogapproval: false,
      relationLoading: false,
      dialogLoading: false,
      currentCase: "双向树",
      isShowCodePanel: false,
      graphOptions: {
        layouts: [
          {
            label: "中心",
            layoutName: "tree",
            layoutClassName: "seeks-layout-center",
            defaultJunctionPoint: "border",
            defaultNodeShape: 0,
            defaultLineShape: 1,
            // min_per_height: "100",
            // centerOffset_x: -300,
            centerOffset_y: 130,
            min_per_width: 150,
            min_per_height: 180,
          },
        ],
        defaultNodeShape: 1,
        defaultExpandHolderPosition: "bottom", //节点展开关闭的按钮位置
        defaultLineShape: 4,
        defaultJunctionPoint: "tb", //
        defaultNodeBorderWidth: 0.2, //节点边框粗细
        defaultLineColor: "rgba(0, 186, 189, 1)",
        defaultNodeColor: "rgba(0, 206, 209, 1)",
        defaultNodeWidth: "130", //节点宽度
        defaultNodeHeight: "80", //节点高度
        defaultFocusRootNode: false,
        moveToCenterWhenResize: false,
      },
      __graph_json_data: {},
    };
  },
  mounted() {
    this.showSeeksGraph();
  },
  methods: {
    //查询中煤法人查询
    showSeeksGraph(query) {
      this.__graph_json_data = {
        rootId: "0",
        nodes: [
          {
            id: "0",
            offset_x: -59,
            text: "XXXXXXX股份有限公司",
            width: 250,
            color: "#0084ff",
            fontColor: "#ffffff",
            childrenLoaded: false,    //节点展开关闭标识
          },
          // { id: "102", text: "对外投资", color: '#83D942', expandHolderPosition: 'bottom', expanded: false, childrenLoaded: false, },
          // { id: "101", text: "股东",},
        ],
        links: [
          // { from: "101", to: "0", color: "#6d9bfd", },
        ],
      };
      this.$refs.seeksRelationGraph.setJsonData(
        this.__graph_json_data,
        (seeksRGGraph) => {
          this.shareholdersData();
        }
      );
    },
    //加载股东数据
    shareholdersData() {
      this.relationLoading = true;
      let dictionary = {
        parentcodeName: "XXXXXX股份有限公司",
        relatedtypedetail: "101",
      };
      query_tree1(dictionary)
        .then((res) => {
          this.__graph_json_data.nodes = res.data.nodes;
          this.__graph_json_data.links = res.data.links;
          this.$refs.seeksRelationGraph.appendJsonData(
            this.__graph_json_data,
            (seeksRGGraph) => {
              this.foreignData();
            }
          );
        })
        .catch(() => {
          this.relationLoading = false;
        });
    },
    //加载对外投资数据
    foreignData() {
      let dictionary = {
        parentcodeName: "XXXXXX股份有限公司",
        relatedtypedetail: "102",
      };
      query_tree1(dictionary)
        .then((res) => {
          this.__graph_json_data.nodes = res.data.nodes;
          this.__graph_json_data.links = res.data.links;
          // this.$refs.seeksRelationGraph.refresh()
          this.$refs.seeksRelationGraph.appendJsonData(
            this.__graph_json_data,
            (seeksRGGraph) => {
              this.relationLoading = false;
            }
          );
        })
        .catch(() => {
          this.relationLoading = false;
        });
    },
    //点击节点触发
    onNodeClick(node, $event) {},
    //点击展开节点按钮触发
    onNodeExpand(node, e) {
      this.additionalData(node);
    },
    //向图谱中追加数据
    additionalData(info) {
      let dictionary = {
        parentcodeName: info.text,
        
						
							上一篇：							
								绘制关系图							
						
						
							下一篇：							
								关系图解工具 - II.下载和安装


															
						
							推荐阅读						
						
														
								
									
										关系图实现企业架构图、关系图等（天眼查、企查查等实现企业架构图等）									
								
							
														
								
									
										纯干货分享 | 研发效能提升——敏捷需求篇-而敏捷需求是提升效能的方式中不可或缺的模块之一。  
云智慧的敏捷教练——Iris Xu近期在公司做了一场分享，主题为「敏捷需求挖掘和组织方法，交付更高业务价值的产品」。Iris具有丰富的团队敏捷转型实施经验，完成了企业多个团队从传统模式到敏捷转型的落地和实施，积淀了很多的经验。  
这次分享主要包含以下2个部分：  

第一部分是用户影响地图  


第二部分是事件驱动的业务分析Event driven business analysis（以下简称EDBA）  

用户影响地图，是一种从业务目标到产品需求映射的需求挖掘和组织的方法。  
在软件开发过程中可能会遇到一些问题，比如大家使用不同的业务语言、技术语言，造成角色间的沟通阻碍，还会导致一些问题，比如需求误解、需求传递错误等；这会直接导致产品的功能需求和要实现的业务目标不是映射关系。  
但在交付期间，研发人员必须要将这些需求实现交付，他们实则并不清楚这些功能需求产生的原因是什么、要解决客户的哪些痛点。研发人员往往只是拿到了解决方案，需要把它实现，但没有和业务侧一起去思考解决方案是否正确，能否真正的帮助客户解决问题。而用户影响地图通常是能够连接业务目标和产品功能的一种手段。  
我们在每次迭代里加入的假设，也就是功能需求。首先把它先实现，再逐步去验证我们每一个小目标是否已经实现，再看下一个目标要是什么。那影响地图就是在这个过程中帮我们不断地去梳理目标和功能之间的关系。  
我们在软件开发中可能存在的一些问题  
针对这些问题，我们如何避免？先简单介绍做敏捷转型的常规思路：  
先做团队级的敏捷，首先把产品、开发、测试人员，还有一些更后端的人员比如交互运维的同学放在一起，组成一个特训团队做交付。这个团队要包含交付过程中所涉及的所有角色。  
 
接着业务敏捷要打通整个业务环节和研发侧的一个交付。上图中可以看到在敏捷中需求是分层管理的，第一层是业务需求，在这个层级是以用户目标和业务目标作为输入进行规划，同时需要去考虑客户的诉求。业务人员通过获取到的业务需求，进一步的和团队一起将其分解为产品需求。所以业务需求其实是我们真正去发布和运营的单元，它可以被独立发布到我们的生产环境上。我们的产品需求其实就是产品的具体功能，它是我们集成和测试的对象，也就是我们最终去部署到系统上的一个基本单元。产品需求再到了我们的开发团队，映射到迭代计划会上要把它分解为相应的技术任务，包括我们平时所说的比如一些前端的开发、后端的开发、测试都是相应的技术任务。所以业务敏捷要达到的目标是需要去持续顺畅高质量的交付业务价值。  
 
将这几个点串起来，形成金字塔结构。最上层我们会把业务目标放在整个金字塔的塔尖。这个业务目标是通过用户的目标以及北极星指标确立的。确认业务目标后再去梳理相应的业务流程，最后生产。另外产品需求包含了操作流程和业务规则，具需求交付时间、工程时间以及我们的一些质量标准的要求。  
 
谈到用户影响的地图，在敏捷江湖上其实有一个传说，大家都有一个说法叫做敏捷需求的“任督二脉”。用户影响地图其实就是任脉，在黑客马拉松上用过的用户故事地图其实叫督脉。所以说用户影响地图是在用户故事地图之前，先帮我们去梳理出我们要做哪些东西。当我们真正识别出我们要实现的业务活动之后，用户故事地图才去梳理我们整个的业务工作流，以及每个工作流节点下所要包含的具体功能和用户故事。所以说用户影响地图需要解决的问题，我们包括以下这些：  
 
首先是范围蔓延，我们在整张地图上，功能和对应的业务目标是要去有一个映射的。这就避免了一些在我们比如有很多干系人参与的会议上，那大家都有不同想法些立场，会提出很多需求（正确以及错误的需求）。这个时候我们会依据目标去看这些需求是否真的是会影响我们的目标。  
这里提到的错误需求，比如是利益相关的人提出的、客户认为产品应该有的、某个产品经理需求分析师认为可以有的....但是这些功能在用户影响地图中匹配不到对应目标的话，就需要降低优先级或弃掉。另外，通常我们去制定解决方案的时候，会考虑较完美的实现，导致解决方案括很多的功能。这个时候关键目标至关重要，会帮助我们梳理筛选、确定优先级。  
看一下用户影响到地图概貌  
 
总共分为一个三层的结构：  

第一层why，你的业务目标哪个是最重要的，为什么？涉及到的角色有哪些？  


第二层how ，怎样产生影响？影响用户角色什么样的行为? （不需要去列出所有的影响，基于业务目标）  


第三层what，最关键的是在梳理需求时不需一次把所有细节想全，这通常团队中经常遇到的问题。  

我们用这个例子来看一下  
 
这是一个客服中心的影响地图，业务目标是 3个月内不增加客服人数的前提下能支持1.5倍的用户数。此业务目标设定是符合 smart 原则的，specific非常的具体，miserable 是可以衡量的，action reoriented是面向活动的， real list 也是很实际的。  
量化的目标会指引我们接下来的行动，梳理一个业务目标，尽量去量化，比如 ：我们通过打造一条什么样的流水线，能够提高整个部署的效率，时间是原来的 1/2 。这样才是一个能量化的有意义的目标。  
回到这幅图， how 层级识别出来的内容，客服角色：想要对它施加的影响，把客户引导到论坛上，帮助客户更容易的跟踪问题，更快速的去定位问题。初级用户：方论坛上找到问题。高级用户：在论坛上回答问题。通过我们这些用户角色，进行活动，完成在不增加客户客服人数的前提下支持更多的用户数量。  
最后一个层级，才是我们日常接触比较多的真正的功能的特性和需求，比如引导到客户到论坛上，其实这个产品就需要有一个常见问题的论坛的链接。这个层次需要我们团队进一步地在交付，在每个迭代之前做进一步的梳理，细化成相应的用户故事。  
 
这个是云智慧团队中，自己做的影响地图的范例，可以看下整个的层级结构。序号表示优先级。  
那我们用户影响地图可以总结为：