vue 动态生成拓扑图

{ “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’ }

]

});

}

},

}

S型拓扑

---

和上面横向一样，需要在 index.html 文件中引用 js 文件。

横向拓扑图

data-trigger=“hover”>

纵向拓扑

---

和上面横向一样，需要在 index.html 文件中引用 js 文件。

纵向拓扑图

data-trigger=“hover”>