代码拉取完成,页面将自动刷新
同步操作将从 Huoyo/metricflow 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MetricFlow</title>
<style>
</style>
<script src="../src/components/metricflow.min.js"></script>
<script>
window.onload = function () {
let metricFlow = MetricFlow("graph")
/*定义节点数据*/
let node1Data= {
"id":"primaryKey1",
"title":{'name':"A系统日志"},
"data":[
{'name':'描述:从A系统抽取日志'},
{'name':'抽取频率:一天一次'},
{'name':'平均耗时:10s'},
{'name':'状态:正常'}
]
};
let node1 = metricFlow.createNode(node1Data,30,100);
let node2Data= {
"id":"primaryKey2",
"title":{'name':"B系统日志",'background-color':'red'},
'border-color':'red',
"data":[
{'name':'描述:从B系统抽取日志'},
{'name':'抽取频率:一天一次'},
{'name':'平均耗时:10m'},
{'name':'状态:较慢'}
]
};
let node2 = metricFlow.createNode(node2Data,30,300);
let node3Data= {
"id":"primaryKey3",
"title":{'name':"C系统日志"},
"data":[
{'name':'描述:从C系统抽取日志'},
{'name':'抽取频率:一天一次'},
{'name':'平均耗时:5s'},
{'name':'状态:正常'}
]
};
let node3 = metricFlow.createNode(node3Data,30,500);
let node4Data= {
"id":"primaryKey4",
"title":{'name':"数据预处理"},
"data":[
{'name':'描述:汇总各系统日志'},
{'name':'平均耗时:20s'},
{'name':'状态:正常'}
]
};
let node4 = metricFlow.createNode(node4Data,500,300);
let node5Data= {
"id":"primaryKey5",
"title":{'name':"入库",'background-color':'red'},
'border-color':'red',
"data":[
{'name':'描述:汇总各系统日志'},
{'name':'平均耗时:30s'},
{'name':'状态:较慢'}
]
};
let node5 = metricFlow.createNode(node5Data,750,300);
/*连接两个节点*/
metricFlow.createLink(node1,node4);
metricFlow.createLink(node2,node4);
metricFlow.createLink(node3,node4);
metricFlow.createLink(node4,node5);
}
</script>
</head>
<body>
<!--定义一个画布 graph -->
<div id="graph" height="700px" width="1100px" >
</div>
</body>
</html>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。