用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 = demoDatathis.$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 = falseif (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 = trueconsole.log('Hide line:', thisLine)}} else {if (thisLine.isHide) {thisLine.isHide = falseconsole.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

最后效果