当前位置: 首页 > 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;}});});}}

相关文章:

eachers中的树形图在点击其中某个子节点时关闭其他同级子节点

答案在代码末尾!!!!! tubiaoinit(params: any) {// 手动触发变化检测this.changeDetectorRef.detectChanges();if (this.myChart ! undefined) {this.myChart.dispose();}this.myChart echarts.init(this.pieChart?…...

Maven 介绍与核心概念解析

目录 1. pom文件解析 2. Maven坐标 3. Maven依赖范围 4. Maven 依赖传递与冲突解决 Maven,作为一个广泛应用于 Java 平台的自动化构建和依赖管理工具,其强大功能和易用性使得它在开发社区中备受青睐。本文将详细解析 Maven 的几个核心概念&a…...

计算机网络-MSTP概述

一、RSTP/STP的缺陷与不足 前面我们学习了RSTP对于STP的一些优化与快速收敛机制。但在划分VLAN的网络中运行RSTP/STP,局域网内所有的VLAN共享一棵生成树,被阻塞后的链路将不承载任何流量,无法在VLAN间实现数据流量的负载均衡,导致…...

Redisson(三)应用场景及demo

一、基本的存储与查询 分布式环境下&#xff0c;为了方便多个进程之间的数据共享&#xff0c;可以使用RedissonClient的分布式集合类型&#xff0c;如List、Set、SortedSet等。 1、demo <parent><groupId>org.springframework.boot</groupId><artifact…...

考研要求掌握的C语言程度(堆排序)1

含义 堆排序就是把数组的内容在心中建立为大根堆&#xff0c;然后每次循环把根顶和没交换过的根末进行调换&#xff0c;再次建立大根堆的过程 建树的几个公式 一个数组有n个元素 最后一个父亲节点是n/2-1; 假如父亲节点在数组的下标为a 那么左孩子节点在数组下标为2*a1,…...

chronyd配置了local的NTP server之后, NTP报文中出现public IP的问题

描述 客户在Rocky Linux 9.4的VM上配了一个local的NTP server(IP: 10.64.1.76)。 配置完成后, 时钟可以同步&#xff0c;但一段时间后客户的firewall收到告警, 拒绝了大量目标端口为123的请求, 且这些请求的目的IP并不是客户指定的NTP server的IP&#xff0c;客户要求解释原因…...

docker常用命令整理

文章目录 docker 常用操作命令一、镜像类操作1.构建镜像2.从容器创建镜像3.查看镜像列表4.删除镜像5. 从远程镜像仓库拉取镜像6. 将镜像推送到镜像仓库中7. 将镜像导出8. 导入镜像9. 登录镜像仓库 二、容器相关操作1. 运行容器2. 进入容器3. 查看容器的运行状态4. 查看容器的日…...

将CSDN博客转换为PDF的Python Web应用开发--Flask实战

文章目录 项目概述技术栈介绍 项目目录应用结构 功能实现单页博客转换示例&#xff1a; 专栏合集博客转换示例&#xff1a; PDF效果&#xff1a; 代码依赖文件requirements.txt:app.py&#xff1a;代码解释&#xff1a; /api/onepage.py:代码解释&#xff1a; /api/zhuanlan.py…...

AIGC学习笔记(3)——AI大模型开发工程师

文章目录 AI大模型开发工程师002 GPT大模型开发基础1 OpenAI账户注册2 OpenAI官网介绍3 OpenAI GPT费用计算4 OpenAI Key获取与配置5 OpenAI 大模型总览6 代码演示安装依赖导入依赖初始化客户端执行代码遇到的问题 AI大模型开发工程师 002 GPT大模型开发基础 1 OpenAI账户注册…...

Windows server 2003服务器的安装

Windows server 2003服务器的安装 安装前的准备&#xff1a; 1.镜像SN序列号 图1-1 Windows server 2003的安装包非常人性化 2.指定一个安装位置 图1-2 选择好安装位置 3.启动虚拟机打开安装向导 图1-3 打开VMware17安装向导 图1-4 给虚拟光驱插入光盘镜像 图1-5 输入SN并…...

HTML作业

作业 复现下面的图片 复现结果 代码 <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title></head><body><form action"#"method"get"enctype"text/plain"><…...

MYSQL-SQL-04-DCL(Data Control Language,数据控制语言)

DCL&#xff08;数据控制语言&#xff09; DCL英文全称是Data Control Language(数据控制语言)&#xff0c;用来管理数据库用户、控制数据库的访问权限。 一、管理用户 1、查询用户 在MySQL数据库管理系统中&#xff0c;mysql 是一个特殊的系统数据库名称&#xff0c;它并不…...

多线程进阶——线程池的实现

什么是池化技术 池化技术是一种资源管理策略&#xff0c;它通过重复利用已存在的资源来减少资源的消耗&#xff0c;从而提高系统的性能和效率。在计算机编程中&#xff0c;池化技术通常用于管理线程、连接、数据库连接等资源。 我们会将可能使用的资源预先创建好&#xff0c;…...

C++网络编程之C/S模型

C网络编程之C/S模型 引言 在网络编程中&#xff0c;C/S&#xff08;Client/Server&#xff0c;客户端/服务器&#xff09;模型是一种最基本且广泛应用的架构模式。这种模型将应用程序分为两个部分&#xff1a;服务器&#xff08;Server&#xff09;和客户端&#xff08;Clien…...

目标检测:YOLOv11(Ultralytics)环境配置,适合0基础纯小白,超详细

目录 1.前言 2. 查看电脑状况 3. 安装所需软件 3.1 Anaconda3安装 3.2 Pycharm安装 4. 安装环境 4.1 安装cuda及cudnn 4.1.1 下载及安装cuda 4.1.2 cudnn安装 4.2 创建虚拟环境 4.3 安装GPU版本 4.3.1 安装pytorch&#xff08;GPU版&#xff09; 4.3.2 安装ultral…...

面试域——岗位职责以及工作流程

摘要 介绍互联网岗位的职责以及开发流程。在岗位职责方面&#xff0c;详细阐述了产品经理、前端开发工程师、后端开发工程师、测试工程师、运维工程师等的具体工作内容。产品经理负责需求收集、产品规划等&#xff1b;前端专注界面开发与交互&#xff1b;后端涉及系统架构与业…...

C#文件内容检索的功能

为了构建一个高效的文件内容检索系统&#xff0c;我们需要考虑更多的细节和实现策略。以下是对之前技术方案的扩展&#xff0c;以及一个更详细的C# demo示例&#xff0c;其中包含索引构建、多线程处理和文件监控的简化实现思路。 扩展后的技术方案 索引构建&#xff1a; 使用L…...

Redis-05 Redis发布订阅

Redis 的发布订阅&#xff08;Pub/Sub&#xff09;是一种消息通信模式&#xff0c;允许客户端订阅消息频道&#xff0c;以便在发布者向频道发送消息时接收消息。这种模式非常适合实现消息队列、聊天应用、实时通知等功能。 #了解即可&#xff0c;用的很少...

【读书笔记·VLSI电路设计方法解密】问题27:什么是可制造性设计

尽管业界尚未达成共识,但“可制造性设计”这一术语大致描述了旨在提高产品良率的特定分析、预防、纠正和验证工作。这不同于后GDSII阶段的分辨率增强技术,如光学邻近效应校正(OPC)和相位移掩膜(PSM)。“可制造性设计”中的关键词是“设计”,意指在设计阶段(而非设计完成…...

数据结构:堆的应用

堆排序 假定有一组数据极多的数&#xff0c;让我们进行排序&#xff0c;那我们很容易想到一种经典的排序方法&#xff0c;冒泡排序&#xff0c;我们对冒泡排序的时间复杂度进行分析&#xff1a; 显然&#xff0c;冒泡排序的时间复杂度是O&#xff08;n^2&#xff09;,当数据量…...

Spring Boot 实现文件分片上传和下载

文章目录 一、原理分析1.1 文件分片1.2 断点续传和断点下载1.2 文件分片下载的 HTTP 参数 二、文件上传功能实现2.1 客户端(前端)2.2 服务端 三、文件下载功能实现3.1 客户端(前端)3.2 服务端 四、功能测试4.1 文件上传功能测试4.2 文件下载功能实现 参考资料 完整案例代码&…...

夹逼准则求数列极限(复习总结)

记住这两个准则&#xff0c;然后我们就开始看题目 因为是证明题&#xff0c;所以要放缩到什么值已经是确定的了。也就是放缩到0&#xff0c;然后很明显地可以看出前面已经有一个可以使得极限是0了&#xff0c;并且后面的值明显小于1&#xff0c;就是逐渐缩小的趋势&#xff0c;…...

【python】OpenCV—WaterShed Algorithm(1)

文章目录 1、功能描述2、代码实现3、完整代码4、效果展示5、涉及到的库函数5.1、cv2.pyrMeanShiftFiltering5.2、cv2.morphologyEx5.3、cv2.distanceTransform5.4、cv2.normalize5.5、cv2.watershed 6、参考 1、功能描述 基于分水岭算法对图片进行分割 分水岭分割算法&#x…...

查找与排序-插入排序

思考&#xff1a;在把待排序的元素插入已经有序的子序列中时&#xff0c;是不是一定要逐一比较&#xff1f;有没有改进方法&#xff1f; 在查找插入位置的时候可以采用折半&#xff08;二分&#xff09;搜索的办法。 一、折半插入排序 1.折半插入排序算法的基本思想 假设待…...

JAVA基础:多线程 (学习笔记)

多线程 一&#xff0c;什么是线程&#xff1f; 程序&#xff1a;为完成特定任务、用某种语言编写的一组指令的集合,是一段静态的代码进程&#xff1a;程序的一次执行过程。 正在运行的一个程序&#xff0c;进程作为资源分配的单位&#xff0c;在内存中会为每个进程分配不同的…...

盲盒小程序/APP系统,市场发展下的新机遇

当下&#xff0c;年轻人热衷于各种潮玩商品&#xff0c;尤其是一盲盒为主的潮流玩具风靡市场&#xff0c;吸引了众多入局者。随着互联网信息技术的快速发展&#xff0c;各类线上盲盒小程序又进一步推动了盲盒市场的发展&#xff0c;成为年轻人拆盲盒的主要阵地。在盲盒经济中&a…...

Unity3D LayoutGroup组件详解

Unity3D中的LayoutGroup组件是一种强大的工具&#xff0c;用于动态调整UI元素的布局。它主要包括三种类型&#xff1a;Horizontal Layout Group&#xff08;水平布局组&#xff09;、Vertical Layout Group&#xff08;垂直布局组&#xff09;和Grid Layout Group&#xff08;网…...

[NeetCode 150] Foreign Dictionary

Foreign Dictionary There is a foreign language which uses the latin alphabet, but the order among letters is not “a”, “b”, “c” … “z” as in English. You receive a list of non-empty strings words from the dictionary, where the words are sorted lex…...

小新学习K8s第一天之K8s基础概念

目录 一、Kubernetes&#xff08;K8s&#xff09;概述 1.1、什么是K8s 1.2、K8s的作用 1.3、K8s的功能 二、K8s的特性 2.1、弹性伸缩 2.2、自我修复 2.3、服务发现和负载均衡 2.4、自动发布&#xff08;默认滚动发布模式&#xff09;和回滚 2.5、集中化配置管理和密钥…...

如何用终端批量修改一个文件夹里面所有图片的后缀名?

步骤&#xff1a; winr &#xff0c;然后输入cmd,打开终端 使用cd命令导航到要修改图片后缀名的文件夹。eg.我的该文件夹(C:\dog)下&#xff0c;保存的图片。&#xff08;cd和文件目录之间要有空格&#xff09;批量改变后缀名&#xff0c;假如让后缀名全部要从 ".webp&q…...