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

<link rel='external nofollow' rel='stylesheet'> <link 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 id='bktopo_demo2'> <div data-container='body' data-placement='top' data-html='true' data-trigger='hover'> <div class='node-container'><span class='node-text'></span></div> </div> <div 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 id='bktopo_demo2'> <div data-container='body' data-placement='top' data-html='true' data-trigger='hover'> <div class='node-container'><span class='node-text'></span></div> </div> <div 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 id='bktopo_demo2'> <div data-container='body' data-placement='top' data-html='true' data-trigger='hover'> <div class='node-container'><span class='node-text'></span></div> </div> <div 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 生成拓撲圖的資料請關注好吧啦網其它相關文章！