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.rhkb.cn/news/456152.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

自动发现-实现运维管理自动化

nVisual-Discovery是一款自动化工具软件,通过多种自动发现技术,协助运维管理人员快速建立可视化的网络文档,提升网络管理的效率与准确性。 01 IP扫描发现 当我们新接手一个网络运维项目,通常缺乏精准的网络文档数据,…

vue3+ts实时播放视频,视频分屏

使用vue3以及播放视频组件Jessibuca Jessibuca地址 使用循环个数来实现分屏 效果图&#xff0c;四屏 九屏 dom代码 <div class"icon"><div class"icon-box"><span class"text">分屏&#xff1a;</span><el-icon …

RHCSA笔记三

第二章 linux中执行命令 命令格式 命令分为两类 内置命令&#xff1a;由 shell 程序自带的命令 外部命令&#xff1a;有独立的可执行程序文件&#xff0c;文件名即命令名 格式 主命令 参数 操作对象 # 注意&#xff1a; 下面是对于命令的语法的一些符号的说明&#xff1…

爬虫结合项目实战

由于本人是大数据专业&#xff0c;所以准备的是使用pycharm工具进行爬虫爬取数据&#xff0c;然后实现一个可视化大屏 参考项目&#xff1a; 1.医院大数据可视化最后展示 2. 大数据分析可视化系统展示 代码包&#xff1a;

【js逆向专题】12.RPC技术

目录 一. websocket1. 什么是websocket2. websocket的原理3. websocket实现方式1. 客户端2.服务端3. 实际案例1. 案例目标2. 解析思路 二. RPC1. RPC 简介2.Sekiro-RPC1. 使用方法1. 执行方式2.客户端环境3.使用参数说明 2. 测试使用1. 前端代码2. SK API3.python调用代码 三.项…

LabVIEW伺服压机是如何实现压力位移的精度?

LabVIEW伺服压机通过精确的压力和位移控制&#xff0c;实现了高精度的压装操作。为了达到这种精度&#xff0c;系统通常依赖于多个硬件和软件模块的协同工作&#xff0c;包括伺服电机、压力传感器、位移传感器以及LabVIEW的实时控制和数据处理功能。以下是LabVIEW伺服压机如何实…

论文阅读与写作入门

文章目录 1.阅读第一篇论文(1)论文结构(2)目标 2.使用GPT辅助论文的阅读与写作3.专有名词(1)架构(2)网络(3)机器学习 4.文献翻译软件5.从哪里下载文献&#xff1f;6.如何判断(你自己的)研究工作的价值or贡献【论文精读李沐】7.经典论文(1)AlexNet 2012(2)FCN 全卷积 2014(3)Res…

【java面向对象编程】第一弹----类与对象的理解及类和对象的内存分配机制

一、类与对象 1.1类与对象的理解 &#xff08;1&#xff09;类就是数据类型&#xff0c;比如String类 &#xff08;2&#xff09;对象就是一个具体的实例 1.1.2类和对象的区别与联系 1) 类是抽象的&#xff0c;概念的&#xff0c;代表一类事物,比如人类,猫类.., 即它是数据…

异地组网最简单的方法

异地组网的方法多种多样&#xff0c;每种方法都有其特定的优缺点和适用场景&#xff0c;本期梳理一些相对简单且常用的异地组网方法&#xff0c;开始~ 一、使用硬件路由器的 VPN 功能 前提条件 你需要有支持 VPN 功能的路由器&#xff0c;如华硕、中兴等品牌。这些路由器在设置…

Newstar_week1_week2_wp

week1 wp crypto 一眼秒了 n费马分解再rsa flag&#xff1a; import libnum import gmpy2 from Crypto.Util.number import * p 9648423029010515676590551740010426534945737639235739800643989352039852507298491399561035009163427050370107570733633350911691280297…

「C/C++」C++17 之 std::variant 安全的联合体(变体)

