vue 动态生成拓扑图的示例

横向拓扑

在 index.html 文件中引入文件。

 <link href=\"https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/css/bootstrap.min.css\" rel=\"external nofollow\" rel=\"stylesheet\">
 <link href=\"https://magicbox.bk.tencent.com/static_api/v3/assets/bkTopology-1.1/css/bkTopology.css\" rel=\"external nofollow\" rel=\"stylesheet\">
 <script src=\"https://magicbox.bk.tencent.com/static_api/v3/assets/js/jquery-1.10.2.min.js\"></script>
 <script src=\"https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/js/bootstrap.min.js\"></script>
 <script src=\"https://magicbox.bk.tencent.com/static_api/v3/assets/bkTopology-1.2/js/bkTopology.js\"></script>

在需要绘制拓扑图的组件进行编程。

<template>
 <div>
  <span>S型拓扑图</span>
  <div class=\"bktopo-container\">
   <div class=\"bktopo_demo\" id=\"bktopo_demo2\">
    <div class=\"none node\" id=\"node-templates\" data-container=\"body\" data-placement=\"top\" data-html=\"true\"
     data-trigger=\"hover\">
     <div class=\"node-container\"><span class=\"node-text\"></span></div>
    </div>
    <div class=\"bktopo_box\" style=\"height:350px;\"></div>
   </div>
  </div>
 </div>
