ant G6 树图的 一般配置 (需补充)
ant + vueG6 树图的 一般配置初始化加载时候, 默认展开第几级(给每项加 collapsed 属性)G6.Util.traverseTree(sourceData, function(item) {if( item.id !== 1) {item.collapsed = true}});gr...
·
ant + vue G6 树图的 一般配置
- 初始化加载时候, 默认展开第几级(给每项加 collapsed 属性)
G6.Util.traverseTree(sourceData, function(item) {
if( item.id !== 1) {
item.collapsed = true
}
});
graph.data(sourceData);
graph.render();
graph.fitView();
- 修改每个树层级的颜色
G6.registerNode('tree-node', {
drawShape: function drawShape(cfg, group) {
//自定义颜色 。这里用switch函数,暂时没改
let attrs = { }
// 对结构层级进行判断 level 为后端提供的参数
if(cfg.level === 1 ) {
attrs= {
fill: '#F3F6FD',
stroke: '#3054EB'
}
}
else if(cfg.level === 2){
attrs= {
fill: '#FFF5F2',
stroke: '#FF3000'
}
}
else if(cfg.level === 3){
attrs= {
fill: '#F3F6FD',
stroke: '#3054EB'
}
}else if(cfg.level === 4 ){
attrs= {
fill: '#F3F6FD',
stroke: '#F77C00'
}
}else if ( cfg.level === 5 ){
attrs= {
fill: '#F2F9FF',
stroke: '#0070D2'
}
}else if( cfg.level === 6 ) {
attrs= {
fill: '#FFFCF9',
stroke: '#F77C00'
}
}else {
attrs= {
fill: '#F2F9FF',
stroke: '#0070D2'
}
}
//边框 和 背景色
const rect = group.addShape('rect', {
attrs: attrs
});
const content = cfg.name.replace(/(.{19})/g, '$1\n');
// 文字颜色 -------------------------------------------------
const text = group.addShape('text', {
attrs: {
text: content,
x: 0,
y: 0,
textAlign: 'center',
textBaseline: 'middle',
fill: attrs.stroke
}
});
const bbox = text.getBBox();
//marker 颜色
const hasChildren = cfg.children && cfg.children.length > 0;
if (hasChildren) {
group.addShape('marker', {
attrs: {
x: bbox.maxX + 20,
y: bbox.minX + bbox.height / 2 - 6,
// r: 6,
// symbol: COLLAPSE_ICON,
stroke: attrs.stroke,
lineWidth: 1
},
className: 'collapse-icon'
});
}
rect.attr({
x: bbox.minX - 4,
y: bbox.minY - 6,
width: bbox.width + (hasChildren ? 15 : 15),
height: bbox.height + 12
});
return rect;
}
}, 'single-shape');
//边的颜色
let i = ''
graph.edge(function( data ) {
let num = data.target._cfg.model.level
switch (num) {
case 2 :
i = '业主'
break;
case 3 :
i = '管理'
break;
case 4 :
i = '监理'
break;
case 5 :
i = '承建'
break;
case 6 :
i = '标段'
break;
case 7 :
i = '分包'
break;
}
return {
shape: 'cubic-horizontal',
color: '#FF3000',
label: i
};
});
更多推荐
已为社区贡献3条内容
所有评论(0)