How to generate S-shaped Topology Diagram by vue.js
Editor to share with you how to generate the S-shaped topology diagram of vue.js, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!
1. Front-end code new Vue ({el:'# app' Data: {}, mounted () {this.init ()} Methods: {init () {axios.get (site_url + "topo/") .then (res = > {if (res.data.result) {$('# bktopo_demo .bktopo _ box') .bkTopology ({data: res.data.data) / / configure data source lineType: [/ / configure the type of lines {type:'success',lineColor:'#46C37B'}, {type:'info',lineColor:'#4A9BFF'}, {type:'warning',lineColor:'#f0a63a'} {type:'danger',lineColor:'#c94d3c'}, {type:'default',lineColor:'#aaa'}]}) } else {this.$message.error ('failed to get topology data');}, 'json');}}) 2. Backend code def topo (request): data = {"nodes": [{"id": "demo3_node1", "x": 100," y ": 50," height ": 50," width ": 100," text ":" initiate "," className ":" node success "} {"id": "demo3_node2", "x": 250, "y": 50, "height": 50, "width": 100, "text": "process 1", "className": "node success"}, {"id": "demo3_node3", "x": 400, "y": 50 "height": 50, "width": 100,100, "text": "process 2", "className": "node danger"}, {"id": "demo3_node4", "x": 550, "y": 50, "height": 50, "width": 100, "text": "process 3" "className": "node success"}, {"id": "demo3_node5", "x": 550, "y": 150, "height": 50, "width": 100, "text": "process 4", "className": "node success"} {"id": "demo3_node6", "x": 400,150, "height": 50, "width": 100, "text": "process 5", "className": "node warning"}, {"id": "demo3_node7", "x": 250, "y": 150 "height": 50, "width": 100,100, "text": "process 6", "className": "node success"}, {"id": "demo3_node8", "x": 100,150, "height": 50, "width": 100, "text": "process 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"} ]} return JsonResponse ({"result": True, "data": data})
Display effect
These are all the contents of the article "how to generate an S-shaped Topology Diagram by vue.js". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
