经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » Vue.js » 查看文章
vue 动态生成拓扑图的示例
来源：jb51　　时间：2021/1/4 9:00:58　　对本文有异议

横向拓扑

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

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

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

  1. <template>
  2.  <div>
  3.   <span>S型拓扑图</span>
  4.   <div class="bktopo-container">
  5.    <div class="bktopo_demo" id="bktopo_demo2">
  6.     <div class="none node" id="node-templates" data-container="body" data-placement="top" data-html="true"
  7.      data-trigger="hover">
  8.      <div class="node-container"><span class="node-text"></span></div>
  9.     </div>
  10.     <div class="bktopo_box" style="height:350px;"></div>
  11.    </div>
  12.   </div>
  13.  </div>
  14. </template>
  15. <script>
  16.  export default {
  17.   data() {
  18.    return {
  19.     data: {
  20.      "nodes": [
  21.       { "id": "root", "x": 10, "y": 152, "height": 50, "width": 120, "text": "卡机健康度", "className": "info" },
  22.       { "id": "child1", "x": 200, "y": 30, "height": 50, "width": 120, "text": "进程CPU监控", "className": "info" },
  23.       { "id": "child2", "x": 200, "y": 90, "height": 50, "width": 120, "text": "网管网络故障监控", "className": "info" },
  24.       { "id": "child3", "x": 200, "y": 150, "height": 50, "width": 120, "text": "进程内在泄露监控", "className": "info" },
  25.       { "id": "child4", "x": 200, "y": 210, "height": 50, "width": 120, "text": "进程存活监控", "className": "info" },
  26.       { "id": "child5", "x": 200, "y": 270, "height": 50, "width": 120, "text": "用户内在使用监控", "className": "info" },
  27.       { "id": "child1_1", "x": 380, "y": 30, "height": 50, "width": 120, "text": "监控正常无触发自愈", "className": "success" },
  28.       { "id": "child2_1", "x": 380, "y": 90, "height": 50, "width": 120, "text": "监控正常无触发自愈", "className": "success" },
  29.       { "id": "child3_1", "x": 380, "y": 150, "height": 50, "width": 120, "text": "发现异常触发自愈", "className": "danger" },
  30.       { "id": "child3_2", "x": 560, "y": 150, "height": 50, "width": 120, "text": "重启进程正常", "className": "success" },
  31.       { "id": "child4_1", "x": 380, "y": 210, "height": 50, "width": 120, "text": "发现异常触发自愈", "className": "danger" },
  32.       { "id": "child4_2", "x": 560, "y": 210, "height": 50, "width": 120, "text": "重启进程正常", "className": "success" },
  33.       { "id": "child5_1", "x": 380, "y": 270, "height": 50, "width": 120, "text": "发现异常触发自愈", "className": "success" },
  34.      ],
  35.      "edges": [
  36.       { "source": "root", "sDirection": 'right', "target": "child1", "tDirection": 'left', "edgesType": "info" },
  37.       { "source": "root", "sDirection": 'right', "target": "child2", "tDirection": 'left', "edgesType": "info" },
  38.       { "source": "root", "sDirection": 'right', "target": "child3", "tDirection": 'left', "edgesType": "info" },
  39.       { "source": "root", "sDirection": 'right', "target": "child4", "tDirection": 'left', "edgesType": "info" },
  40.       { "source": "root", "sDirection": 'right', "target": "child5", "tDirection": 'left', "edgesType": "info" },
  41.       { "source": "child1", "sDirection": 'right', "target": "child1_1", "tDirection": 'left', "edgesType": "success" },
  42.       { "source": "child2", "sDirection": 'right', "target": "child2_1", "tDirection": 'left', "edgesType": "success" },
  43.       { "source": "child3", "sDirection": 'right', "target": "child3_1", "tDirection": 'left', "edgesType": "danger" },
  44.       { "source": "child3_1", "sDirection": 'right', "target": "child3_2", "tDirection": 'left', "edgesType": "success" },
  45.       { "source": "child4", "sDirection": 'right', "target": "child4_1", "tDirection": 'left', "edgesType": "danger" },
  46.       { "source": "child4_1", "sDirection": 'right', "target": "child4_2", "tDirection": 'left', "edgesType": "success" },
  47.       { "source": "child5", "sDirection": 'right', "target": "child5_1", "tDirection": 'left', "edgesType": "success" }
  48.      ]
  49.     }
  50.    }
  51.   },
  52.   mounted() {
  53.    this.init()
  54.   },
  55.   methods: {
  56.    init() {
  57.     $('#bktopo_demo2 .bktopo_box').bkTopology({
  58.      data: this.data, //配置数据源
  59.      lineType: [ //配置线条的类型
  60.       { type: 'success', lineColor: '#46C37B' },
  61.       { type: 'info', lineColor: '#4A9BFF' },
  62.       { type: 'warning', lineColor: '#f0a63a' },
  63.       { type: 'danger', lineColor: '#c94d3c' },
  64.       { type: 'default', lineColor: '#aaa' }
  65.      ]
  66.     });
  67.    }
  68.   },
  69.  }
  70. </script>
  71. <style scoped>
  72.  
  73. </style>

