|
@@ -12,52 +12,42 @@ const data = {
|
|
|
{
|
|
|
id: '0',
|
|
|
label: 'Zabbix server linux',
|
|
|
- cluster: 'a',
|
|
|
},
|
|
|
{
|
|
|
id: '1',
|
|
|
label: 'xybclinux',
|
|
|
- cluster: 'b',
|
|
|
},
|
|
|
{
|
|
|
id: '2',
|
|
|
label: 'Zabbix server tomcat',
|
|
|
- cluster: 'b',
|
|
|
},
|
|
|
{
|
|
|
id: '3',
|
|
|
label: 'Zabbix server mysql',
|
|
|
- cluster: 'b',
|
|
|
},
|
|
|
{
|
|
|
id: '4',
|
|
|
label: 'tomcat pilot',
|
|
|
- cluster: 'c',
|
|
|
},
|
|
|
{
|
|
|
id: '5',
|
|
|
label: 'xybcmysql',
|
|
|
- cluster: 'c',
|
|
|
},
|
|
|
{
|
|
|
id: '6',
|
|
|
label: 'Xybc',
|
|
|
- cluster: 'a',
|
|
|
},
|
|
|
{
|
|
|
id: '7',
|
|
|
label: 'linux pilot',
|
|
|
- cluster: 'd',
|
|
|
},
|
|
|
{
|
|
|
id: '8',
|
|
|
label: 'Zabbix server',
|
|
|
- cluster: 'd',
|
|
|
},
|
|
|
{
|
|
|
id: '9',
|
|
|
label: 'pilot alive',
|
|
|
- cluster: 'e',
|
|
|
},
|
|
|
],
|
|
|
edges: [
|
|
@@ -129,19 +119,19 @@ function draw() {
|
|
|
const nodes = data.nodes;
|
|
|
const clusterMap = new Map();
|
|
|
let clusterId = 0;
|
|
|
- nodes.forEach(function (node) {
|
|
|
- // cluster
|
|
|
- if (node.cluster && clusterMap.get(node.cluster) === undefined) {
|
|
|
- clusterMap.set(node.cluster, clusterId);
|
|
|
- clusterId++;
|
|
|
- }
|
|
|
- const cid = clusterMap.get(node.cluster);
|
|
|
- if (!node.style) {
|
|
|
- node.style = {};
|
|
|
- }
|
|
|
- node.style.fill = colors[cid % colors.length];
|
|
|
- node.style.stroke = strokes[cid % strokes.length];
|
|
|
- });
|
|
|
+ // nodes.forEach(function (node) {
|
|
|
+ // // cluster
|
|
|
+ // if (node.cluster && clusterMap.get(node.cluster) === undefined) {
|
|
|
+ // clusterMap.set(node.cluster, clusterId);
|
|
|
+ // clusterId++;
|
|
|
+ // }
|
|
|
+ // const cid = clusterMap.get(node.cluster);
|
|
|
+ // if (!node.style) {
|
|
|
+ // node.style = {};
|
|
|
+ // }
|
|
|
+ // node.style.fill = colors[cid % colors.length];
|
|
|
+ // node.style.stroke = strokes[cid % strokes.length];
|
|
|
+ // });
|
|
|
|
|
|
const container = chartRef.value
|
|
|
const width = container.scrollWidth;
|
|
@@ -154,20 +144,38 @@ function draw() {
|
|
|
default: ['drag-canvas', 'drag-node'],
|
|
|
},
|
|
|
layout: {
|
|
|
- type: 'fruchterman',
|
|
|
- gravity: 10,
|
|
|
- speed: 5,
|
|
|
- clustering: true,
|
|
|
+ type: 'radial',
|
|
|
+ unitRadius: 70,
|
|
|
+ preventOverlap: true,
|
|
|
+ strictRadial: false,
|
|
|
},
|
|
|
animate: true,
|
|
|
defaultNode: {
|
|
|
- size: 20,
|
|
|
+ size: 40,
|
|
|
+ style: {
|
|
|
+ fill: '#fa8c16',
|
|
|
+ stroke: '#000',
|
|
|
+ lineWidth: 0
|
|
|
+ },
|
|
|
+ labelCfg: {
|
|
|
+ style: {
|
|
|
+ fill: '#fff',
|
|
|
+ fontSize: 12,
|
|
|
+ // background: {
|
|
|
+ // fill: '#ffffff',
|
|
|
+ // stroke: '#9EC9FF',
|
|
|
+ // padding: [2, 2, 2, 2],
|
|
|
+ // radius: 2,
|
|
|
+ // },
|
|
|
+ },
|
|
|
+ position: 'bottom',
|
|
|
+ },
|
|
|
},
|
|
|
defaultEdge: {
|
|
|
style: {
|
|
|
endArrow: {
|
|
|
path: 'M 0,0 L 8,4 L 8,-4 Z',
|
|
|
- fill: '#e2e2e2',
|
|
|
+ fill: '#fff',
|
|
|
},
|
|
|
},
|
|
|
},
|
|
@@ -181,7 +189,6 @@ function draw() {
|
|
|
if (!container || !container.scrollWidth || !container.scrollHeight) return;
|
|
|
graph.changeSize(container.scrollWidth, container.scrollHeight);
|
|
|
};
|
|
|
-
|
|
|
}
|
|
|
|
|
|
</script>
|