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

因项目需要做一个关系图，我采用relation-graph来完成项目需求，附上地址
relation-graph组件地址
因为多个页面都需要用到这个关系图，所以我将它封装成一个组件，在其他页面引用即可。
1.新建chart.vue页面,引入relation-graph
npm install --save relation-graph

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

<script>
import seeksRelationGraph from 'relation-graph'
export default {
  name: 'Chart',
  components: { seeksRelationGraph },
  computed: {},
  data() {
    return {
      graphOptions: {
        debug: true,
        'backgrounImage': 'http://ai-mark.cn/images/ai-mark-desc.png',
        'backgrounImageNoRepeat': true,
        'layouts': [
          {
            'label': '树',
            'layoutName': 'tree',
            'layoutClassName': 'seeks-layout-center',
            'defaultNodeShape': 0,
            'defaultLineShape': 1,
            'from': 'left',
            // 通过这4个属性来调整 tree-层级距离&节点距离
            'min_per_width': undefined,
            'max_per_width': '300',
            'min_per_height': '40',
            'max_per_height': undefined,
            'levelDistance': '' // 如果此选项有值，则优先级高于上面那4个选项
          }
        ],
        'defaultLineMarker': {
          'markerWidth': 12,
          'markerHeight': 12,
          'refX': 6,
          'refY': 6,
          'data': 'M2,2 L10,6 L2,10 L6,6 L2,2'
        },
        'defaultExpandHolderPosition': 'right',
        'defaultNodeShape': 0,
        'defaultNodeWidth': '100',
        'defaultLineShape': 4,
        'defaultJunctionPoint': 'lr',
        'defaultNodeBorderWidth': 0,
        'defaultLineColor': '#00266f',
        'defaultNodeColor': 'rgba(0, 206, 209, 1)'
      }
    }
  },
  mounted() {
    this.showSeeksGraph()
  },
   methods: {
    showSeeksGraph(query) {
      // 使用要点：通过节点属性expandHolderPosition: 'right' 和 expanded: false 可以让节点在没有子节点的情况下展示一个"展开"按钮
      //         通过onNodeExpand事件监听节点，在被展开的时候有选择的去从后台获取数据，如果已经从后台加载过数据，则让当前图谱根据当前的节点重新布局
      var graphJsonData = {
        'rootId': 'a',
        'nodes': [
          { 'id': 'a', 'text': 'a', color: 'red' },
          { 'id': 'b', 'text': 'b' },
          { 'id': 'b1', 'text': 'b1' },
          { 'id': 'b1-1', 'text': 'b1-1' },
          { 'id': 'b1-2', 'text': 'b1-2' },
          { 'id': 'b1-3', 'text': 'b1-3' },
          { 'id': 'b1-4', 'text': 'b1-4' },
          { 'id': 'b1-5', 'text': 'b1-5' },
          { 'id': 'b1-6', 'text': 'b1-6' },
          { 'id': 'b2', 'text': 'b2' },
          { 'id': 'b2-1', 'text': 'b2-1' },
          { 'id': 'b2-2', 'text': 'b2-2' },
          { 'id': 'c', 'text': 'c' },
          { 'id': 'c1', 'text': 'c1' },
          { 'id': 'c2', 'text': 'c2' },
          { 'id': 'c3', 'text': 'c3' }],
        'links': [
          { 'from': 'a', 'to': 'b' },
          { 'from': 'b', 'to': 'b1' },
          { 'from': 'b1', 'to': 'b1-1' },
          { 'from': 'b1', 'to': 'b1-2' },
          { 'from': 'b1', 'to': 'b1-3' },
          { 'from': 'b1', 'to': 'b1-4' },
          { 'from': 'b1', 'to': 'b1-5' },
          { 'from': 'b1', 'to': 'b1-6' },
          { 'from': 'b', 'to': 'b2' },
          { 'from': 'b2', 'to': 'b2-1' },
          { 'from': 'b2', 'to': 'b2-2' },
          { 'from': 'a', 'to': 'c' },
          { 'from': 'c', 'to': 'c1' },
          { 'from': 'c', 'to': 'c2' },
          { 'from': 'c', 'to': 'c3' }]
      }
      console.log(JSON.stringify(graphJsonData))
      this.g_loading = false
      this.$refs.seeksRelationGraph.setJsonData(graphJsonData, (seeksRGGraph) => {
        // 这些写上当图谱初始化完成后需要执行的代码
      })
    },
    onNodeClick(nodeObject, $event) {
      console.log('onNodeClick:', nodeObject)
    },
    onLineClick(lineObject, $event) {
      console.log('onLineClick:', lineObject)
    }
  }
}
script>

<style lang="scss" scoped>
style>

在需要的页面引入该组件

 <div v-if="curindex === 2" class="countOneFile">
            <chart />
          div>

components: {
    chart: () => import('../relationChart/chart.vue')
  },

效果如下：