[TOC]

参考链接：

关系图RELATION-GRAPH - 图1

npm install --save relation-graph
  1. 组件封装 ```javascript 

2. 后端代码
```javascript
/**
 * 用户人脉关系数据DTO
 *
 * @author xjh
 * @date 2022/7/19 16:19
 */
@Data
public class UserRelationDataDTO {
    /**
     * 根用户
     */
    private String rootId;

    private List<UserRelationNodeDTO> nodes;

    private List<UserRelationLinkDTO> links;
}

/**
 * 用户人脉关系节点DTO
 *
 * @author xjh
 * @date 2022/7/19 16:22
 */
@Data
@AllArgsConstructor
@NoArgsConstructor
public class UserRelationNodeDTO {
    private String id;
    private String text;
    private String color;
    private String borderColor;
    /**
     * 用于筛选
     */
    private RelationNodeDataDTO data;
    private String innerHTML;
    private Boolean disableDrag;
}

/**
 * 用户人脉关系关联连线DTO
 *
 * @author xjh
 * @date 2022/7/19 16:22
 */
@Data
@AllArgsConstructor
@NoArgsConstructor
public class UserRelationLinkDTO {
    private String from;
    private String to;
    private String text;
    private String color;
    private String fontColor;
    private RelationLinkDataDTO data;
}

/**
 * 用户身份筛选DTO
 *
 * @author xjh
 * @date 2022/7/19 16:28
 */
@Data
public class RelationNodeDataDTO {
    private Integer merchantFlag;
    private Integer vipLevel;
    private Integer agentLevel;
    private Integer partnerLevel;
    private Integer servicerFlag;
    private Integer allowanceFlag;
    private Integer communityFlag;
}

/**
* 获取用户人脉关系DTO
*
* @param userId 用户id
* @return 结果
*/
@Override
public UserRelationDataDTO selectUserRelation(String userId) {
    // 初始化节点相关数据
    List<UserRelationNodeDTO> nodes = new ArrayList<>();
    List<UserRelationLinkDTO> links = new ArrayList<>();
    // 1.用户自身
    User user = userMapper.selectByPrimaryKey(userId);
    UserRelationNodeDTO selfUserRelationNodeDTO = new UserRelationNodeDTO(userId, user.getNickName(), "#ec6941", "#ff875e", new RelationNodeDataDTO() {{
        setMerchantFlag(user.getMerchantFlag());
        setVipLevel(user.getVipLevel());
        setAgentLevel(user.getAgentLevel());
        setPartnerLevel(user.getPartnerLevel());
        setServicerFlag(user.getFacilitatorFlag());
        setAllowanceFlag(user.getSubsidyFlag());
        setCommunityFlag(user.getBenefitFlag());
    }}, getInnerHtml(user.getAvatar(), user.getNickName()), true);
    nodes.add(selfUserRelationNodeDTO);
    // 2.直接下级
    List<UserRelationInferiorDTO> directInferiorList = userRelationMapper.listDirectInferior(userId);
    if (StringUtils.isNotEmpty(directInferiorList)) {
        for (UserRelationInferiorDTO directUser : directInferiorList) {
            UserRelationNodeDTO directUserRelationNodeDTO = new UserRelationNodeDTO(directUser.getUserId(), directUser.getNickName(), "#ec6941", "#ff875e", new RelationNodeDataDTO() {{
                setMerchantFlag(directUser.getMerchantFlag());
                setVipLevel(directUser.getVipLevel());
                setAgentLevel(directUser.getAgentLevel());
                setPartnerLevel(directUser.getPartnerLevel());
                setServicerFlag(directUser.getServicerFlag());
                setAllowanceFlag(directUser.getAllowanceFlag());
                setCommunityFlag(directUser.getCommunityFlag());
            }}, getInnerHtml(directUser.getAvatar(), directUser.getNickName()), false);
            nodes.add(directUserRelationNodeDTO);

            UserRelationLinkDTO directUserRelationLinkDTO = new UserRelationLinkDTO(userId, directUser.getUserId(), "邀请关系", "#d2c0a5", "#d2c0a5", new RelationLinkDataDTO() {{
                setType("");
            }});
            links.add(directUserRelationLinkDTO);
        }
    }
    // 3.下下级
    List<UserRelationInferiorDTO> indirectInferiorList = userRelationMapper.listIndirectInferior(userId);
    if (StringUtils.isNotEmpty(indirectInferiorList)) {
        for (UserRelationInferiorDTO indirectUser : indirectInferiorList) {
            UserRelationNodeDTO indirectUserRelationNodeDTO = new UserRelationNodeDTO(indirectUser.getUserId(), indirectUser.getNickName(), "#ec6941", "#ff875e", new RelationNodeDataDTO() {{
                setMerchantFlag(indirectUser.getMerchantFlag());
                setVipLevel(indirectUser.getVipLevel());
                setAgentLevel(indirectUser.getAgentLevel());
                setPartnerLevel(indirectUser.getPartnerLevel());
                setServicerFlag(indirectUser.getServicerFlag());
                setAllowanceFlag(indirectUser.getAllowanceFlag());
                setCommunityFlag(indirectUser.getCommunityFlag());
            }}, getInnerHtml(indirectUser.getAvatar(), indirectUser.getNickName()),false);
            nodes.add(indirectUserRelationNodeDTO);

            UserRelationLinkDTO indirectUserRelationLinkDTO = new UserRelationLinkDTO(indirectUser.getInviterId(), indirectUser.getUserId(), "邀请关系", "#d2c0a5", "#d2c0a5", new RelationLinkDataDTO() {{
                setType("");
            }});
            links.add(indirectUserRelationLinkDTO);
        }
    }

    UserRelationDataDTO userRelationDataDTO = new UserRelationDataDTO();
    userRelationDataDTO.setRootId(userId);
    userRelationDataDTO.setNodes(nodes);
    userRelationDataDTO.setLinks(links);

    return userRelationDataDTO;
}

private String getInnerHtml(String avatar, String nickName) {
    return "<div class='c-my-node' style='background-image:url(" + avatar
        + ");border:#ff875e solid 3px;'><div class='c-node-name' style='color:#282c34'>" + nickName + "</div></div>";
    }
  1. 使用demo ```javascript

    ```