springboot + echarts 树图 实现

springboot + echarts 树图 实现

实现效果图如下：

1.数据库结构

2.代码实现
算法是利用递归算法来实现的。

Controller（业务逻辑写在service也可以，便于展示直接写在Controller中）

    /**
     * 3.测试3 爸爸
     */
    @RequestMapping("/test1")
    @ResponseBody
    public JSONObject createTreeJsonBytableNameAndParentId(String pid) throws Exception {
        Map<String, Object> map = new HashMap<String, Object>();
        List<Map<String, Object>> list = new ArrayList<Map<String,Object>>();


        List<Map<String,String>> lists = testjsonService.selectAll(pid);
        for (Map<String,String> msp : lists) {
            map = new HashMap<String, Object>();
            List<Map<String, Object>> list_children = new ArrayList<Map<String,Object>>();
            String id = msp.get("id");
            map.put("name",msp.get("name"));
            list_children = createTreeChildJson(id);
            if (list_children.size()>0) {
                map.put("children", list_children);
            }
            list.add(map);
        }
        String a  =JSON.toJSONString(list);
        String b = a.substring(1,a.length()-1);

        JSONObject jsStr = JSONObject.parseObject(b);
        System.out.println(b);
/*        return JSON.toJSONString(list, SerializerFeature.PrettyFormat, SerializerFeature.WriteMapNullValue,
                SerializerFeature.WriteDateUseDateFormat);*/
        return jsStr;
    }

    /**
     * 4.儿子
     */
    private List<Map<String, Object>> createTreeChildJson(String pid) throws Exception {
        Map<String, Object> map = new HashMap<String, Object>();
        List<Map<String, Object>> list = new ArrayList<Map<String,Object>>();

        List<Map<String,String>> lists = testjsonService.selectAll(pid);
        for (Map<String,String> msp : lists) {
            map = new HashMap<String, Object>();
            List<Map<String, Object>> list_children = new ArrayList<Map<String,Object>>();
            String id = msp.get("id");
            map.put("name",msp.get("name"));
//            map.put("value",msp.get("id"));
            list_children = createTreeChildJson(id);
            if (list_children.size()>0) {
                map.put("children", list_children);
            }else{
                map.put("value",msp.get("id"));
            }
            list.add(map);
        }
        return list;
    }

entity

@Data
public class testjsontree implements Serializable {
    private String id;            //id
    private String pid;           //父id
    private String name;       //名字
}

Mapper

    /**
     * 1.测试treeJson
     */
    @Select("<script>" +
            "select * from testjsontree" +
            "<where>" +
            "<if test=\"pid != -1\"> pid = #{pid} </if> " +
            "<if test=\"pid == -1\"> pid = -1 </if> " +
            "</where>" +
            "</script>")
    List<Map<String,String>> selectAll(String pid);

前端

    <script type="text/javascript">
			var dom = document.getElementById("container");
			var myChart = echarts.init(dom);
			var app = {};
			
			/*var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/data/flare.json';*/
            var ROOT_PATH = 'http://localhost:8080/test1?pid=-1';
			var option;
			myChart.showLoading();
			$.get(ROOT_PATH , function (data) {
			    console.log(data);
                console.log(data);
			    myChart.hideLoading();
                
                data.children.forEach(function (datum, index) {
                    index % 2 === 0 && (datum.collapsed = true);
                });
                
			
			    myChart.setOption(option = {
			        tooltip: {
			            trigger: 'item',
			            triggerOn: 'mousemove'
			        },
			        series: [
			            {
			                type: 'tree',
			
			                data: [data],
			
			                top: '1%',
			                left: '7%',
			                bottom: '1%',
			                right: '20%',
			
			                symbolSize: 12,
			
			                label: {
			                    position: 'left',
			                    verticalAlign: 'middle',
			                    align: 'right',
			                    fontSize: 15
			                },
			
			                leaves: {
			                    label: {
			                        position: 'right',
			                        verticalAlign: 'middle',
			                        align: 'left'
			                    }
			                },
			
			                emphasis: {
			                    focus: 'descendant'
			                },
			
			                expandAndCollapse: true,
			                animationDuration: 550,
			                animationDurationUpdate: 750
			            }
			        ]
			    });
			});
			
			if (option && typeof option === 'object') {
			    myChart.setOption(option);
			}

        </script>

坑点：
1.递归json是一个难点。
2.最后输出要输出一个JsonObject，如果输出JsonString的话，前端就会因为获取不到他的children节点而报错。
3.网上找了很久一直没有找到特别完整的教程，此处就贡献给了各位。

controller参考自：
java递归算法实现拼装树形JSON数据

（若侵权请马上联系，配合立删，带来不便敬请谅解）