The echarts tree diagram uses recursion to return a json string at the controller layer

Show the js code first:

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('推广用户详情')" />
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
<th:block th:include="include :: footer" />
<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    var prefix = ctx + "business/user";
    myChart.showLoading();
    $.get(prefix+"/promotedUserXiangQing/"+[[${userId}]], function (data) {
        myChart.hideLoading();
        console.log(data);
        echarts.util.each(data.children, function (datum, index) {
            index % 2 === 0 && (datum.collapsed = true);
        });

        myChart.setOption(option = {
            tooltip: {
                trigger: 'item',
                triggerOn: 'mousemove'
            },
            series:[
                {
                    type: 'tree',

                    data: data,

                    left: '2%',
                    right: '2%',
                    top: '8%',
                    bottom: '20%',

                    symbol: 'emptyCircle',

                    orient: 'vertical',

                    expandAndCollapse: true,

                    label: {
                        position: 'top',
                        // rotate: -90,
                        verticalAlign: 'middle',
                        align: 'right',
                        fontSize: 9
                    },

                    leaves: {
                        label: {
                            position: 'bottom',
                            rotate: -90,
                            verticalAlign: 'middle',
                            align: 'left'
                        }
                    },

                    animationDurationUpdate: 750
                }
            ]
        });
    });;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
</body>
</html>

Then there is the controller layer code:

 @GetMapping("/promotedUserXiangQing/{userId}")
    @ResponseBody
    public List<UserTreeVo> promotedUserXiangQing(@PathVariable("userId") Long userId) {
        User user = userService.selectUserById(userId);
        List<UserTreeVo> maps = new ArrayList<>();
        if (user != null) {
            //此处是加载第一次的name和children，之后就是递归获取children内的内容
            UserTreeVo userTreeVo = new UserTreeVo();
            userTreeVo.setName(user.getUsername());
            userTreeVo.setChildren(getChildren(user));
            maps.add(userTreeVo);
        }
        return maps;
    }

    public List<UserTreeVo> getChildren(User user) {
        //递归法，设置children，此法也可用在用户层级的树状图展示。主要是echarts需要的结构是name
        //和children数组
        List<UserTreeVo> maps = new ArrayList<>();
        //这里的InvitationMemberId类似PID了，
        user.setInvitationMemberId(user.getUserId());
        //这里的user实际上只有setInvitationMemberId这个属性在sql语句的where条件后的，对了还有            
        //isDelete来查询逻辑未删除的行。
        List<User> treeMenu = userService.getUserList(user);
        if (treeMenu != null && treeMenu.size() > 0) {
            for (User menu : treeMenu) {
                UserTreeVo userTreeVo = new UserTreeVo();
                userTreeVo.setName(menu.getUsername());
                userTreeVo.setChildren(getChildren(menu));
                maps.add(userTreeVo);
            }
        }
        return maps;
    }

public class UserTreeVo implements Serializable {
 
    private String name;
 
    private List<UserTreeVo> children;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public List<UserTreeVo> getChildren() {
        return children;
    }
 
    public void setChildren(List<UserTreeVo> children) {
        this.children = children;
    }
}

The echarts tree diagram uses recursion to return a json string at the controller layer

Guess you like