ant G6 树图的 一般配置 （需补充）

ant + vue G6 树图的 一般配置

1. 初始化加载时候， 默认展开第几级（给每项加 collapsed 属性）

G6.Util.traverseTree(sourceData, function(item) {
        if( item.id !== 1) {
          item.collapsed = true
        }
      });
      graph.data(sourceData);
      graph.render();
      graph.fitView();

2. 修改每个树层级的颜色

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
        };
      });