打开全栈工匠技能包-1小时轻松掌握SSR
两小时精通jq+bs插件开发
生产环境下如歌部署Node.js
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
网易内部VUE自定义插件库NPM集成
谁说前端不用懂安全，XSS跨站脚本的危害
webpack的loader到底是什么样的？两小时带你写一个自己loader
export default {
data() {
return {
data: {
“nodes”: [
{
“id”: “demo3_node1”, “x”: 100, “y”: 50, “height”: 50,
“width”: 100, “text”: “发起”, “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, //配置数据源
lineType: [ //配置线条的类型
{ type: ‘success’, lineColor: ‘#46C37B’ },
{ type: ‘info’, lineColor: ‘#4A9BFF’ },
{ type: ‘warning’, lineColor: ‘#f0a63a’ },
{ type: ‘danger’, lineColor: ‘#c94d3c’ },
{ type: ‘default’, lineColor: ‘#aaa’ }
]
});
}
},
}
和上面横向一样，需要在 index.html 文件中引用 js 文件。
纵向拓扑图
data-trigger=“hover”>
2876
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