S型拓扑

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

  1. <template>
  2.  <div>
  3.   <span>横向拓扑图</span>
  4.   <div class="bktopo-container">
  5.    <div class="bktopo_demo" id="bktopo_demo2">
  6.     <div class="none node" id="node-templates" data-container="body" data-placement="top" data-html="true"
  7.      data-trigger="hover">
  8.      <div class="node-container"><span class="node-text"></span></div>
  9.     </div>
  10.     <div class="bktopo_box" style="height:350px;"></div>
  11.    </div>
  12.   </div>
  13.  </div>
  14. </template>
  15. <script>
  16.  export default {
  17.   data() {
  18.    return {
  19.     data: {
  20.      "nodes": [
  21.       {
  22.        "id": "demo3_node1", "x": 100, "y": 50, "height": 50,
  23.        "width": 100, "text": "发起", "className": "node success"
  24.       },
  25.       {
  26.        "id": "demo3_node2", "x": 250, "y": 50, "height": 50,
  27.        "width": 100, "text": "过程1", "className": "node success"
  28.       },
  29.       {
  30.        "id": "demo3_node3", "x": 400, "y": 50, "height": 50,
  31.        "width": 100, "text": "过程2", "className": "node danger"
  32.       },
  33.       {
  34.        "id": "demo3_node4", "x": 550, "y": 50, "height": 50,
  35.        "width": 100, "text": "过程3", "className": "node success"
  36.       },
  37.       {
  38.        "id": "demo3_node5", "x": 550, "y": 150, "height": 50,
  39.        "width": 100, "text": "过程4", "className": "node success"
  40.       },
  41.       {
  42.        "id": "demo3_node6", "x": 400, "y": 150, "height": 50,
  43.        "width": 100, "text": "过程5", "className": "node warning"
  44.       },
  45.       {
  46.        "id": "demo3_node7", "x": 250, "y": 150, "height": 50,
  47.        "width": 100, "text": "过程6", "className": "node success"
  48.       },
  49.       {
  50.        "id": "demo3_node8", "x": 100, "y": 150, "height": 50,
  51.        "width": 100, "text": "过程7", "className": "node success"
  52.       },
  53.      ],
  54.      "edges": [
  55.       {
  56.        "source": "demo3_node1", "sDirection": 'right',
  57.        "target": "demo3_node2", "tDirection": 'left', "edgesType": "success"
  58.       },
  59.       {
  60.        "source": "demo3_node2", "sDirection": 'right',
  61.        "target": "demo3_node3", "tDirection": 'left', "edgesType": "danger"
  62.       },
  63.       {
  64.        "source": "demo3_node3", "sDirection": 'right',
  65.        "target": "demo3_node4", "tDirection": 'left', "edgesType": "success"
  66.       },
  67.       {
  68.        "source": "demo3_node4", "sDirection": 'right',
  69.        "target": "demo3_node5", "tDirection": 'right', "edgesType": "success"
  70.       },
  71.       {
  72.        "source": "demo3_node5", "sDirection": 'right',
  73.        "target": "demo3_node6", "tDirection": 'right', "edgesType": "warning"
  74.       },
  75.       {
  76.        "source": "demo3_node6", "sDirection": 'right',
  77.        "target": "demo3_node7", "tDirection": 'right', "edgesType": "success"
  78.       },
  79.       {
  80.        "source": "demo3_node7", "sDirection": 'right',
  81.        "target": "demo3_node8", "tDirection": 'right', "edgesType": "success"
  82.       },
  83.      ]
  84.     }
  85.    }
  86.   },
  87.   mounted() {
  88.    this.init()
  89.   },
  90.   methods: {
  91.    init() {
  92.     $('#bktopo_demo2 .bktopo_box').bkTopology({
  93.      data: this.data, //配置数据源
  94.      lineType: [ //配置线条的类型
  95.       { type: 'success', lineColor: '#46C37B' },
  96.       { type: 'info', lineColor: '#4A9BFF' },
  97.       { type: 'warning', lineColor: '#f0a63a' },
  98.       { type: 'danger', lineColor: '#c94d3c' },
  99.       { type: 'default', lineColor: '#aaa' }
  100.      ]
  101.     });
  102.    }
  103.   },
  104.  }
  105. </script>
  106. <style scoped>
  107.  
  108. </style>

