使⽤vue实现的⼈物关系图谱
先看看效果图:
************************
1,安装relation-graph:
cnpm install --save relation-graph
2,⼀个demo:
import SeeksRelationGraph from 'relation-graph'
export default {
name: 'SeeksRelationGraphDemo',
components: { SeeksRelationGraph },
data() {
return {
g_loading: true,
demoname: '---',
checked_x: '',
checked_isgoodman: '',
rel_checkList: ['师⽣', '上下级', '亲戚', '情⼈', '朋友', '夫妻', '勾结', '腐化', '举报'],
all_rel_type: ['师⽣', '上下级', '亲戚', '情⼈', '朋友', '夫妻', '勾结', '腐化', '举报'],
graphOptions: {
defaultNodeBorderWidth: 0,
defaultNodeColor: 'rgba(238, 178, 94, 1)',
allowSwitchLineShape: true,
allowSwitchJunctionPoint: true,
defaultLineShape: 1,
'layouts': [
{
'label': '⾃动布局',
'layoutName': 'force',
'layoutClassName': 'eks-layout-force'
}
],
defaultJunctionPoint: 'border'
// 这⾥可以参考"Graph 图谱"中的参数进⾏设置
}
}
},
created() {
},
mounted() {
phData()
},
methods: {
tGraphData() {
var __graph_json_data = { 'rootId': 'N13', 'nodes': [{ 'id': 'N1', 'text': '侯亮平', 'color': '#ec6941', 'borderColor': '#ff875e', 'data': { 'isGoodMan': true, 'xType': '男' }, 'innerHTML':
this.$nData(__graph_json_data, (eksRGGraph) => {
// 这些写上当图谱初始化完成后需要执⾏的代码
})
},
doFilter() {
var _all_nodes = this.$es()
var _all_lines = this.$es()
_all_h(thisNode => {
var _isHideThisLine = fal
if (d_x !== '') {
if (['xType'] !== d_x) {
_isHideThisLine = true
}
}
if (d_isgoodman !== '') {
if (['isGoodMan'] !== d_isgoodman) {
_isHideThisLine = true
}
}
y = _isHideThisLine ? 0.1 : 1
})
_all_h(thisLine => {
// 注意这⾥的line和json数据中link不⼀样,⼀条线(line)上可以附着多条关系(link),可以通过ons获取到这条线上所有的关系数据(link)
var _isHideThisLine = true
h(thisLink => {
if (_f(['type']) === -1) {
= true
} el {
_isHideThisLine = fal
= fal
}
})
// y = _isShowThisNode ? 1 : 0.1
})
}
}
}
.c-my-node{
background-position: center center;
background-size: 100%;
border:#ff8c00 solid 2px;
height:80px;
width:80px;
border-radius: 40px;
}
.c-node-name{
width:160px;margin-left:-40px;text-align:center;margin-top:85px;
}
************************
本文发布于:2023-05-27 14:38:46,感谢您对本站的认可!
本文链接:https://www.wtabcd.cn/zhishi/a/1685169527181184.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文word下载地址:使用vue实现的人物关系图谱.doc
本文 PDF 下载地址:使用vue实现的人物关系图谱.pdf
留言与评论(共有 0 条评论) |