代码拉取完成,页面将自动刷新
直接用浏览器打开index.html,使用前需要运行
yarn install
加载依赖
当前版本依赖zrender@4.0.4,lodash@4.17.10,并使用yarn管理
#加载依赖
yarn install
项目中加载
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/lodash/lodash.min.js"></script>
<script src="node_modules/zrender/dist/zrender.min.js"></script>
<script src="src/topology-zrender.js"></script>
<script src="src/topology-zrender-tools.js"></script>
项目中使用
<div id="topologyGraph" style="width: 100%;height: 100%"></div>
<script>
var graph = topology.init(document.getElementById('topologyGraph'));
getData().then(function(dataList) {
var options = {
data: dataList,
dataId: 'dataId', //default: 'id'
dataPId: 'dataPId', //default: 'pId'
dataTitle: function(data) { //default: 'title'
return data.name + '(' + data.version + ')'
},
dataText: 'name',
// dataText: function(data) { //default: 'text'
// return data.name.length > 10 ? data.name.substr(0, 8) + '...' + '(' + data.version + ')' : data.name + '(' + data.version + ')'
// },
group: [{
mark: 'status', //data 中的分组属性
value: '0', //data 中的分组值
style: {
node: {
bgColor: '#2392f7',
textColor: '#fff'
}
}
}, {
mark: 'status',
value: '1',
style: {
node: {
bgColor: '#e74c3c', //default: style.node.bgColor
textColor: '#fff' //default: style.node.textColor
}
}
}],
style: {
drawingBoard: {
width: $('#topologyGraph').width()
},
node: {
bgColor: '#a5b9cc', //default: '#a5b9cc'
textColor: '#fff', //default: '#fff'
width: 120, //default: 120
height: 25 //default: 25
}
}
};
var nodeList = topologyTools.recursionGraphNodeData(options);
graph.create(nodeList);
});
graph.on('click', function(params) {
alert('graph.click');
});
function getData() {
return $.ajax({ url: 'src/data-untreated.json', dataType: "json" })
}
</script>
效果图
相比于v1.0有以下更新
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。