纵向拓扑

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

  1. <template>
  2.  <div>
  3.   <span>纵向拓扑图</span>
  4.   <div class="bktopo-container">
  5.    <div class="bktopo_demo" id="bktopo_demo2">
  6.     <div class="none node" id="node-templates" data-container="body" data-placement="top" data-html="true"
  7.      data-trigger="hover">
  8.      <div class="node-container"><span class="node-text"></span></div>
  9.     </div>
  10.     <div class="bktopo_box" style="height:350px;"></div>
  11.    </div>
  12.   </div>
  13.  </div>
  14. </template>
  15. <script>
  16.  export default {
  17.   data() {
  18.    return {
  19.     data: {
  20.      "nodes": [
  21.       {
  22.        "id": "node1", "x": 361, "y": 20, "height": 50, "width": 180,
  23.        "text": "浏览器发起'www.qq.com'请求", "className": "node success"
  24.       },
  25.       {
  26.        "id": "node2",
  27.        "x": 391, "y": 100, "height": 50, "width": 120, "text": "本地hosts文件解析",
  28.        "className": "node success"
  29.       },
  30.       {
  31.        "id": "node3", "x": 301, "y": 200, "height": 50, "width": 100, "text": "客户接入联通网", "className": "node"
  32.       },
  33.       {
  34.        "id": "node4", "x": 400, "y": 200, "height": 50, "width": 100, "text": "客户接入移动网", "className": "node"
  35.       },
  36.       {
  37.        "id": "node5", "x": 499, "y": 200, "height": 50, "width": 100, "text": "客户接入电信网",
  38.        "className": "node success", "title": "如果hosts匹配成功则不经过DNS服务器解析。直接使用IP访问"
  39.       },
  40.       {
  41.        "id": "node6", "x": 233, "y": 300, "height": 50, "width": 140, "text": "联通DNS服务器", "className": "node"
  42.       },
  43.       {
  44.        "id": "node7", "x": 372, "y": 300, "height": 50, "width": 140, "text": "移动DNS服务器", "className": "node"
  45.       },
  46.       {
  47.        "id": "node8", "x": 511, "y": 300, "height": 50, "width": 140, "text": "电信DNS服务器",
  48.        "className": "node success"
  49.       },
  50.       {
  51.        "id": "node9", "x": 233, "y": 400, "height": 50, "width": 370,
  52.        "text": "核心骨干交换网集群", "className": "node success"
  53.       },
  54.       {
  55.        "id": "node19", "x": 343, "y": 500, "height": 50, "width": 150,
  56.        "text": "WEb服务器", "className": "node success"
  57.       },
  58.      ],
  59.      "edges": [
  60.       { "source": "node1", "sDirection": 'bottom', "target": "node2", "tDirection": 'top', "edgesType": "success" },
  61.       { "source": "node2", "sDirection": 'bottom', "target": "node5", "tDirection": 'top', "edgesType": "success" },
  62.       { "source": "node3", "sDirection": 'bottom', "target": "node6", "tDirection": 'top', "edgesType": "danger" },
  63.       { "source": "node6", "sDirection": 'bottom', "target": "node9", "tDirection": 'left', "edgesType": "danger" },
  64.       { "source": "node4", "sDirection": 'bottom', "target": "node7", "tDirection": 'top', "edgesType": "danger" },
  65.       { "source": "node5", "sDirection": 'bottom', "target": "node8", "tDirection": 'top', "edgesType": "success" },
  66.       { "source": "node7", "sDirection": 'bottom', "target": "node9", "tDirection": 'top', "edgesType": "danger" },
  67.       { "source": "node8", "sDirection": 'bottom', "target": "node9", "tDirection": 'right', "edgesType": "danger" },
  68.       { "source": "node9", "sDirection": 'bottom', "target": "node19", "tDirection": 'top', "edgesType": "success" }
  69.      ]
  70.     }
  71.    }
  72.   },
  73.   mounted() {
  74.    this.init()
  75.   },
  76.   methods: {
  77.    init() {
  78.     $('#bktopo_demo2 .bktopo_box').bkTopology({
  79.      data: this.data, //配置数据源
  80.      lineType: [ //配置线条的类型
  81.       { type: 'success', lineColor: '#46C37B' },
  82.       { type: 'info', lineColor: '#4A9BFF' },
  83.       { type: 'warning', lineColor: '#f0a63a' },
  84.       { type: 'danger', lineColor: '#c94d3c' },
  85.       { type: 'default', lineColor: '#aaa' }
  86.      ]
  87.     });
  88.    }
  89.   },
  90.  }
  91. </script>
  92. <style scoped>
  93.  
  94. </style>

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

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

Vue.js热门文章

  • vue3中getCurrentInstance示例讲解
  • vue3页面跳转的两种方式
  • vue3动态加载对话框的方法实例
  • vue之Element-Ui输入框显示与隐藏方式
  • 封装vue基于element的select多选时启用鼠标悬停折叠文字以tooltip显示具体所选值
  • vue播放flv、m3u8视频流(监控)的方法实例
  • vue实现手机验证码登录
  • vue实现图片预览放大以及缩小问题
  • Vue自定义指令中无法获取this的问题及解决
  • uniapp组件uni-file-picker中设置使用照相机和相册权限的操作方法

    • Vue.js推荐文章

  • 《花100块做个摸鱼小网站! 》第四篇—前端应用搭建和完成第一个热搜组件
  • 卧槽，牛逼！vue3的组件竟然还能“暂停”渲染！
  • 给我5分钟，保证教会你在vue3中动态加载远程组件
  • 业务场景---Token无感刷新
  • 前端如何处理后端一次性返回10万条数据？
  • Vite本地构建：手写核心原理
  • 70%的人都答错了的面试题，vue3的ref是如何实现响应式的？
  • VUE系列之性能优化--懒加载
  • Vue 3 后端错误消息处理范例
  • useCookie函数：管理SSR环境下的Cookie

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号