vue 图扑 开发_vue.js生成横向拓扑图

1.前端代码

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, //配置数据源

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('获取拓朴数据失败');

}

},'json');

}

}

})