前端html代码,这个可以从官网下载示例来改:

<!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=tree-vertical
-->
<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <meta charset="utf-8">
    </head>
    <body style="height: 100%; margin: 0">
        <div id="container" style="height: 100%"></div>

        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.1/dist/echarts.min.js"></script>
        <!-- Uncomment this line if you want to dataTool extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.1/dist/extension/dataTool.min.js"></script>
        -->
        <!-- Uncomment this line if you want to use gl extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
        -->
        <!-- Uncomment this line if you want to echarts-stat extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
        -->
        <!-- Uncomment this line if you want to use map
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.1/map/js/china.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.1/map/js/world.js"></script>
        -->
        <!-- Uncomment these two lines if you want to use bmap extension
        <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@{{version}}/dist/extension/bmap.min.js"></script>
        -->

        <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};

var option;

var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples'

myChart.showLoading();
//$.get(ROOT_PATH + '/data/asset/data/flare.json', function (data) {
$.get("https://www.1024sky.cn/zupu/person/tree", function (data) {  
  myChart.hideLoading();
  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: 0,
            verticalAlign: 'middle',
            align: 'right',
            fontSize: 9
          },
          leaves: {
            label: {
              position: 'bottom',
              rotate: 0,
              verticalAlign: 'middle',
              align: 'left'
            }
          },
          animationDurationUpdate: 750
        }
      ]
    })
  );
});

if (option && typeof option === 'object') {
    myChart.setOption(option);
}

        </script>
    </body>
</html>

后端:
java controller类:

/**
	 * 生成树形
	 *
	 * @param blogTheme
	 * @param pageNo
	 * @param pageSize
	 * @param req
	 * @return
	 */
	@AutoLog(value = "tree-生成树形")	
	@GetMapping(value = "/tree")
	public List<ZupuPersonVO>  tree() {		
		List<ZupuPersonVO> list = zupuPersonService.listVO();
		log.info("list size:"+list.size());
		TreeBuilder treeBuilder=new TreeBuilder(list);
		//String json=treeBuilder.buildJSONTree();
		List<ZupuPersonVO> treelist=treeBuilder.buildTree();
		//String tmp=json.substring(1, json.length()-1);
		
		return  treelist;
	}

实体类:

import java.io.Serializable;

import org.jeecgframework.poi.excel.annotation.Excel;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;

import cn.yangjz.system.aspect.annotation.Dict;
import lombok.Data;
import lombok.EqualsAndHashCode;
import lombok.experimental.Accessors;

/**
 * <p>
 * 族谱表
 * </p>
 *
 * @Author scott
 * @since 2018-12-20
 */
@Data
@EqualsAndHashCode(callSuper = false)
@Accessors(chain = true)
public class ZupuPerson implements Serializable {

    private static final long serialVersionUID = 1L;

    /**
     * id
     */
    @TableId(type = IdType.ASSIGN_ID)
    private String id;
    private String pid;
    /* '父ID',*/  
    private String name; /* '姓名' */
 
  
    
}

VO类:

import java.util.List;

import lombok.Data;
import lombok.EqualsAndHashCode;
import lombok.experimental.Accessors;

/**
 * <p>
 * 族谱表
 * </p>
 *
 */
@Data
@EqualsAndHashCode(callSuper = false)
@Accessors(chain = true)
public class ZupuPersonVO extends ZupuPerson {

    private static final long serialVersionUID = 1L; 
    private String value;
    private List<ZupuPersonVO> children;

    
}

树形类:

import java.util.ArrayList;
import java.util.List;

import com.alibaba.fastjson.JSON;

public class TreeBuilder {
	

    List<ZupuPersonVO> persons = new ArrayList<>();

    public  String buildTree(List<ZupuPersonVO> persons) {
        TreeBuilder treeBuilder = new TreeBuilder(persons);
        return treeBuilder.buildJSONTree();
    }

    public TreeBuilder() {}

    public TreeBuilder(List<ZupuPersonVO> persons) {
        super();
        this.persons = persons;
    }

    // 构建JSON树形结构
    public String buildJSONTree() {
        List<ZupuPersonVO> nodeTree = buildTree();
        String jsonStr = JSON.toJSONString(nodeTree);
        return jsonStr;
    }

    // 构建树形结构
    public List<ZupuPersonVO> buildTree() {
        List<ZupuPersonVO> treeNodes = new ArrayList<>();
        List<ZupuPersonVO> rootNodes = getRootNodes();
        for (ZupuPersonVO rootNode : rootNodes) {
            buildChildNodes(rootNode);
            treeNodes.add(rootNode);
        }
        return treeNodes;
    }

    // 递归子节点
    public void buildChildNodes(ZupuPersonVO node) {
        List<ZupuPersonVO> children = getChildNodes(node);
        if (!children.isEmpty()) {
            for (ZupuPersonVO child : children) {
                buildChildNodes(child);
            }
            node.setChildren(children);
        }
    }

    // 获取父节点下所有的子节点
    public List<ZupuPersonVO> getChildNodes(ZupuPersonVO pnode) {
        List<ZupuPersonVO> childNodes = new ArrayList<>();
        for (ZupuPersonVO n : persons) {
            if (pnode.getId().equals(n.getPid())) {
                childNodes.add(n);
            }
        }
        return childNodes;
    }

    // 判断是否为根节点
    public boolean rootNode(ZupuPersonVO node) {
        boolean isRootNode = true;
        for (ZupuPersonVO n : persons) {
            if (node.getPid().equals(n.getId())) {
                isRootNode = false;
                break;
            }
        }
        return isRootNode;
    }

    // 获取集合中所有的根节点
    public List<ZupuPersonVO> getRootNodes() {
        List<ZupuPersonVO> rootNodes = new ArrayList<>();
        for (ZupuPersonVO n : persons) {
            if (rootNode(n)) {
                rootNodes.add(n);
            }
        }
        return rootNodes;
    }    

}

Mapper.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="cn.yangjz.zupu.mapper.ZupuPersonMapper">

	<select id="listVO2" resultType="cn.yangjz.zupu.vo.ZupuPersonVO">
		select p.*, p.shuoming as value from  zupu_person p  where status = 0
	</select>
	
	<select id="listVO" resultType="cn.yangjz.zupu.vo.ZupuPersonVO">
		select p.id,p.pid,p.name, p.shuoming as value from  zupu_person p  where status = 0
	</select>

</mapper>