当前位置: 首页 > news >正文

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;}});});}}
http://www.lryc.cn/news/470602.html

相关文章:

  • Maven 介绍与核心概念解析
  • 计算机网络-MSTP概述
  • Redisson(三)应用场景及demo
  • 考研要求掌握的C语言程度(堆排序)1
  • chronyd配置了local的NTP server之后, NTP报文中出现public IP的问题
  • docker常用命令整理
  • 将CSDN博客转换为PDF的Python Web应用开发--Flask实战
  • AIGC学习笔记(3)——AI大模型开发工程师
  • Windows server 2003服务器的安装
  • HTML作业
  • MYSQL-SQL-04-DCL(Data Control Language,数据控制语言)
  • 多线程进阶——线程池的实现
  • C++网络编程之C/S模型
  • 目标检测:YOLOv11(Ultralytics)环境配置,适合0基础纯小白,超详细
  • 面试域——岗位职责以及工作流程
  • C#文件内容检索的功能
  • Redis-05 Redis发布订阅
  • 【读书笔记·VLSI电路设计方法解密】问题27:什么是可制造性设计
  • 数据结构:堆的应用
  • Spring Boot 实现文件分片上传和下载
  • 夹逼准则求数列极限(复习总结)
  • 【python】OpenCV—WaterShed Algorithm(1)
  • 查找与排序-插入排序
  • JAVA基础:多线程 (学习笔记)
  • 盲盒小程序/APP系统,市场发展下的新机遇
  • Unity3D LayoutGroup组件详解
  • [NeetCode 150] Foreign Dictionary
  • 小新学习K8s第一天之K8s基础概念
  • 如何用终端批量修改一个文件夹里面所有图片的后缀名?
  • 关于AI网络架构的文章