ECharts中From Left to Right Tree树形图后台数据构造与节点点击事件

最近在做一个项目中涉及到了百度ECharts中From Left to Right Tree树形图的使用，。虽然ECharts使用有些年头了，但是在后台数据构造时还是浪费了一点时间。 现在记录一下，算是留做备份吧。同时也给需要的童鞋做个参考。

后端代码如下：

一：树节点对象：

class Node {
    public String id;
    public String name;
    public String value;
    public String parentId;
    public Node(String id, String name, String parentId, String value) {
        this.id = id;
        this.name = name;
        this.value = value;//可以用来保存节点记录的ID，以便后续操作；
        this.parentId = parentId;
    }
    public String getValue() {
        return value;
    }
    public void setValue(String value) {
        this.value = value;
    }
    public String getId() {
        return id;
    }
    public void setId(String id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getParentId() {
        return parentId;
    }
    public void setParentId(String parentId) {
        this.parentId = parentId;
    }
}

二：指定节点所有子节点获取方法：

    /**
     * 获取当前节点的所有子节点
     * 
     * @param nodeId 
     *				待获取子节点信息的节点ID
     * @param nodes 
     * 			所有节点集合；
     * @return
     */
    public static List<Node> getChildNodes(String nodeId,
            Map<String, Node> nodes) {
        List<Node> list = new ArrayList<Node>();
        for (String key : nodes.keySet()) {
            if (nodes.get(key).getParentId().equals(nodeId)) {
                list.add(nodes.get(key));
            }
        }
        return list;
    }
}

三：通过递归方式，构造树形图json数据；

/**
 * 
 * 递归处理 数据库树结构数据->树形json
 * 
 * @param nodeId
 * 
 * @param nodes
 * 
 * @return
 */
public static JSONArray getNodeJson(String nodeId, Map<String, Node> nodes) {
	// 当前层级当前node对象
	// 当前层级当前点下的所有子节点（实战中不要慢慢去查,一次加载到集合然后慢慢处理）
	List<Node> childList = getChildNodes(nodeId, nodes);
	JSONArray childTree = new JSONArray();
	for (Node node : childList) {
		JSONObject o = new JSONObject();
		o.put("name", node.getName());
		o.put("value", node.getValue());
		o.put("id", node.getId());
		JSONArray childs = getNodeJson(node.getId(), nodes); // 递归调用该方法
		if (!childs.isEmpty()) {
			o.put("children", childs);
		}
		childTree.fluentAdd(o);
	}
	return childTree;
}

四：使用示例：

@SuppressWarnings("unchecked")
@RequestMapping(value = "/getTreeData", method = { RequestMethod.POST,
        RequestMethod.GET })
public void getTreeData(HttpServletRequest request,
            HttpServletResponse response) throws Exception {
        Long id = Long.parseLong(request.getParameter("id"));
        Temple tem = templeService.getByProerties("id", id);

        Map<String, Node> nodes = new HashedMap();
        nodes.put("1", new Node("1", tem.getTempName(), "0", "0"));
        nodes.put("2", new Node("2", "活动", "1", "0"));
        nodes.put("3", new Node("3", "人员", "1", "0"));
        nodes.put("4", new Node("4", "场所", "1", "0"));
        nodes.put("5", new Node("5", "文物", "1", "0"));
        // 查询活动信息；
        List<Relic> relicList = relicService.queryByProerties("relicTempleId",
                id.intValue());
        for (Relic pl : relicList) {
            nodes.put("5_" + pl.getId(), new Node("5_" + pl.getId(), pl
                    .getRelicName(), "5", pl.getId() + ""));
        }
        // 查询活动信息；
        List<Action> actionList = actiionService.queryByProerties(
                "actionTempleId", id.intValue());
        for (Action pl : actionList) {
            nodes.put("2_" + pl.getId(), new Node("2_" + pl.getId(), pl
                    .getActionName(), "2", pl.getId() + ""));
        }

        // 查询场所信息；
        List<Place> pList = placeService.queryByProerties("placeTempleId", id
                .intValue());
        for (Place pl : pList) {
            nodes.put("4_" + pl.getId(), new Node("4_" + pl.getId(), pl
                    .getPlaceName(), "4", pl.getId() + ""));
        }

        // 人员信息；
        List<Monks> monksList = monksService.queryByProerties("monksTempleId",
                id.intValue());
        for (Monks pl : monksList) {
            nodes.put("3_" + pl.getId(), new Node("3_" + pl.getId(), pl
                    .getMonksLegalName(), "3", pl.getId() + ""));
        }
        writeJSON(response, JSON.toJSONString(getNodeJson("0", nodes)));
}

前端代码如下：

一：树形图

MainElement.search = function() {
	url = "http://127.0.0.1/sms/mainElement/getTreeData?id=" + nodeId;
	data = MainElement.getData(url)
	var myChart = echarts.init(document.getElementById('treeChart'));
	myChart.on("click", MainElement.clickFun);
	myChart.showLoading();
	myChart.hideLoading();
	myChart.setOption(option = {
		tooltip : {
			trigger : 'item',
			triggerOn : 'mousemove'
		},
		legend : {
			orient : 'vertical',
			data : [ {
				name : 'tree2',
				icon : 'rectangle'
			} ],
			borderColor : '#c23531'
		},
		series : [ {
			type : 'tree',
			data : data,
			top : '15%',
			left : '15%',
			bottom : '15%',
			right : '15%',
			symbolSize : 15,
			label : {
				position : 'left',
				verticalAlign : 'middle',
				align : 'right'
			},
			leaves : {
				label : {
					position : 'right',
					verticalAlign : 'middle',
					align : 'left'
				}
			},
			expandAndCollapse : true,
			animationDuration : 550,
			animationDurationUpdate : 750
		} ]
	});
};

二：节点点击事件处理

1：添加点击事件

	var myChart = echarts.init(document.getElementById('treeChart'));//初始化echarts对象；
	myChart.on("click", MainElement.clickFun);//给节点添加点击事件；

2：点击操作逻辑

// 关键点！
MainElement.clickFun = function(param) {
	if (typeof param.seriesIndex == 'undefined') {
		return;
	}
	console.log(param.data.id);
	if (param.type == 'click') {
		var nodeId = param.data.id;
		//添加自己的业务处理逻辑；
	}
}