eachers中的树形图在点击其中某个子节点时关闭其他同级子节点
答案在代码末尾!!!!!
tubiaoinit(params: any) {
// 手动触发变化检测
this.changeDetectorRef.detectChanges();
if (this.myChart !== undefined) {
this.myChart.dispose();
}
this.myChart = echarts.init(this.pieChart?.nativeElement);
let data: any = {};
data = params;
let option = {
// tooltip: {
// trigger: 'item',
// triggerOn: 'mousemove'
// },
backgroundColor: 'transparent',
series: [
{
roam: true,
scaleLimit: {
min: 1
},
type: 'tree',
id: 0,
name: 'tree1',
data: [data],
// 垂直排列
// orient: 'vertical',
top: '10%',
left: '10%',
bottom: '22%',
right: '20%',
symbolSize: 7,
edgeShape: 'polyline',
edgeForkPosition: '63%',
initialTreeDepth: 3,
lineStyle: {
width: 2
},
label: {
backgroundColor: '#3084f0',
rotate: 0,
position: 'top',
verticalAlign: 'middle',
align: 'right',
fontSize: 16,
padding: 4,
color: '#191717',
borderRadius: [4, 4, 4, 4],
rich: {
img1: {
backgroundColor: {
image: 'assets/img/dianbiao2.png'
},
height: 27
}
},
formatter: function (param: any) {
var res = '';
res += `{img1|}${param.data.name}`;
return res;
}
},
leaves: {
label: {
backgroundColor: '#fff',
rotate: 0,
color: '#121010',
position: 'right',
verticalAlign: 'middle',
align: 'left',
fontSize: 12,
rich: {
img1: {
backgroundColor: {
image: 'none'
},
height: 20
}
},
formatter: function (param: any) {
var res = '';
res += `{img1|}${param.data.name}`;
return res;
}
}
},
emphasis: {
disable: true,
focus: 'none'
},
expandAndCollapse: true,
animationDuration: 550,
animationDurationUpdate: 750
}
]
};
this.myChart.setOption(option);
this.myChart.on('click', (param: any) => {
// console.log(param);
// if (typeof param.seriesIndex == 'undefined') {
// return;
// }
if (param.data.deviceId !== undefined && param.data.deviceId !== null && param.data.deviceId !== '') {
this.isVisible = true;
// 手动触发变化检测
this.changeDetectorRef.detectChanges();
this.showDianBiaoValue({ id: param.data.deviceId, name: param.data.name });
} else {
if (param.data.deviceId === '') {
this.message.create('warning', '此设备没有电表信息,还未启动!');
}
}
});
//下面的代码直接复制使用这里是实现功能的代码
if (option && typeof option === 'object') {
this.myChart.setOption(option, true);
this.myChart.on('mousedown', (e: any) => {
const name = e.data.name;
const curNode = this.myChart._chartsViews[0]._data.tree._nodes.find((item: any) => {
return item.name === name;
});
const depth = curNode.depth;
const curIsExpand = curNode.isExpand;
this.myChart._chartsViews[0]._data.tree._nodes.forEach((item: any, index: any) => {
if (item.depth === depth && item.name !== name && !curIsExpand) {
item.isExpand = false;
}
});
});
}
}