您好,登錄后才能下訂單哦!
小編給大家分享一下vue.js如何生成橫向拓?fù)鋱D,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
<link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/css/bootstrap.min.css" rel="stylesheet"> <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bkTopology-1.1/css/bkTopology.css" 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> <div id="app" > <el-row :gutter="40"> <el-col :span="16" :offset="4"> <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-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" ></div> </div> </div> </el-col> </el-row> </div>
<script type="text/javascript"> new Vue({ el: '#app', data: { }, mounted() { this.init() }, methods: { init() { axios.get(site_url + "topo/").then(res => { if (res.data.result){ $('#bktopo_demo2 .bktopo_box').bkTopology({ data: res.data.data, //配置數(shù)據(jù)源 lineType: [ //配置線條的類型 {type: 'success', lineColor: '#46C37B'}, {type: 'info', lineColor: '#4A9BFF'}, {type: 'warning', lineColor: '#f0a63a'}, {type: 'danger', lineColor: '#c94d3c'}, {type: 'default', lineColor: '#aaa'} ] }); }else{ this.$message.error('獲取拓樸數(shù)據(jù)失敗'); } },'json'); } } }) </script>
def topo(request): data = { "nodes": [ {"id": "root", "x": 10, "y": 152, "height": 50, "width": 120, "text": "卡機(jī)健康度", "className": "info"}, {"id": "child1", "x": 200, "y": 30, "height": 50, "width": 120, "text": "進(jìn)程CPU監(jiān)控", "className": "info"}, {"id": "child2", "x": 200, "y": 90, "height": 50, "width": 120, "text": "網(wǎng)管網(wǎng)絡(luò)故障監(jiān)控", "className": "info"}, {"id": "child3", "x": 200, "y": 150, "height": 50, "width": 120, "text": "進(jìn)程內(nèi)在泄露監(jiān)控", "className": "info"}, {"id": "child4", "x": 200, "y": 210, "height": 50, "width": 120, "text": "進(jìn)程存活監(jiān)控", "className": "info"}, {"id": "child5", "x": 200, "y": 270, "height": 50, "width": 120, "text": "用戶內(nèi)在使用監(jiān)控", "className": "info"}, {"id": "child1_1", "x": 380, "y": 30, "height": 50, "width": 120, "text": "監(jiān)控正常無觸發(fā)自愈","className": "success"}, {"id": "child2_1", "x": 380, "y": 90, "height": 50, "width": 120, "text": "監(jiān)控正常無觸發(fā)自愈","className": "success"}, {"id": "child3_1", "x": 380, "y": 150, "height": 50, "width": 120, "text": "發(fā)現(xiàn)異常觸發(fā)自愈","className": "danger"}, {"id": "child3_2", "x": 560, "y": 150, "height": 50, "width": 120, "text": "重啟進(jìn)程正常", "className": "success"}, {"id": "child4_1", "x": 380, "y": 210, "height": 50, "width": 120, "text": "發(fā)現(xiàn)異常觸發(fā)自愈","className": "danger"}, {"id": "child4_2", "x": 560, "y": 210, "height": 50, "width": 120, "text": "重啟進(jìn)程正常","className": "success"}, {"id": "child5_1", "x": 380, "y": 270, "height": 50, "width": 120, "text": "發(fā)現(xiàn)異常觸發(fā)自愈","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"} ] } return JsonResponse({"result": True, "data": data})
顯示效果
以上是“vue.js如何生成橫向拓?fù)鋱D”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。