Vue+relation-graph draws a relationship graph practical component

Execute the command first in the terminal

vue create relationgraph

Create a vue2 project

and then open the newly created project in the editor and
execute the command in the terminal

npm install relation-graph --save

Introduce dependencies

so that our relation-graph comes in

Then we write the code in the components we need to use as follows

<template>
  <div>
    <div 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 {
      
      
      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)',
      }
    };
  },
  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">高级测试管理方案</div>
                    <div class="A-2">映射工具</div>
                  </div>`,
          },
          {
      
      
            id: 'N17',
            text: '微化文案管理',
            color: '#4ea2f0',
          },
          {
      
       id: 'N18', 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.$refs.seeksRelationGraph.setJsonData(
        __graph_json_data,
        (seeksRGGraph) => {
      
      
          console.log(seeksRGGraph);
        }
      );
    },
  },
};
</script>

<style>
</style>

Here, first of all, everyone needs to clarify the relationship. Each node has an id, such as N1 N15.
Then we set the id of the root node
to
be N1. Next
, we can pass
{ id: 'unique identification', text: 'content text', color: 'color code' }
or
{ id: 'unique identification', html: 'page structure string', color: ' Color code' }
to complete.
Finally, the effect we run is like this. The

operations on the right are also available. We can zoom in and out or even download to the local