relation-graph一个vue关系图谱组件的使用

一、relation-graph简介

一个Vue的关系图谱组件，使用非常方便

二、使用步骤

引入relation-graph

npm install --save relation-graph

三、参数配置

1.Graph 图谱

配置图谱的一些默认样式，工具栏等

代码如下（示例）：

graphOptions: {
        // debug: true,
        // 禁用拖拽
        disableDragNode: true,
        // backgrounImage: 'http://ai-mark.cn/images/ai-mark-desc.png',
        backgrounImageNoRepeat: true,
        layouts: [
          {
            label: '中心',
            layoutName: 'tree',
            layoutClassName: 'seeks-layout-center',
            defaultJunctionPoint: 'border',
            defaultNodeShape: 0,
            defaultLineShape: 1,
            from: 'left',
            // 通过这4个属性来调整 tree-层级距离&节点距离
            min_per_width: '200',
            max_per_width: '500',
            // min_per_height: '40',
            // max_per_height: '60',
            // 如果此选项有值，则优先级高于上面那4个选项
            levelDistance: '',
          },
        ],
        // 箭头样式
        defaultLineMarker: {
          markerWidth: '0',
          markerHeight: '0',
          refX: '0',
          refY: '0',
        },
        defaultExpandHolderPosition: 'right',
        defaultNodeShape: 1,
        defaultNodeWidth: '100', // 节点宽度
        defaultLineShape: 4, //线条样式
        defaultJunctionPoint: 'lr',
        defaultNodeBorderWidth: 0,
        defaultLineColor: 'rgba(0, 186, 189, 1)',
        defaultNodeColor: 'rgba(0, 206, 209, 1)',
      },

2.Node 节点

nodes: [
          { id: 'N1', text: '深圳市腾讯计算机系统有限公司', color: '#2E4E8F' },
          { id: 'N15', text: '腾讯影业文化传播有限公司', color: '#4ea2f0' },
          {
            id: 'N16',
            color: '#4ea2f0',
            html: `<div class="A">
                    <div class="A-1">${this.A.title}</div>
                    <div class="A-2">${this.A.name}</div>
                  </div>
                  <div class="TIME">
                    <div>${this.A.date}</div>
                    <div>${this.A.date2}</div>
                  </div>`,
          },
          {
            id: 'N17',
            text: '苍穹互娱（天津）文化传播有限公司',
            color: '#4ea2f0',
          },
          { id: 'N18', text: '北京腾讯影业有限公司', color: '#4ea2f0' },
          { id: 'N19', text: '霍尔果斯腾影影视发行有限公司', color: '#4ea2f0' },
        ],

3.Link 关系

links是指节点之间的关系（link）,图谱会根据这些关系来生成线条(Line)

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

总结

先上图

2、主要代码

<template>
  <div>
    <div v-loading="g_loading" style="width: calc(100% - 10px);height:100vh;">
      <SeeksRelationGraph ref="seeksRelationGraph" :options="graphOptions" />
    </div>
  </div>
</template>

<script>
import SeeksRelationGraph from 'relation-graph';
export default {
  name: 'SeeksRelationGraphDemo',
  components: { SeeksRelationGraph },
  data() {
    return {
      g_loading: true,
      demoname: '---',
      graphOptions: {
        // debug: true,
        // 禁用拖拽
        disableDragNode: true,
        // backgrounImage: 'http://ai-mark.cn/images/ai-mark-desc.png',
        backgrounImageNoRepeat: true,
        layouts: [
          {
            label: '中心',
            layoutName: 'tree',
            layoutClassName: 'seeks-layout-center',
            defaultJunctionPoint: 'border',
            defaultNodeShape: 0,
            defaultLineShape: 1,
            from: 'left',
            // 通过这4个属性来调整 tree-层级距离&节点距离
            min_per_width: '200',
            max_per_width: '500',
            // min_per_height: '40',
            // max_per_height: '60',
            // 如果此选项有值，则优先级高于上面那4个选项
            levelDistance: '',
          },
        ],
        // 箭头样式
        defaultLineMarker: {
          markerWidth: '0',
          markerHeight: '0',
          refX: '0',
          refY: '0',
        },
        defaultExpandHolderPosition: 'right',
        defaultNodeShape: 1,
        defaultNodeWidth: '100', // 节点宽度
        defaultLineShape: 4, //线条样式
        defaultJunctionPoint: 'lr',
        defaultNodeBorderWidth: 0,
        defaultLineColor: 'rgba(0, 186, 189, 1)',
        defaultNodeColor: 'rgba(0, 206, 209, 1)',
      },
      A: {
        name: '文化传播有限公司',
        title: '霍尔果斯晓腾影业',
        date: '2022-10-12',
        date2: '11:39',
      },
    };
  },
  mounted() {
    this.setGraphData();
  },
  methods: {
    setGraphData() {
      var __graph_json_data = {
        rootId: 'N1',
        nodes: [
          { id: 'N1', text: '深圳市腾讯计算机系统有限公司', color: '#2E4E8F' },
          { id: 'N15', text: '腾讯影业文化传播有限公司', color: '#4ea2f0' },
          {
            id: 'N16',
            color: '#4ea2f0',
            html: `<div class="A">
                    <div class="A-1">${this.A.title}</div>
                    <div class="A-2">${this.A.name}</div>
                  </div>
                  <div class="TIME">
                    <div>${this.A.date}</div>
                    <div>${this.A.date2}</div>
                  </div>`,
          },
          {
            id: 'N17',
            text: '苍穹互娱（天津）文化传播有限公司',
            color: '#4ea2f0',
          },
          { id: 'N18', text: '北京腾讯影业有限公司', color: '#4ea2f0' },
          { id: 'N19', text: '霍尔果斯腾影影视发行有限公司', color: '#4ea2f0' },
        ],
        links: [
          { from: 'N1', to: 'N15' },
          { from: 'N15', to: 'N16' },
          { from: 'N15', to: 'N17' },
          { from: 'N15', to: 'N18' },
          { from: 'N15', to: 'N19' },
        ],
      };

      this.g_loading = false;
      this.$refs.seeksRelationGraph.setJsonData(
        __graph_json_data,
        (seeksRGGraph) => {
          // 这些写上当图谱初始化完成后需要执行的代码
        }
      );
    },
  },
};
</script>

<style lang="scss">
.TIME {
  font-size: 12px;
  color: red;
  display: flex;
  justify-content: space-around;
}
.A {
  border: 1px solid #ccc;
  .A-1 {
    border-bottom: 1px solid #ccc;
    padding: 5px;
  }
  .A-2 {
    padding: 5px;
    background-color: aqua;
  }
}
</style>