</template>
<script>
 export default {
  data() {
   return {
    data: {
     \"nodes\": [
      { \"id\": \"root\", \"x\": 10, \"y\": 152, \"height\": 50, \"width\": 120, \"text\": \"卡机健康度\", \"className\": \"info\" },
      { \"id\": \"child1\", \"x\": 200, \"y\": 30, \"height\": 50, \"width\": 120, \"text\": \"进程CPU监控\", \"className\": \"info\" },
      { \"id\": \"child2\", \"x\": 200, \"y\": 90, \"height\": 50, \"width\": 120, \"text\": \"网管网络故障监控\", \"className\": \"info\" },
      { \"id\": \"child3\", \"x\": 200, \"y\": 150, \"height\": 50, \"width\": 120, \"text\": \"进程内在泄露监控\", \"className\": \"info\" },
      { \"id\": \"child4\", \"x\": 200, \"y\": 210, \"height\": 50, \"width\": 120, \"text\": \"进程存活监控\", \"className\": \"info\" },
      { \"id\": \"child5\", \"x\": 200, \"y\": 270, \"height\": 50, \"width\": 120, \"text\": \"用户内在使用监控\", \"className\": \"info\" },
      { \"id\": \"child1_1\", \"x\": 380, \"y\": 30, \"height\": 50, \"width\": 120, \"text\": \"监控正常无触发自愈\", \"className\": \"success\" },
      { \"id\": \"child2_1\", \"x\": 380, \"y\": 90, \"height\": 50, \"width\": 120, \"text\": \"监控正常无触发自愈\", \"className\": \"success\" },
      { \"id\": \"child3_1\", \"x\": 380, \"y\": 150, \"height\": 50, \"width\": 120, \"text\": \"发现异常触发自愈\", \"className\": \"danger\" },
      { \"id\": \"child3_2\", \"x\": 560, \"y\": 150, \"height\": 50, \"width\": 120, \"text\": \"重启进程正常\", \"className\": \"success\" },
      { \"id\": \"child4_1\", \"x\": 380, \"y\": 210, \"height\": 50, \"width\": 120, \"text\": \"发现异常触发自愈\", \"className\": \"danger\" },
      { \"id\": \"child4_2\", \"x\": 560, \"y\": 210, \"height\": 50, \"width\": 120, \"text\": \"重启进程正常\", \"className\": \"success\" },
      { \"id\": \"child5_1\", \"x\": 380, \"y\": 270, \"height\": 50, \"width\": 120, \"text\": \"发现异常触发自愈\", \"className\": \"success\" },
     ],
     \"edges\": [
      { \"source\": \"root\", \"sDirection\": \'right\', \"target\": \"child1\", \"tDirection\": \'left\', \"edgesType\": \"info\" },
      { \"source\": \"root\", \"sDirection\": \'right\', \"target\": \"child2\", \"tDirection\": \'left\', \"edgesType\": \"info\" },
      { \"source\": \"root\", \"sDirection\": \'right\', \"target\": \"child3\", \"tDirection\": \'left\', \"edgesType\": \"info\" },
      { \"source\": \"root\", \"sDirection\": \'right\', \"target\": \"child4\", \"tDirection\": \'left\', \"edgesType\": \"info\" },
      { \"source\": \"root\", \"sDirection\": \'right\', \"target\": \"child5\", \"tDirection\": \'left\', \"edgesType\": \"info\" },
      { \"source\": \"child1\", \"sDirection\": \'right\', \"target\": \"child1_1\", \"tDirection\": \'left\', \"edgesType\": \"success\" },
      { \"source\": \"child2\", \"sDirection\": \'right\', \"target\": \"child2_1\", \"tDirection\": \'left\', \"edgesType\": \"success\" },
      { \"source\": \"child3\", \"sDirection\": \'right\', \"target\": \"child3_1\", \"tDirection\": \'left\', \"edgesType\": \"danger\" },
      { \"source\": \"child3_1\", \"sDirection\": \'right\', \"target\": \"child3_2\", \"tDirection\": \'left\', \"edgesType\": \"success\" },
      { \"source\": \"child4\", \"sDirection\": \'right\', \"target\": \"child4_1\", \"tDirection\": \'left\', \"edgesType\": \"danger\" },
      { \"source\": \"child4_1\", \"sDirection\": \'right\', \"target\": \"child4_2\", \"tDirection\": \'left\', \"edgesType\": \"success\" },
      { \"source\": \"child5\", \"sDirection\": \'right\', \"target\": \"child5_1\", \"tDirection\": \'left\', \"edgesType\": \"success\" }
     ]
    }
   }
  },
  mounted() {
   this.init()
  },
  methods: {
   init() {
    $(\'#bktopo_demo2 .bktopo_box\').bkTopology({
     data: this.data, //配置数据源
     lineType: [ //配置线条的类型
      { type: \'success\', lineColor: \'#46C37B\' },
      { type: \'info\', lineColor: \'#4A9BFF\' },
      { type: \'warning\', lineColor: \'#f0a63a\' },
      { type: \'danger\', lineColor: \'#c94d3c\' },
      { type: \'default\', lineColor: \'#aaa\' }
     ]
    });
   }
  },
 }
</script>
<style scoped>

</style>

S型拓扑

和上面横向一样，需要在 index.html 文件中引用 js 文件。

<template>
 <div>
  <span>横向拓扑图</span>
  <div class=\"bktopo-container\">
   <div class=\"bktopo_demo\" id=\"bktopo_demo2\">
    <div class=\"none node\" id=\"node-templates\" data-container=\"body\" data-placement=\"top\" data-html=\"true\"
     data-trigger=\"hover\">
     <div class=\"node-container\"><span class=\"node-text\"></span></div>
    </div>
    <div class=\"bktopo_box\" style=\"height:350px;\"></div>
   </div>
  </div>
 </div>
</template>
<script>
 export default {
  data() {
   return {
    data: {
     \"nodes\": [
      {
       \"id\": \"demo3_node1\", \"x\": 100, \"y\": 50, \"height\": 50,
       \"width\": 100, \"text\": \"发起\", \"className\": \"node success\"
      },
      {
       \"id\": \"demo3_node2\", \"x\": 250, \"y\": 50, \"height\": 50,
       \"width\": 100, \"text\": \"过程1\", \"className\": \"node success\"
      },
      {
       \"id\": \"demo3_node3\", \"x\": 400, \"y\": 50, \"height\": 50,
       \"width\": 100, \"text\": \"过程2\", \"className\": \"node danger\"
      },
      {
       \"id\": \"demo3_node4\", \"x\": 550, \"y\": 50, \"height\": 50,
       \"width\": 100, \"text\": \"过程3\", \"className\": \"node success\"
      },
      {
       \"id\": \"demo3_node5\", \"x\": 550, \"y\": 150, \"height\": 50,
       \"width\": 100, \"text\": \"过程4\", \"className\": \"node success\"
      },
      {
       \"id\": \"demo3_node6\", \"x\": 400, \"y\": 150, \"height\": 50,
       \"width\": 100, \"text\": \"过程5\", \"className\": \"node warning\"
      },
      {
       \"id\": \"demo3_node7\", \"x\": 250, \"y\": 150, \"height\": 50,
       \"width\": 100, \"text\": \"过程6\", \"className\": \"node success\"
      },
      {
       \"id\": \"demo3_node8\", \"x\": 100, \"y\": 150, \"height\": 50,
       \"width\": 100, \"text\": \"过程7\", \"className\": \"node success\"
      },
     ],
     \"edges\": [
      {
       \"source\": \"demo3_node1\", \"sDirection\": \'right\',
       \"target\": \"demo3_node2\", \"tDirection\": \'left\', \"edgesType\": \"success\"
      },
      {
       \"source\": \"demo3_node2\", \"sDirection\": \'right\',
       \"target\": \"demo3_node3\", \"tDirection\": \'left\', \"edgesType\": \"danger\"
      },
      {
       \"source\": \"demo3_node3\", \"sDirection\": \'right\',
       \"target\": \"demo3_node4\", \"tDirection\": \'left\', \"edgesType\": \"success\"
      },
      {
       \"source\": \"demo3_node4\", \"sDirection\": \'right\',
       \"target\": \"demo3_node5\", \"tDirection\": \'right\', \"edgesType\": \"success\"
      },
      {
       \"source\": \"demo3_node5\", \"sDirection\": \'right\',
       \"target\": \"demo3_node6\", \"tDirection\": \'right\', \"edgesType\": \"warning\"
      },
      {
       \"source\": \"demo3_node6\", \"sDirection\": \'right\',
       \"target\": \"demo3_node7\", \"tDirection\": \'right\', \"edgesType\": \"success\"
      },
      {
       \"source\": \"demo3_node7\", \"sDirection\": \'right\',
       \"target\": \"demo3_node8\", \"tDirection\": \'right\', \"edgesType\": \"success\"
      },
     ]
    }
   }
  },
  mounted() {
   this.init()
  },
  methods: {
   init() {
    $(\'#bktopo_demo2 .bktopo_box\').bkTopology({
     data: this.data, //配置数据源
     lineType: [ //配置线条的类型
      { type: \'success\', lineColor: \'#46C37B\' },
      { type: \'info\', lineColor: \'#4A9BFF\' },
      { type: \'warning\', lineColor: \'#f0a63a\' },
      { type: \'danger\', lineColor: \'#c94d3c\' },
      { type: \'default\', lineColor: \'#aaa\' }
     ]
    });
   }
  },
 }
</script>
<style scoped>

</style>

纵向拓扑

和上面横向一样，需要在 index.html 文件中引用 js 文件。

<template>
 <div>
  <span>纵向拓扑图</span>
  <div class=\"bktopo-container\">
   <div class=\"bktopo_demo\" id=\"bktopo_demo2\">
    <div class=\"none node\" id=\"node-templates\" data-container=\"body\" data-placement=\"top\" data-html=\"true\"
     data-trigger=\"hover\">
     <div class=\"node-container\"><span class=\"node-text\"></span></div>
    </div>
    <div class=\"bktopo_box\" style=\"height:350px;\"></div>
   </div>
  </div>
 </div>
</template>
<script>
 export default {
  data() {
   return {
    data: {
     \"nodes\": [
      {
       \"id\": \"node1\", \"x\": 361, \"y\": 20, \"height\": 50, \"width\": 180,
       \"text\": \"浏览器发起\'www.qq.com\'请求\", \"className\": \"node success\"
      },
      {
       \"id\": \"node2\",
       \"x\": 391, \"y\": 100, \"height\": 50, \"width\": 120, \"text\": \"本地hosts文件解析\",
       \"className\": \"node success\"
      },
      {
       \"id\": \"node3\", \"x\": 301, \"y\": 200, \"height\": 50, \"width\": 100, \"text\": \"客户接入联通网\", \"className\": \"node\"
      },
      {
       \"id\": \"node4\", \"x\": 400, \"y\": 200, \"height\": 50, \"width\": 100, \"text\": \"客户接入移动网\", \"className\": \"node\"
      },
      {
       \"id\": \"node5\", \"x\": 499, \"y\": 200, \"height\": 50, \"width\": 100, \"text\": \"客户接入电信网\",
       \"className\": \"node success\", \"title\": \"如果hosts匹配成功则不经过DNS服务器解析。直接使用IP访问\"
      },
      {
       \"id\": \"node6\", \"x\": 233, \"y\": 300, \"height\": 50, \"width\": 140, \"text\": \"联通DNS服务器\", \"className\": \"node\"
      },
      {
       \"id\": \"node7\", \"x\": 372, \"y\": 300, \"height\": 50, \"width\": 140, \"text\": \"移动DNS服务器\", \"className\": \"node\"
      },
      {
       \"id\": \"node8\", \"x\": 511, \"y\": 300, \"height\": 50, \"width\": 140, \"text\": \"电信DNS服务器\",
       \"className\": \"node success\"
      },
      {
       \"id\": \"node9\", \"x\": 233, \"y\": 400, \"height\": 50, \"width\": 370,
       \"text\": \"核心骨干交换网集群\", \"className\": \"node success\"
      },
      {
       \"id\": \"node19\", \"x\": 343, \"y\": 500, \"height\": 50, \"width\": 150,
       \"text\": \"WEb服务器\", \"className\": \"node success\"
      },
     ],
     \"edges\": [
      { \"source\": \"node1\", \"sDirection\": \'bottom\', \"target\": \"node2\", \"tDirection\": \'top\', \"edgesType\": \"success\" },
      { \"source\": \"node2\", \"sDirection\": \'bottom\', \"target\": \"node5\", \"tDirection\": \'top\', \"edgesType\": \"success\" },
      { \"source\": \"node3\", \"sDirection\": \'bottom\', \"target\": \"node6\", \"tDirection\": \'top\', \"edgesType\": \"danger\" },
      { \"source\": \"node6\", \"sDirection\": \'bottom\', \"target\": \"node9\", \"tDirection\": \'left\', \"edgesType\": \"danger\" },
      { \"source\": \"node4\", \"sDirection\": \'bottom\', \"target\": \"node7\", \"tDirection\": \'top\', \"edgesType\": \"danger\" },
      { \"source\": \"node5\", \"sDirection\": \'bottom\', \"target\": \"node8\", \"tDirection\": \'top\', \"edgesType\": \"success\" },
      { \"source\": \"node7\", \"sDirection\": \'bottom\', \"target\": \"node9\", \"tDirection\": \'top\', \"edgesType\": \"danger\" },
      { \"source\": \"node8\", \"sDirection\": \'bottom\', \"target\": \"node9\", \"tDirection\": \'right\', \"edgesType\": \"danger\" },
      { \"source\": \"node9\", \"sDirection\": \'bottom\', \"target\": \"node19\", \"tDirection\": \'top\', \"edgesType\": \"success\" }
     ]
    }
   }
  },
  mounted() {
   this.init()
  },
  methods: {
   init() {
    $(\'#bktopo_demo2 .bktopo_box\').bkTopology({
     data: this.data, //配置数据源
     lineType: [ //配置线条的类型
      { type: \'success\', lineColor: \'#46C37B\' },
      { type: \'info\', lineColor: \'#4A9BFF\' },
      { type: \'warning\', lineColor: \'#f0a63a\' },
      { type: \'danger\', lineColor: \'#c94d3c\' },
      { type: \'default\', lineColor: \'#aaa\' }
     ]
    });
   }
  },
 }
</script>
<style scoped>

</style>

以上就是vue 动态生成拓扑图的示例的详细内容，更多关于vue 生成拓扑图的资料请关注其它相关文章！