echarts Tree树图实现点击一个节点,关闭另一个节点(点击一个节点展示其子节点,收缩其余兄弟节点的子节点)

最新推荐文章于 2023-11-28 21:24:12 发布
最新推荐文章于 2023-11-28 21:24:12 发布
阅读量4.5k 收藏 9
点赞数 2
分类专栏： ECHARTS JS 文章标签： 可视化 java javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39172079/article/details/103698306
版权
echarts Tree实现手风琴模式工具组件说明效果说明代码实现实现效果工具组件说明echarts:一个使用 JavaScript 实现的开源可视化库,ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支...
摘要由CSDN通过智能技术生成

echarts Tree实现手风琴模式

工具组件说明

echarts:一个使用 JavaScript 实现的开源可视化库,ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
api地址:https://www.echartsjs.com/zh/api.html#echarts

效果说明

业务需求:由于每个节点的子节点超级多,所以同事展开效果不好,所以需要点击哪个展开哪个,其余的节点收缩,同一层级中只显示节点的子节点

代码实现

主要通过下面属性实现
在这里插入图片描述

//节点点击的方法
performance.on("click",
最低0.47元/天 解锁文章
ILY酱油王
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
echarts，tree 图，节点收缩，option 配置即可
01-10
echarts tree目前只能用initialTreeDepth来控制显示的层数，不能逐个控制每个节点的收缩放开状态，很不方便。因此我在配置项里面增加了一个字段mcHereShow（命名觉得不美观，可以全部替换成你要修改的字段），在配置项里面与"name"同级的位置，配置上mcHereShow：true 或者false即可逐个控制该节点的展开和收缩，子节点也是同样层级的配置，如：var data ={ "name": "核心交换机", "children": childrenData， 'symbolSize': 47, 'mcHereShow':true } series: [ { type: 'tree', data: [data], ...... }
Echarts绘制树图遇到问题与对应解决方案
哎呦的博客
10-13 2444
Echarts绘制树图遇到问题与对应解决方案
echarts tree 点击节点收缩(关闭子节点)功能实现
08-18
实现echarts中的树形tree图的节点收缩功能,子节点最多支持扩展9个,通过value作为层级的标识.能够完美实现子节点的缩放功能.
echarts关系图graph修改图片，自定义鼠标节点和线悬停，图片下载，拖拽，右键弹框等功能的实现
笑到世界都狼狈的博客
09-04 9944
1.首先看一下效果图： 2.代码目录结构 3.参考地址：https://gallery.echartsjs.com/editor.html?c=xCLEj67T3H 4.代码部分：（如果不懂，可以看我之前写的关于echarts树图tree部分的代码，步骤都比较清楚，所以这边我直接上全部代码了，就不拆分解释说明了） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8".
echarts的树形，突出一个节点：当点击一个节点的时候，是的其同级的节点收缩，本节点展开
Everything can be done!
03-26 4894
echarts中的树形图的data形式是： 根节点：option.series[0].data 对于每一个节点都有一个children数组，保存的是子节点的数据 所以就形成了一棵树 在树中一个节点的展示与收缩是通过节点的collapsed属性进行控制的，collapsed = true，收缩；false，节点展开。 需求：点击一个节点，这个节点对应的数据展开，同级的数据收缩。 ...
echart 动画 饼图_echarts构建关系图，节点可收缩和展开，可添加点击事件
weixin_33773670的博客
01-05 2899
echarts下载及使用 ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。 ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统...
echarts节点折叠实现
SongJingzhou的博客
04-02 6874
问题描述：工作用到echarts制作图表（graph关系型图），需要实现点击节点后隐藏其节点下的所有的子节点，而echarts官方并没有可用方法使用思路：首先获取点击节点的操作事件，然后获取节点的所有子节点，将这些子节点全部保存在自己定义的一个全局数组变量中，并且将原数组中的这些数据删除（如果不删除原数组的数据，不管怎么设置结果都是图表不发生任何变化，这是一个大坑！！！），然后重新渲染图表；而显示...
echarts树图实现点击收缩子节点
05-02
本教程将详细介绍如何在ECharts树图中实现点击节点时收缩其子节点的功能。首先，我们需要理解ECharts的基本概念和树图的特性。 ECharts是一款由百度开发的开源JavaScript图表库，它提供了丰富的图表类型，如柱状图...
echarts tree 节点替换图标，节点蔓延状态自动播放
05-25
在本文中，我们将深入探讨如何在ECharts的Tree图中替换节点图标，并实现节点蔓延状态的自动播放功能。ECharts是一款基于JavaScript的开源可视化库，它提供了丰富的图表类型，包括柱状图、折线图、饼图以及我们关注的...
基于echarts3.84，获取tree图中每个节点的位置，21579行，getMyPosition方法
01-17
如何在tree图中获取每个节点相对于canvas的位置，文件里面可以直接参考21579行，getMyPosition方法，里面的返回值中有你需要的，直接调用echart实例的getMyPosition方法即可。如myChart.getMyPosition({finder:{...
echarts tree图，节点收缩展开处理
热门推荐
wusefengye的博客
01-11 2万+
最近在用echarts，想要画一个物理设备组网的TOPO图，只有Tree图比较适合。不过遇到这样一个问题，物理组网中层数越高，越往叶子层走时，元素越多，直接展开感觉有点乱。因此想控制节点的收缩与打开。    echarts现在是3.8.4版本，看到demo中，tree有个深度的配置项initialTreeDepth可以选择初始展开的层数，也就是只能选择全部显示某一层。如图：
jstree选中某节点，取消选中某节点（有无复选框）
qq_40126611的博客
06-28 1333
如果没有复选框 $("#VendoraddressTree").on("ready.jstree", function (e, data) { //树创建完成事件 $("#VendoraddressTree").jstree('deselect_all', true);// 取消所有默认选中 $("#VendoraddressTree").jstree('select_node', '10', true);// 选中‘10’节点，如果选中多个，可以传递数组 data.
Echarts3树图动态添加子节点以及节点的展开和缩放的完美控制
yeyeyeyepujie的博客
05-31 1万+
由于关联数据量比较大，先加载一层树图数据，后根据节点是否有子节点动态加载数据并显示。 初始数据： [{"children":[{"children":[{"children":[{"children":[],"name":"子部门XXX","hasChild":true}],"name":"部门A"}],"name":"分公司A"},{"children":[{"children":[],"nam...
如何实现echarts树点击节点名称也可以实现展开收起(直接更改options即可)
qq_36487294的博客
11-17 3088
产品有个需求，需要用echarts画一颗树，原型大概这样 然后看了下官网,echarts的树图大概如下,呃呃呃，差好多，那就改呗 然后一顿操作页面出来差不多了，思路大概如下，左边那个灰色按钮是自己写的，总体数据是一颗树，我把第一层的label和line隐藏 实际效果就差不多了 然后发现有个问题，echarts树的点击事件只能绑定在前面的symbol(圆点)上，象征性的问了下产品，果不其然，被产品怼了回来，然后各种搜索，也没找到自己想要的结果，那只能自己手写了 我大概讲下我的思路啊，大.
Echarts树图，点击根节点整个图消失
m0_48639280的博客
08-19 630
那么自己换一个版本，据说官方已经修复，换一个高一点版本即可。------------------------记录。开启roam：true(移动和缩放)后，要是不想换版本，就关掉 移动缩放功能。echarts.js（4x版本）点击根节点进行折叠树图会消失。
echarts树图添加节点点击事件
min的博客
05-21 8944
需求：为树图添加节点点击事件，点击不同层级的节点文本时进行不同的操作 实现过程： // 初始化树图方法 initTreeChart(){ //-----------------------第一步：实现树图，代码如下--------------------------- //获取echarts要渲染的元素 let dom = document.getElementById('treeChartBox'); let myChart = this.echarts.init(dom);
vue+echarts实现依赖关系无向网络拓扑结图节点折叠展开策略
最新发布
weixin_54703767的博客
11-28 2536
在设计关系图时，选择力引导依赖关系图作为主要可视化方法，考虑到树状图在呈现节点之间关系方面的不便，力引导图能更好地展示节点关系。为了实现节点的折叠和展开策略，引入了开源库echarts3，并设计了节点的展开和收缩逻辑。关系图的布局采用力导向算法，其中引力中心设置为图中心，节点层级按照由中心向四周分布。详细讨论了力引导关系图的基本概念，节点和边的定义，以及力导向布局算法的原理。
echarts中设置tree的子节点的点击事件和控制子节点是否展开
MISS_zhang_0110的博客
02-20 3997
在Echarts中设置Tree的子节点的点击事件和控制子节点是否展开子节点事件--重要的代码子节点展开--重要的代码完整代码参考链接 子节点事件–重要的代码 一、 myChart.on(“click”, clickFun); 二、 function clickFun(param) { if (typeof param.seriesIndex == ‘undefined’) { return; } if (param.type == ‘click’) { alert((param)); } } 子节点展开
Echart4 关系图 Graph 节点点击折叠展开 （Angular6）
Sun~Neo
07-21 2723
import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef, NgZone, ElementRef } from '@angular/core'; import { TableServiceService } from './table-service/table-service.service' import *...
vue 项目中 echarts树图 如何实现点击节点获取下一节点数据
05-24
要实现点击节点获取下一节点数据，可以通过以下步骤来完成： 1. 在 Vue 项目中安装 echarts，可以通过命令 `npm install echarts --save` 来安装。 2. 在组件中引入 echarts，并且在 `mounted` 钩子函数中初始化 echarts。 ```javascript import echarts from 'echarts'; export default { mounted() { const myChart = echarts.init(document.getElementById('my-chart')); // ... } } ``` 3. 在 echarts 中配置树图，并且在 `series` 中设置 `data` 属性，用于绑定节点数据。可以通过 `onClick` 配置项来监听节点的点击事件。 ```javascript myChart.setOption({ series: { type: 'tree', data: [ { name: '节点1', children: [ { name: '节点1-1', children: [ { name: '节点1-1-1' }, { name: '节点1-1-2' } ] }, { name: '节点1-2', children: [ { name: '节点1-2-1' }, { name: '节点1-2-2' } ] } ] } ], // 监听节点的点击事件 onClick: function(params) { console.log(params); // 获取点击节点的信息 // 根据点击节点的信息获取下一级节点数据 const nextNodes = getNextNodes(params); // 更新 echarts 中的数据 myChart.setOption({ series: { data: nextNodes } }); } } }); ``` 4. 在 `onClick` 回调函数中，根据点击节点的信息获取下一级节点数据，并且通过 `setOption` 方法更新 echarts 中的数据。 ```javascript function getNextNodes(params) { // 获取点击节点的名称 const nodeName = params.name; // 根据节点名称获取下一级节点数据 const nextNodes = [ { name: `${nodeName}-1` }, { name: `${nodeName}-2` } ]; return nextNodes; } ``` 这样就可以实现在 Vue 项目中点击 echarts 树图节点获取下一级节点数据的功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值