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

Web开发 专栏收录该内容
7 篇文章 0 订阅

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

后端代码如下:

一:树节点对象:

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;
		//添加自己的业务处理逻辑;
	}
}

#ECharts #树形图 #点击事件 #Tree

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 我行我“速” 设计师:Amelia_0503 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值