vue 動(dòng)態(tài)生成拓?fù)鋱D的示例
更新時(shí)間：2021年01月03日 10:22:45 作者：饕雨
這篇文章主要介紹了vue 動(dòng)態(tài)生成拓?fù)鋱D的示例，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
橫向拓?fù)?br />
在 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>
在需要繪制拓?fù)鋱D的組件進(jìn)行編程。
<template>
<div>
<span>S型拓?fù)鋱D</span>
<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" 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": "卡機(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" }
]
}
}
},
mounted() {
this.init()
},
methods: {
init() {
$('#bktopo_demo2 .bktopo_box').bkTopology({
data: this.data, //配置數(shù)據(jù)源
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型拓?fù)?br />
和上面橫向一樣，需要在 index.html 文件中引用 js 文件。
<template>
<div>
<span>橫向拓?fù)鋱D</span>
<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" 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": "發(fā)起", "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, //配置數(shù)據(jù)源
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>
縱向拓?fù)?br />
和上面橫向一樣，需要在 index.html 文件中引用 js 文件。
<template>
<div>
<span>縱向拓?fù)鋱D</span>
<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" 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": "瀏覽器發(fā)起'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": "客戶接入聯(lián)通網(wǎng)", "className": "node"
},
{
"id": "node4", "x": 400, "y": 200, "height": 50, "width": 100, "text": "客戶接入移動(dòng)網(wǎng)", "className": "node"
},
{
"id": "node5", "x": 499, "y": 200, "height": 50, "width": 100, "text": "客戶接入電信網(wǎng)",
"className": "node success", "title": "如果hosts匹配成功則不經(jīng)過DNS服務(wù)器解析。直接使用IP訪問"
},
{
"id": "node6", "x": 233, "y": 300, "height": 50, "width": 140, "text": "聯(lián)通DNS服務(wù)器", "className": "node"
},
{
"id": "node7", "x": 372, "y": 300, "height": 50, "width": 140, "text": "移動(dòng)DNS服務(wù)器", "className": "node"
},
{
"id": "node8", "x": 511, "y": 300, "height": 50, "width": 140, "text": "電信DNS服務(wù)器",
"className": "node success"
},
{
"id": "node9", "x": 233, "y": 400, "height": 50, "width": 370,
"text": "核心骨干交換網(wǎng)集群", "className": "node success"
},
{
"id": "node19", "x": 343, "y": 500, "height": 50, "width": 150,
"text": "WEb服務(wù)器", "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, //配置數(shù)據(jù)源
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 動(dòng)態(tài)生成拓?fù)鋱D的示例的詳細(xì)內(nèi)容，更多關(guān)于vue 生成拓?fù)鋱D的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue等兩個(gè)接口都返回結(jié)果再執(zhí)行下一步的實(shí)例
這篇文章主要介紹了vue等兩個(gè)接口都返回結(jié)果再執(zhí)行下一步的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
詳解iview的checkbox多選框全選時(shí)校驗(yàn)問題
這篇文章主要介紹了詳解iview的checkbox多選框全選時(shí)校驗(yàn)問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-06-06
在本篇文章里我們給大家分享了關(guān)于vue的v-if使用方法的相關(guān)知識(shí)點(diǎn)，有興趣的朋友們跟著學(xué)習(xí)下。2019-02-02
初學(xué)vue出現(xiàn)空格警告的原因及其解決方案
今天小編就為大家分享一篇初學(xué)vue出現(xiàn)空格警告的原因及其解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
vue本地模擬服務(wù)器請求mock數(shù)據(jù)的方法詳解
這篇文章主要給大家介紹了關(guān)于vue本地模擬服務(wù)器請求mock數(shù)據(jù)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-03-03
vue+el-select?多數(shù)據(jù)分頁搜索組件的實(shí)現(xiàn)
本文主要介紹了vue+el-select?多數(shù)據(jù)分頁搜索組件的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-12-12
element table跨分頁多選及回顯的實(shí)現(xiàn)示例
本文主要介紹了element table跨分頁多選及回顯的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
本篇文章主要介紹了vue-loader教程介紹，vue-loader就是告訴webpack如何將vue格式的文件轉(zhuǎn)換成js。有興趣的可以了解一下2017-06-06
Vue如何使用ElementUI對表單元素進(jìn)行自定義校驗(yàn)及踩坑
有一些驗(yàn)證不是通過input select這樣的受控組件來觸發(fā)驗(yàn)證條件的 ,可以通過自定義驗(yàn)證的方法來觸發(fā),下面這篇文章主要給大家介紹了關(guān)于Vue如何使用ElementUI對表單元素進(jìn)行自定義校驗(yàn)及踩坑的相關(guān)資料,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了在VUE style中使用data中的變量的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06