#1024程序员节&#xff5c;征文# ✨博客主页何曾参静谧的博客&#x1f4cc;文章专栏「C/C」C/C程序设计&#x1f4da;全部专栏「VS」Visual Studio「C/C」C/C程序设计「UG/NX」BlockUI集合「Win」Windows程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计…

vue2 el-select赋值无效(无法选中)

背景&#xff1a;点击添加明细时&#xff0c;el-table会新增一条数据&#xff0c;其中&#xff0c;存货原申购用途 会根据 费用承担事业部 下拉框的值改变而改变&#xff0c;所以每次费用承担事业部发生变化时&#xff0c;都需要清空存货原申购用途的值 最开始是直接这样写的&a…

基于Java(SSM框架)+MySQL开发的小型英语学习网站

一、需求分析 英语已经越来越凸显其重要性。大学生一般都需要考CET-4或者CET-6&#xff0c;对于程序员&#xff0c;如果没有扎实的英语基础&#xff0c;看有些API文档也比较费力。生活中处处存在英语&#xff0c;也越来越体现英语的重要性&#xff0c;如何高效学习英语成了关键…

Openlayers高级交互(7/20):点击某点弹出窗口,自动播放视频

在使用 OpenLayers 构建 WebGIS 应用程序时,如果你想在地图上嵌入视频,通常的做法是将视频作为覆盖层(Overlay)添加到地图上。这里是一个示例,点击某点弹出窗口,自动播放视频。 效果图 专栏名称内容介绍Openlayers基础实战 (72篇)专栏提供73篇文章,为小白群体提供基础…

Vxe UI vue vxe-table 虚拟树表格的使用,流畅的渲染万级数据树结构表格

Vxe UI vue vxe-table 虚拟树表格的使用&#xff0c;流畅的渲染万级数据树结构表格 代码 普通树表格&#xff0c;一般存数据库里都是平级数据&#xff0c;vxe-table 的树渲染这就非常友好了&#xff0c;只有带有父子id关联的数组&#xff0c;就可以自动渲染树表格。 <te…

用 Vue 打造高效 Gherkin 自动化测试脚本编写工具

之前曾撰写过一篇有关运用 Pytest - BDD 框架开展自动化测试的文章。行为驱动开发&#xff08;BDD&#xff09;因着重于以业务需求和用户行为作为导向来编写测试脚本&#xff0c;故而广受关注。Gherkin 作为 BDD 中常用的语言&#xff0c;用于描述测试场景与步骤&#xff0c;具…

C#学习笔记(五)

C#学习笔记&#xff08;五&#xff09; 第 三 章 基本语句以及语法一、控制台的基本语句使用1. 方法重载2. 输入输出3.字符串格式化 二、赋值运算符、算数运算符、比较运算符三、数据类型转换常用方法使用、比较和选择1. 自动类型转换(隐式转换)2. 强制类型转换2.1 数值类型之间…

k8s-service详解

Service介绍 在kubernetes中&#xff0c;pod是应用程序的载体&#xff0c;我们可以通过pod的ip来访问应用程序&#xff0c;但是pod的ip地址不是固定的&#xff0c;这也就意味着不方便直接采用pod的ip对服务进行访问。 为了解决这个问题&#xff0c;kubernetes提供了Service资源…

COVON全意卫生巾,轻薄透气,绵柔速干,马来西亚热销中

随着女性健康意识的提高&#xff0c;卫生巾作为女性日常生活中的必需品&#xff0c;其品质和舒适度越来越受到关注。今天&#xff0c;我们要为大家介绍一款来自马来西亚热销的卫生巾——COVON全意卫生巾&#xff0c;以其轻薄透气、绵柔速干的特点&#xff0c;赢得了广大女性的喜…

故障诊断 | CNN-GRU卷积神经网络-门控循环单元组合模型的故障诊断(Matlab)

效果一览 文章概述 故障诊断 | CNN-GRU卷积神经网络-门控循环单元组合模型的故障诊断(Matlab) 源码设计 %% CNN-GRU多特征分类预测