后端大熊猫族谱图（树状图）接口实现

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

我是新手，大神跳过这篇文章。
树状图我们用的是echats来实现，我负责的是项目的后端，只讲接口
下面图1就是我们项目的最终结果图
图1 族谱图

一、Echats是什么？

Echarts是一个基于JavaScript的开源可视化库，由百度开发和维护。它可以用于创建各种交互式的图表和数据可视化，包括折线图、柱状图、饼图、散点图等等。Echarts具有丰富的功能和灵活的配置选项，可以轻松地定制图表样式和交互行为。

二、使用步骤

1.找到前端需要的上传格式

Echats提供了很多模板，树状图的也是有的，我去官网找到了一款树状图的模板，https://echarts.apache.org/examples/zh/editor.html?c=tree-basic
这个连接是想要的模板，其他的我们后端不用管，我们只需要提供data里面的内容。
图2 所需内容格式图

2.写数据

首先，根据图2，我们可以看的到，他需要的内容是有递归的，children类里面除了name以外还有children，这个时候我们就要联想图1了，很容易联想到我们可以这样来实现，孩子节点连接着父亲节点和母亲节点，然后虽然虽是父亲或者母亲，但他终究也是孩子节点，可以用同样的结构。根据以上观点，我们先定义出下面这个结构

public class zupu {
        public String name;
        public List<zupu> parent;
    }

然后再看看怎么利用这个类加上我们的逻辑开始写代码，代码如下

 public zupu digui(FamilyInfo f) {
        String name = f.getName();
        zupu zupu = new zupu();
        zupu.name = name;
        QueryWrapper<FamilyInfo> wrapper1 = new QueryWrapper();
        wrapper1.eq("number", f.getFemaleNumber());
        //获取该熊猫编号的母亲，如果有的话就添加进族谱里面，并且对该母亲进行同样的操作
        List<FamilyInfo> fi = familyInfoService.list(wrapper1);
        if (!fi.isEmpty()) {
            zupu.parent = new ArrayList<>();
            zupu.parent.add(digui(fi.get(0)));
        }
        QueryWrapper<FamilyInfo> wrapper2 = new QueryWrapper();
        wrapper2.eq("number", f.getParentNumber());
        List<FamilyInfo> fi1 = familyInfoService.list(wrapper2);
        //获取该熊猫编号的父亲，如果有的话就添加进族谱里面，并且对该父亲进行同样的操作
        if (!fi1.isEmpty()) {
            if (zupu.parent == null) {
                zupu.parent = new ArrayList<>();
            }
            zupu.parent.add(digui(fi1.get(0)));
        }
        return zupu;
    }  

就是查询他有没有父亲母亲，有的话加入到链表中，下面我们用方法开始递归这个方法。代码如下：

public List<zupu> huoqu() {
        List<FamilyInfo> f = familyInfoService.list();
        List<zupu> zp = new ArrayList<>();
        for (FamilyInfo f1 : f) {
            zupu z = digui(f1);
            zp.add(z);
        }
        return zp;
    }

最终的返回数据类型如图3
图 3

总结

先找到所需的数据，然后定义一个数据，然后用逻辑执行单次的，最后递归一下。