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 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 生成拓扑图的资料请关注好吧啦网其它相关文章！