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

最近在做一个项目中涉及到了百度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
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
以下是一个使用 Echarts type 为 tree 的树形关系实现图片节点连接的示例代码: ```javascript // HTML <div id="chart" style="width: 600px; height: 400px;"></div> // JavaScript // 假设有以下图片节点数据 var data = { name: 'Root', children: [ { name: 'Node 1', image: 'node1.png', children: [ { name: 'Node 1.1', image: 'node1_1.png' }, { name: 'Node 1.2', image: 'node1_2.png' } ] }, { name: 'Node 2', image: 'node2.png', children: [ { name: 'Node 2.1', image: 'node2_1.png' }, { name: 'Node 2.2', image: 'node2_2.png' } ] } ] }; // 初始化 Echarts 实例 var chart = echarts.init(document.getElementById('chart')); // 配置项 var option = { series: [ { type: 'tree', data: [data], top: '10%', left: '10%', bottom: '10%', right: '10%', symbol: 'image://', // 图片节点使用 image 符号 symbolSize: [60, 60], // 图片节点的大小 layout: 'orthogonal', // 布局方式为正交布局 emphasis: { focus: 'descendant' // 强调样式为当前节点及其后代节点 }, label: { position: 'inside', verticalAlign: 'middle', align: 'center', fontSize: 14 }, leaves: { label: { position: 'right', verticalAlign: 'middle', align: 'left', fontSize: 14 } }, expandAndCollapse: true, // 可以展开和折叠节点 animationDuration: 550, animationDurationUpdate: 750 } ] }; // 使用配置项绘制图表 chart.setOption(option); ``` 以上代码示例,通过配置项的 `type: 'tree'`,使用图片作为节点的符号,并设置了图片节点的大小、布局方式、节点样式等属性。可以根据实际需求进行调整和扩展。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

十点数据

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值