vue中cytoscape.js的使用
“jquery”: “^3.4.1”,
“cytoscape”: “^3.8.2”,
“cytoscape-context-menus”: “^3.0.0”,
“cytoscape-cose-bilkent”: “^4.1.0”,
“cytoscape-spread”: “^3.0.0”,
- 安装：
npm i cytoscape --save
2.在main.js引入
import cytoscape from ‘cytoscape’;
Vue.prototype.$cytoscape = cytoscape;
3.使用
< template>
< div class=“layers-wrap”>
< div class=“chooseRelation”>
< div class=“Screenshots”>
< el-button size=“small” style=“margin-top:5px;margin-right:20px;” @click=“createPicture()”>下载关系图
关系图操作说明
export default {
name:‘relation’,
data(){
return{
//点击节点之间的连线，可查看关联详情
recordView: false,
radio: ‘1’,
detailInfos:{},
color:’#1E9FFF’,
nodes:[],
edges:[],
tushow:true,
getdata:null,
queryObj:{},
}
},
methods:{
init(data){
var self = this;
self.color=’#1E9FFF’;
self.getdata = data;
self.getRelationData(self.getdata)
},
getRelationData(data){
var self = this;
self.queryObj.featureType1=data.featureType,
self.queryObj.featureType2 ='2,
self.queryObj.feature1 =data.fileId,
self.queryObj.relationshipType=self.relationshipType,
self.queryObj.top=6
//查询数据
serach(self.queryObj).then(res =>{
if(res.data.data.nodes==""){
this.$alert(‘暂无数据’, ‘信息’, {
confirmButtonText: ‘确定’
});
this.initCytoscape([],[]);
return false
}else{
this.tushow = true
var resultData = res.data.data;
//添加节点
self.addNodes(resultData)
}
})
},
//设置节点和线样式添加节点和线上数据
initCytoscape(dataA,dataB){
var self = this;
self.cy = cytoscape({
container: document.getElementById('photo'),
layout: {
fit: true,//是否自适应
name: 'concentric',//这是控制图形形状的
minNodeSpacing: 80,//控制大小
maxNodeSpacing: 120,//控制大小
padding: 30, // the padding on fit
animate: true,
minNodeSpacing: 180,//控制大小字体和节点
},
style: [{selector: 'node',
css: {
'curve-style': 'bezier',
'label':'data(nodename)',
'background-image': 'data(color)',
'background-fit': 'cover',
'color':'data(textColor)',
'width': 50,
'height': 50,
//'font-size':6//这个设置对于浏览器不太兼容，尝试需要谷歌7以上，建议不要使用这种方式设置字体大小
}
},
{selector: 'edge',
css: {
'curve-style': 'bezier',
'label':'data(percentum)',
'width': 1,
'line-color': self.color,
//'font-size':6/这个设置对于浏览器不太兼容，建议不要使用这种方式设置字体大小
}
},
],
elements: {
nodes: dataA,
edges: dataB
}
});
//根据节点数据操作右键点击后继续扩展下级关联数据并添加到网图上
self.cy.contextMenus({
menuItems: [
{
id: 'remove',
content: '下级关联',
tooltipText: '下级关联',
selector: 'node',
onClickFunction: function (event) {
if(event.target._private.data.featureType =='2'){
self.queryObj.featureType1=event.target._private.data.featureType,
self.queryObj.featureType2 ='2,3',
self.queryObj.feature1 =event.target._private.data.feature,
self.queryObj.relationshipType=self.relationshipType,
self.queryObj.top=6
}
serach(self.queryObj).then(res =>{
var clickresult = res.data.data;
self.addNodes(clickresult)
})
}
},
{
id: 'hide',
content: '详情',
tooltipText: '详情',
selector: 'node',
onClickFunction: function (event) {
var obj={}
if(event.target._private.data.featureType == '2'){
obj.imgUrl = event.target._private.data.imgUrl;
obj.type = event.target._private.data.featureType
obj.createTime = event.target._private.data.createTime;
obj.updateTime = event.target._private.data.updateTime;
obj.archiveCode = event.target._private.data.nodename;
}
self.viewMore(obj)
}
},
]
});
//监听节点鼠标点击事件，左鼠标
self.cy.on('tap','node',function(evt){
var obj={}
if(evt.target._private.data.featureType == '23'){
obj.imgUrl = evt.target._private.data.imgUrl;
obj.type = evt.target._private.data.featureType;
obj.createTime = evt.target._private.data.createTime;
obj.updateTime = evt.target._private.data.updateTime;
obj.archiveCode = evt.target._private.data.nodename;
}
self.viewMore(obj)
});
self.cy.on('tap','edge',function(evt){
var obj = {
id:evt.target._private.data.id,
relatonship:evt.target._private.data.percentum,
type:evt.target._private.data.type
}
// if(this.radio == 2){
// self.viewMore(obj)
// }
});
},
//关系图截取
createPicture() {
if($('.photo').html()==''){
this.$alert('暂无关系图下载', '信息', {
confirmButtonText: '确定'
});
return false
}
html2canvas(document.getElementById('photo')).then(canvas => {
this.imgmap = canvas.toDataURL()
console.log(999, this.imgmap)
if (window.navigator.msSaveOrOpenBlob) {
var bstr = atob(this.imgmap.split(',')[1])
var n = bstr.length
var u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
var blob = new Blob([u8arr])
window.navigator.msSaveOrOpenBlob(blob, 'chart-download' + '.' + 'png')
} else {
// 这里就按照chrome等新版浏览器来处理
const a = document.createElement('a')
a.href = this.imgmap
a.setAttribute('download', 'chart-download')
a.click()
}
});
},
//节点或边的详情
viewMore(e){
var self = this;
self.detailInfos = e;
self.recordView = true;
},
//节点添加
addNodes(data_1){
var self = this;
self.nodes = [];
self.edges = [];
for(var i = 0; i< data_1.nodes.length; i++){
if(data_1.nodes[i].featureType == "2"){
data_1.nodes[i].color = data_1.nodes[i].imgUrl;
data_1.nodes[i].nodename = data_1.nodes[i].profileName
}
data_1.nodes[i].textColor = "#000"
var obj = {};
obj.data= data_1.nodes[i];
obj.classes='l1'
self.nodes.push(obj);
}
for(var j=0;j
}
< /script>