最近在做一个项目中涉及到了百度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 getChildNodes(String nodeId, Map nodes) { List list = new ArrayList(); 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 nodes) {// 当前层级当前node对象// 当前层级当前点下的所有子节点(实战中不要慢慢去查,一次加载到集合然后慢慢处理)List 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 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 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 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 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 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;//添加自己的业务处理逻辑;}}
#ECharts #树形图 #点击事件 #Tree