
使?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,感謝您對本站的認可!
本文鏈接:http://m.newhan.cn/zhishi/a/1685169527181184.html
版權聲明:本站內容均來自互聯網,僅供演示用,請勿用于商業和其他非法用途。如果侵犯了您的權益請與我們聯系,我們將在24小時內刪除。
本文word下載地址:使用vue實現的人物關系圖譜.doc
本文 PDF 下載地址:使用vue實現的人物關系圖譜.pdf
| 留言與評論(共有 0 條評論) |