用relation-graph构建关系图谱 vue版

vue文件和Json数据

<template>
  <div>
    <div style="margin-top:0px;width: calc(100% - 10px);height:calc(100vh);">
      <RelationGraph ref="graphRef" :options="graphOptions">
        <template #node="{node}">
          <div class="my-node-style" :style="{'background-image': 'url(' + node.data.icon + ')'}">
          </div>
          <div class="c-node-name" :style="{color:node.color}">{{ node.text }}</div>
        </template>
        <template #graph-plug>
          <div style="position:absolute;z-index:700;left:20px;top:20px;height:110px;padding-top:6px;padding-left: 30px;padding-right:30px;border: #efefef solid 1px;color: #555555;border-radius: 10px;background-color: rgba(255,255,255,0.79);font-size: 12px;">
            <div style="">
              <div style="line-height: 20px;">节点筛选：</div>

              <a-radio-group v-model="checked_sex" @change="doFilter">
                <a-radio-button value="">全部</a-radio-button>
                <a-radio-button value="男">男</a-radio-button>
                <a-radio-button value="女">女</a-radio-button>
              </a-radio-group>
              &nbsp;&nbsp;&nbsp;&nbsp;
              <a-radio-group v-model="checked_isgoodman" style="margin-left:50px;" @change="doFilter">
                <a-radio-button value="">全部</a-radio-button>
                <a-radio-button :value="true">正面人物</a-radio-button>
                <a-radio-button :value="false">反面人物</a-radio-button>
              </a-radio-group>
            </div>
            <div>
              <div style="line-height: 20px;">关系筛选：</div>
              <a-checkbox-group v-model="rel_checkList" @change="doFilter">
                <div style="display:flex;flex-wrap: wrap;line-height: 32px;">
                  <div v-for="item in all_rel_type" :key="item.iid" style="margin-left: 10px">
                    <a-checkbox :key="item" :value="item" > {{ item }} </a-checkbox>
                  </div>
                </div>
              </a-checkbox-group>
            </div>
          </div>
        </template>
      </RelationGraph>
    </div>

  </div>
</template>

<script>
// 如果您没有在main.js文件中使用Vue.use(RelationGraph) 就需要使用下面这一行代码来引入relation-graph
import RelationGraph from 'relation-graph'
import demoData from './Demo4AdvDataFilterData.json'
const graphOptions = {
  debug: false,
  defaultNodeBorderWidth: 0,
  defaultNodeColor: 'rgba(238, 178, 94, 1)',
  allowSwitchLineShape: true,
  allowSwitchJunctionPoint: true,
  defaultLineShape: 1,
  layout:
    {
      label: '自动布局',
      layoutName: 'force',
      layoutClassName: 'seeks-layout-force'
    },
  defaultJunctionPoint: 'border'

  // 这里可以参考"Graph 图谱"中的参数进行设置
}
export default {
  name: 'RelationGraphDemo',
  components: { RelationGraph }, // 如果您没有在main.js文件中使用Vue.use(RelationGraph) 就需要在这里注册：components: { RelationGraph }
  data() {
    return {
      g_loading: true,
      demoname: '---',
      checked_sex: '',
      checked_isgoodman: '',
      rel_checkList: ['师生', '上下级', '亲戚', '情人', '朋友', '夫妻', '勾结', '腐化', '举报'],
      all_rel_type: ['师生', '上下级', '亲戚', '情人', '朋友', '夫妻', '勾结', '腐化', '举报'],
      graphOptions
    }
  },
  created() {
  },
  mounted() {
    this.setGraphData()
  },
  methods: {
    setGraphData() {
      const graphJsonData = demoData
      this.$refs.graphRef.setJsonData(graphJsonData, (graphInstance) => {
        // 这些写上当图谱初始化完成后需要执行的代码
      })
    },
    doFilter() {
      const allNodes = this.$refs.graphRef.getInstance().getNodes()
      const allLinks = this.$refs.graphRef.getInstance().getLinks()
      allNodes.forEach(thisNode => {
        let _isHideThisLine = false
        if (this.checked_sex !== '') {
          if (thisNode.data['sexType'] !== this.checked_sex) {
            _isHideThisLine = true
          }
        }
        if (this.checked_isgoodman !== '') {
          if (thisNode.data['isGoodMan'] !== this.checked_isgoodman) {
            _isHideThisLine = true
          }
        }
        thisNode.opacity = _isHideThisLine ? 0.1 : 1
      })
      allLinks.forEach(thisLink => {
        thisLink.relations.forEach(thisLine => {
          if (this.rel_checkList.indexOf(thisLine.data['type']) === -1) {
            if (!thisLine.isHide) {
              thisLine.isHide = true
              console.log('Hide line:', thisLine)
            }
          } else {
            if (thisLine.isHide) {
              thisLine.isHide = false
              console.log('Show line:', thisLine)
            }
          }
        })
        // thisNode.opacity = _isShowThisNode ? 1 : 0.1
      })
      this.$refs.graphRef.getInstance().dataUpdated()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.my-node-style{
  background-position: center center;
  background-size: 100%;
  height:100%;
  width:100%;
  border-radius: 40px;
  overflow: visible;
}
.c-node-name{
  width:80px;
  text-align:center;
  color: #2E74B5;
  margin-top: 10px;
}

</style>

Demo4AdvDataFilterData.json

{
  "rootId": "N0",
  "nodes": [ 
    {
      "id": "N2",
      "text": "首都之窗集约化运营门户升级项目",
      "type": "1"
    },
    {
      "id": "N7",
      "text": "温州市数据开放门户升级项目",
      "type": "3"
    },
    {
      "id": "N10",
      "text": "中国兵器工业集团有限公司",
      "type": "2"
    },
    {
      "id": "N14",
      "text": "志愿北京信息平台升级改造项目",
      "type": "3"
    },
    {
      "id": "N18",
      "text": "工业和信息化部政务服务门户改版",
      "type": "3"
    },
    {
      "id": "N21",
      "text": "金华市数据开放门户升级项目",
      "type": "3"
    }
  ],
  "lines": [
    {
      "from": "N2",
      "to": "N14",
      "text": "关联"
    },
    {
      "from": "N2",
      "to": "N10",
      "text": "关联"
    },
    {
      "from": "N2",
      "to": "N7",
      "text": "关联"
    },
    {
      "from": "N2",
      "to": "N18",
      "text": "关联"
    },
    {
      "from": "N2",
      "to": "N21",
      "text": "关联"
    }
  ]
}

##相关链接 relation-graph

最后效果