前端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>
