美文网首页
开源vue关系图谱组件:relation-graph vue实现

开源vue关系图谱组件:relation-graph vue实现

作者: 爱学习的小仙女早睡早起 | 来源:发表于2021-11-30 18:09 被阅读0次

    用这个关系图谱组件可以非常方便的展示如组织机构图谱、股权架构图谱、集团关系图谱等知识图谱,可提供多种图谱布局,包括树状布局、中心布局、力学布局自动布局等。

    用起来简单方便,通过组件自身提供的配置项,可以实现非常复杂的功能,网站中有详细使用方法和在线demo,以及可视化的配置工具。

    API/配置说明在:http://relation-graph.com/#/docs
    项目地址是:https://github.com/seeksdream/relation-graph

    用这个做企业股权架构图非常合适,我比较了很多插件,这个功能最强大。功能非常齐全。

    image.png

    实际例子


    image.png

    常规树状图是根节点指向多个子节点。这个图中根节点在最底层,找祖宗节点,并且箭头要指向最底层节点,废了九牛二虎之力终于实现了。

    这里主要注意一点,股权数字一般在link里体现,默认股权数字只会展示在连接线靠近箭头处,像我这种需求那么股权数字就会重叠在一起,改布局的源码是不可能改了。

    所以换个思路,股权数字和node节点绑在一起,节点node通过slot插槽弄个弄个绝对定位的div来显示股权数字,棒呆!

    1,首先,使用npm或者cnpm安装relation-graph:

    npm install --save relation-graph
    

    2,在你的vue页面中使用这个组件:

    <template>
      <div>
        <p>箭头从上往下指   控股文字显示在箭头处重叠</p>
        <div v-loading="g_loading" style="margin-top:50px;width: calc(100% - 10px);height:calc(100vh - 140px);">
          <SeeksRelationGraph ref="seeksRelationGraph" :options="graphOptions" :on-node-expand="onNodeExpand" >
          <div slot="node" slot-scope="{node}">
            <!-- @click="showNodeMenus(node, $event)" @contextmenu.prevent.stop="showNodeMenus(node, $event)" -->
              <div style="height:64px;line-height: 64px;border-radius: 32px;cursor: pointer;" >
                <!-- <i style="font-size: 30px;" :class="node.data.myicon" /> -->
                {{node.text}}
              </div>
              <div v-if="!node.data.isRoot" style="color: forestgreen;font-size: 16px;position: absolute;width: 60px;height:25px;line-height: 25px;margin-top:5px;margin-left:8px;text-align: center;background-color: rgba(66,187,66,0.2);">
                {{node.data.num}}
              </div>
            </div>
          </SeeksRelationGraph>
    
        </div>
      </div>
    </template>
    
    <script>
    import SeeksRelationGraph from 'relation-graph'
    export default {
      name: 'SeeksRelationGraphDemo',
      components: { SeeksRelationGraph },
      data() {
        return {
          g_loading: true,
          demoname: '---',
          graphOptions: {
            "backgrounImage": "http://ai-mark.cn/images/ai-mark-desc.png",
            "backgrounImageNoRepeat": false,
            "layouts": [
              {
                "label": "中心",
                "layoutName": "tree",
                "layoutClassName": "seeks-layout-center",
                "defaultJunctionPoint": "border",
                "defaultNodeShape": 0,
                "defaultLineShape": 5,  // 1直线
                "min_per_width": "200",
                "max_per_width": "300",
                "min_per_height": "150",
                "max_per_height": "300",
                "centerOffset_x": "0",
                "centerOffset_y": "0",
              }
            ],
            "defaultLineMarker": {  // 箭头样式
              "markerWidth": 22,
              "markerHeight": 22,
              "refX":15,
              "refY": 6,
              "data": "M2,2 L10,6 L2,10 L6,6 L2,2"
            },
            "allowShowMiniNameFilter": true,
            "allowShowMiniToolBar": true,
            "allowSwitchLineShape": true,
            "allowSwitchJunctionPoint": true,
            "defaultNodeShape": 1,
            "defaultNodeWidth": "150",
            "defaultNodeHeight": "50",
            "defaultLineShape": 4,
            "defaultJunctionPoint": "tb",
            "defaultShowLineLabel": true,
            "disableZoom": false,
            "disableDragNode": false,
            "defaultExpandHolderPosition": "top",
            "defaultNodeBorderWidth": 2,
            "defaultNodeColor": "rgba(144, 238, 144, 1)",
            "isMoveByParentNode": false,
            isHideArrow: false,
          },
        }
      },
      created() {
      },
      mounted() {
        this.demoname = this.$route.params.demoname
        this.getInitData()
      },
      methods: {
        showNodeMenus(){
    
        },
        getInitData(){
           var  __graph_json_data={
            "rootId": "a",
            "nodes":[
              {
                "id": "a",
                "text": "a公司",
              },
              {
                "id": "b",
                "id2": "b2222",
                "text": "b公司",
                hasChildren: true,
                'data': { 'num': '11%' }
              },
              {
                "id": "c",
                "text": "c公司"
              },
            ],
            "links": [
              {
                "from": "b",
                "to": "a",
                // text: '控股份111',
                styleClass: "link-class"
              },
              {
                "from": "c",
                "to": "a",
                // text: '控股份222'
              },
              
            ]
          }
          __graph_json_data={
            rootId: '根节点Id',
            nodes: [
              { id: '根节点Id', name: '节点-1', data: { isRoot: true }, fixed:true, x:0, y:200 },
              { id: '节点b', name: '节点-b', data: { num: '22%' , hasChildren: true}, fixed:true,  },
              { id: '节点c', name: '节点-c', data: { num: '22%' ,hasChildren: true}, fixed:true,  },
    
            ],
            links: [
              { from: '节点b', to: '根节点Id', text: '' },
              { from: '节点c', to: '根节点Id', text: '' },
    
            ]
          }
          // 计算排列第二层级的节点的位置  使根节点在中心  第二层的均匀分布 根据nodes.length
          //(nodes.length-index)
          if(__graph_json_data.nodes.length==2){
            __graph_json_data.nodes[1].fixed=true
            __graph_json_data.nodes[1].x=0
          }
          if(__graph_json_data.nodes.length==3){
            __graph_json_data.nodes[1].fixed=true
            __graph_json_data.nodes[1].x=-250
            __graph_json_data.nodes[2].fixed=true
            __graph_json_data.nodes[2].x=250
          }
    
    
          this.setGraphData(__graph_json_data)
        },
        setGraphData(__graph_json_data) {
         
          // console.log(JSON.stringify(__graph_json_data))
          __graph_json_data.nodes.forEach(thisNode => {
            if (thisNode.text === '深圳市腾讯计算机系统有限公司') {
              thisNode.width = 300
              thisNode.height = 100
              // thisNode.offset_x = -80
            }
            
            // 为节点《这个节点原本是没有子节点的》设置属性expandHolderPosition,使其在没有子节点的情况下也能显示【展开/收缩】按钮,当点击展开时动态加载子节点数据
          
            if (thisNode.data.hasChildren ) {
              // thisNode.data = { asyncChild: true, loaded: false, id: thisNode.id }; // 这是一个自定义属性,用来在后续判断如果点击了这个节点,则动态获取数据
              thisNode.data.asyncChild = true
              thisNode.data.loaded = false
              thisNode.expandHolderPosition = "top";
              thisNode.expanded = false;
            }
          })
          setTimeout(function() {
            this.g_loading = false
            this.$refs.seeksRelationGraph.setJsonData(__graph_json_data, (seeksRGGraph) => {
              // 这些写上当图谱初始化完成后需要执行的代码
               this.$nextTick(()=>{
                    this.$refs.seeksRelationGraph.focusRootNode()
                  // this.$refs.seeksRelationGraph.refresh();
                })
            })
          }.bind(this), 1000)
        },
        onNodeExpand(node, e) {  // 模拟动态加载数据
          console.log('点击的节点',node)
          if (node.data && node.data.asyncChild === true && node.data.loaded === false) {
            this.g_loading = true
            node.data.loaded = true
            setTimeout(function() {
              this.g_loading = false
              var _new_json_data = {
                nodes: [
                  { id: node.id + '-child-1', text: node.id + '-的子节点1', data:{hasChildren: true,num:'12%'},},
                  { id: node.id + '-child-2', text: node.id + '-的子节点2', data:{num:'92%'}},
                  // { id: node.id + '-child-3', text: node.id + '-的子节点3'}
                ],
                links: [
                  { to: node.id, from: node.id + '-child-1', },
                  { to: node.id, from: node.id + '-child-2', },
                  // { from: node.id, to: node.id + '-child-3', text: '动态子节点'}
                ]
              }
              _new_json_data.nodes.forEach(thisNode => {
                 if (thisNode.data.hasChildren ) {
                  // thisNode.data = { asyncChild: true, loaded: false, id: thisNode.id }; // 这是一个自定义属性,用来在后续判断如果点击了这个节点,则动态获取数据
                  thisNode.data.asyncChild = true
                  thisNode.data.loaded = false
                  thisNode.expandHolderPosition = "top";
                  thisNode.expanded = false;
                }
              })
    
             // 动态追加数据
              this.$refs.seeksRelationGraph.appendJsonData(_new_json_data, (seeksRGGraph) => {
                // 这些写上当图谱初始化完成后需要执行的代码
                 this.$nextTick(()=>{
                  // this.$refs.seeksRelationGraph.refresh();
                })
              })
            }.bind(this), 1000)
            return
          }
        }
      }
    }
    </script>
    <style >
    /* .is-straight {
        & + g {
          .c-rg-link-text {
            transform: rotate(-90deg) translateY(20px);
          }
        }
      } */
      .link-class  .c-rg-link-text {
          transform: rotate(-90deg) translateY(20px);
      }
      .c-rg-link-text{
          /* transform: rotate(-90deg) ; */
      }
    </style>
    

    相关文章

      网友评论

          本文标题:开源vue关系图谱组件:relation-graph vue实现

          本文链接:https://www.haomeiwen.com/subject/kridxrtx.html