echarts中设置tree的子节点的点击事件和控制子节点是否展开

效果图

子节点事件–重要的代码

一、 myChart.on("click", clickFun);
二、 function clickFun(param) {
    if (typeof param.seriesIndex == 'undefined') {
        return;
    }
    if (param.type == 'click') {
        alert((param));
    }
}

子节点展开–重要的代码

	this.datanode.children.forEach(function(datum, index) {
				//index等于谁谁隐藏，不等于展开
				// data中collapsed的值，false为显示，true为隐藏
				index != 0 && (datum.collapsed = true);
			});

某一个子节点展开，其它子节点收缩–重要的代码

		this.myChart.setOption(option);
			if (option && typeof option === "object") {
				this.myChart.setOption(option, true);
				this.myChart.on("mousedown", e => {
					const name = e.data.name;
					const curNode = this.myChart._chartsViews[0]._data.tree._nodes.find(
						item => {
							return item.name === name;
						}
					);
					const depth = curNode.depth;
					const curIsExpand = curNode.isExpand;
					this.myChart._chartsViews[0]._data.tree._nodes.forEach(
						(item, index) => {
							if (
								item.depth === depth &&
								item.name !== name &&
								!curIsExpand
							) {
								item.isExpand = false;
							}
						}
					);
				});
			}

完整代码

	// 树图渲染
		drawLine() {
			// 基于准备好的dom，初始化echarts实例
			this.myChart = echarts.init(document.getElementById(this.elId));
			// 绘制图表
			this.myChart.showLoading();
			if (this.datanode.name == undefined) {
				return;
			}
			var data = this.datanode;
			this.datanode.children.forEach(function(datum, index) {
				//index等于谁谁隐藏，不等于展开
				// data中collapsed的值，false为显示，true为隐藏
				index != 0 && (datum.collapsed = true);
			});
			this.myChart.hideLoading();
			data.label = { color: "#979797" }; //单个节点的样式改造
			// data.itemStyle = { color: 'rgba(253, 252, 252, 0);' } //单个节点的样式改造
			let option = {
				tooltip: {
					trigger: "item",
					triggerOn: "mousemove"
				},
				series: [
					{
						type: "tree",
						data: [data],
						top: "1%",
						left: "7%",
						bottom: "1%",
						right: "20%",
						symbolSize: 8,
						expandAndCollapse: true,
						initialTreeDepth: 2, //节点的深度
						label: {
							position: "left",
							verticalAlign: "middle",
							align: "right",
							fontSize: 12,
							color: "#89DEFF" //字体颜色
						},
						itemStyle: {
							color: "#89DEFF" //选中节点图标颜色
						},
						lineStyle: {
							color: "#979797" //线的颜色
						},

						leaves: {
							label: {
								position: "right",
								verticalAlign: "middle",
								align: "left",
								color: "#979797" //文字未选中的颜色
							},
							itemStyle: {
								borderWidth: 1,
								color: "#979797" //节点图标未选择颜色
							}
						},
						expandAndCollapse: true,
						animationDuration: 550,
						animationDurationUpdate: 750
					}
				]
			};
			this.myChart.setOption(option);
			if (option && typeof option === "object") {
				this.myChart.setOption(option, true);
				this.myChart.on("mousedown", e => {
					const name = e.data.name;
					const curNode = this.myChart._chartsViews[0]._data.tree._nodes.find(
						item => {
							return item.name === name;
						}
					);
					const depth = curNode.depth;
					const curIsExpand = curNode.isExpand;
					this.myChart._chartsViews[0]._data.tree._nodes.forEach(
						(item, index) => {
							if (
								item.depth === depth &&
								item.name !== name &&
								!curIsExpand
							) {
								item.isExpand = false;
							}
						}
					);
				});
			}
			this.myChart.on("click", params => {
				this.clickFun(params);
			});
		},
		//子节点索引
		clickFun(params) {
			this.curFlag = !this.curFlag;
			if (typeof params.seriesIndex == "undefined") {
				return;
			}
			if (params.type == "click") {
				this.searchData.industryChainNodeId = params.data.id;
				this.curIndex = params.data.index;
				this.getLitterAll();
			}
		},

可以在echarts官网的示例模板中进行调试

参考链接

链接: https://blog.csdn.net/rain_web/article/details/80386247.
链接: https://echarts.apache.org/examples/zh/editor.html?c=tree-basic.
链接: https://www.cnblogs.com/moxihuishou/p/14195001.html.
链接: https://blog.csdn.net/xiaolonggezte/article/details/88833560?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-3&spm=1001.2101.3001.4242.
链接: https://blog.csdn.net/weixin_39645041/article/details/111546858.
链接: https://blog.csdn.net/cyb2473541293/article/details/110227987.
链接: https://blog.csdn.net/weixin_45673642/article/details/105555043.