1.先上效果图
2.首先附上一些参考链接:
https://github.com/cytoscape/cytoscape.js
demo &&api : http://js.cytoscape.org/#demos
其他参考: https://blog.csdn.net/min_mo/article/details/84026197
-
在你的项目里面下载以下相关包
npm install --save cytoscape cytoscape-dagre dagre
会有以下包被下载下来:
4.新建一个cytoscape.vue组件,代码如下:
<template>
<div id="box">
<h1>cytoscape-dagre demo</h1>
<div id="cy"></div>
</div>
</template>
<script>
import cytoscape from 'cytoscape'
import cydagre from 'cytoscape-dagre'
import dagre from 'dagre'
cydagre(cytoscape, dagre)
export default {
name: 'cytoscape',
components: {
},
data () {
return {
}
},
methods: {
createCytoscape () {
console.log('inot function')
cytoscape({
container: document.getElementById('cy'),
boxSelectionEnabled: false,
autounselectify: true,
layout: {
name: 'dagre',
padding: 10
},
minZoom: 0.1,
style: [
{
selector: 'node',
style: {
content: 'data(id)',
'text-opacity': 0.5,
'pie-size': '100%',
'text-valign': 'center',
'text-halign': 'right',
'background-color': '#11939A',
'pie-1-background-color': '#E8747C',
'pie-1-background-size': 'mapData(occupy, 0, 10, 0, 100)'
}
},
{
selector: 'edge',
style: {
width: 4,
label: 'data(label)',
'target-arrow-shape': 'triangle',
'line-color': '#9dbaea',
'target-arrow-color': '#9dbaea',
'curve-style': 'bezier'
}
}
],
elements: {
nodes: [
{ data: { id: 'n0', occupy: 0 } },
{ data: { id: 'n1', occupy: 10 } },
{ data: { id: 'n2', occupy: 5 } },
{ data: { id: 'n3', occupy: 1 } },
{ data: { id: 'n4', occupy: 3 } },
{ data: { id: 'n5', occupy: 6 } },
{ data: { id: 'n6', occupy: 9 } },
{ data: { id: 'n7' } },
{ data: { id: 'n8' } },
{ data: { id: 'n9' } },
{ data: { id: 'n10' } },
{ data: { id: 'n11' } },
{ data: { id: 'n12' } },
{ data: { id: 'n13' } },
{ data: { id: 'n14' } },
{ data: { id: 'n15' } },
{ data: { id: 'n16' } }
],
edges: [
{ data: { source: 'n0', target: 'n1', label: 'ss' } },
{ data: { source: 'n2', target: 'n1' } },
{ data: { source: 'n1', target: 'n3' } },
{ data: { source: 'n4', target: 'n1' } },
{ data: { source: 'n1', target: 'n0' } },
{ data: { source: 'n6', target: 'n7' } },
{ data: { source: 'n6', target: 'n8' } },
{ data: { source: 'n8', target: 'n1' } },
{ data: { source: 'n8', target: 'n10' } },
{ data: { source: 'n11', target: 'n12' } },
{ data: { source: 'n12', target: 'n1' } },
{ data: { source: 'n13', target: 'n14' } },
{ data: { source: 'n13', target: 'n15' } }
]
}
})
}
},
mounted () {
this.$nextTick(() => {
console.log('inot')
console.log(document.getElementById('cy'))
document.getElementById('cy').addEventListener('DOMContentLoaded', this.createCytoscape(), true)
})
}
}
</script>
<style>
body {
font-family: helvetica;
font-size: 14px;
}
#box{
width: 100%;
height: 600px;
}
#cy {
width: 90%;
height: 100%;
position: absolute;
top: 100px;
z-index: 999;
}
.__________cytoscape_container{
position: relative !important;
}
canvas{
left: 0 !important;
}
h1 {
opacity: 0.5;
font-size: 1em;
}
</style>
作者:gem_Y
链接:https://www.jianshu.com/p/2f71cdb94361
本着资源共享的原则,欢迎各位朋友在此基础上完善,并进一步分享,让我们的实现更加优雅。如果有任何疑问和需要进一步交流可以留言沟通
Testner创始人(testner.club) Sea