vue实现自适应，可拖动的服务依赖图

1.先上效果图

2.首先附上一些参考链接:
https://github.com/cytoscape/cytoscape.js
demo &&api : http://js.cytoscape.org/#demos
其他参考: https://blog.csdn.net/min_mo/article/details/84026197

3. 在你的项目里面下载以下相关包
   npm install --save cytoscape cytoscape-dagre dagre
   会有以下包被下载下来:

   
   image.png

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>