Echarts tree 图展开状态设置

最新推荐文章于 2024-03-05 14:12:51 发布
最新推荐文章于 2024-03-05 14:12:51 发布
阅读量1.5k 收藏 3
点赞数
文章标签： js echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cyb2473541293/article/details/110227987
版权

Echarts tree 图展开状态设置

官网有例子
https://echarts.apache.org/examples/zh/editor.html?c=tree-basic

官方核心代码

echarts.util.each(data.children, function (datum, index) {
        index % 2 === 0 && (datum.collapsed = true);
    });

在这里插入图片描述

提示：传入data为Josn 数据
传入数据为{ }格式
在这里插入图片描述

data传参改为 data:[data]
在这里插入图片描述

index 控制展开 
echarts.util.each(data.children, function (datum, index) {
        index % 2 === 0 && (datum.collapsed = true);
    });

如： index === 0 && (datum.collapsed = true);
第一条收起来

index===1|index===3 |index===4|index===5|index===6&& (datum.collapsed = true);
2，4，5，6，收起来

在这里插入图片描述

应为我传入数据为字典格式[] 所以data重新取 改为{} ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201127132742893.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N5YjI0NzM1NDEyOTM=,size_16,color_FFFFFF,t_70#pic_center)![在这里插入图片描述](https://img-blog.csdnimg.cn/20201127133004800.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N5YjI0NzM1NDEyOTM=,size_16,color_FFFFFF,t_70#pic_center)

emmmmmmmmmmmmmmmmmm主要就是data的数据类型
传入为data 为josn(data) {} 赋值data ：[data] 加[ ]

渐-近-线
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echarts Tree树图实现点击一个节点,关闭另一个节点(点击一个节点展示其子节点,收缩其余兄弟节点的子节点)
weixin_39172079的博客
12-25 4576
echarts Tree实现手风琴模式工具组件说明效果说明代码实现实现效果 工具组件说明 echarts:一个使用 JavaScript 实现的开源可视化库,ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支...
如何取消echarts图例的点击事件
weixin_68252492的博客
08-18 867
代码】如何取消echarts图例的点击事件。
eCharts取消图例上的点击事件
spray_wave的博客
05-21 1231
legend:{ selectedMode:false//取消图例上的点击事件 }
Element ui el-tree 组件展开关闭所有节点方法
岁月清浅， 不落痕迹
01-25 6172
Element ui el-tree 组件展开关闭所有节点方法 Element ui el-tree 组件展开关闭所有节点方法 递归遍历每个节点改变 node的expanded 属性值 changeTreeNodeStatus(val, flag) { const node = val node.expanded = flag; for (let i = 0; i < node.childNodes.length; i++) {
echarts 树图点击展开关闭加数据！
阿叁博客
07-24 7213
点击树图节点
echarts tree 节点替换图标，节点蔓延状态自动播放
05-25
- 在ECharts的Tree图配置中，`symbol`字段用于设置节点的图形类型，可以是`'circle'`, `'rect'`, `'roundRect'`, `'triangle'`, `'diamond'`, `'pin'`, `'arrow'`等预设图形，也可以是图片的URL。 - 如果想使用...
echarts，tree 图，节点收缩，option 配置即可
01-10
echarts tree目前只能用initialTreeDepth来控制显示的层数，不能逐个控制每个节点的收缩放开状态，很不方便。因此我在配置项里面增加了一个字段mcHereShow（命名觉得不美观，可以全部替换成你要修改的字段），在配置...
eCharts Tree双向布局
06-14
1. **配置项调整**：首先，我们需要在eCharts实例的option中设置`series`的`type`为`tree`，然后针对双向布局，设置`layout`为`radial`或`orthogonal`。对于`radial`布局，可以模拟出类似圆形的效果，而`orthogonal`...
echarts tree 点击节点收缩(关闭子节点)功能实现
08-18
在本文中，我们将深入探讨如何在ECharts库中实现一个具有点击节点收缩（关闭子节点）功能的树形图表（Tree）。ECharts是一款基于JavaScript的数据可视化库，它提供了丰富的图表类型，包括柱状图、折线图、饼图以及...
用Echarts画思维导图
03-23
ECharts中的Tree图用于展示层次结构的数据，非常适合构建思维导图。它提供了多种布局方式，如"radial"（环形）、"tidal"（潮汐）以及默认的"orthogonal"（直角）布局，可以根据需求选择合适的布局模式来展示思维...
echarts的树形，突出一个节点：当点击一个节点的时候，是的其同级的节点收缩，本节点展开
Everything can be done!
03-26 4890
echarts中的树形图的data形式是： 根节点：option.series[0].data 对于每一个节点都有一个children数组，保存的是子节点的数据 所以就形成了一棵树 在树中一个节点的展示与收缩是通过节点的collapsed属性进行控制的，collapsed = true，收缩；false，节点展开。 需求：点击一个节点，这个节点对应的数据展开，同级的数据收缩。 ...
Ztree实现点击当前节点展开的同时其余节点关闭，以及单个节点刷新
UniqueUnit的博客
12-21 1044
因为代码在公司云桌面里，懒的再手敲一遍，所以核心代码就用截图啦… var setting = { //... callback: { onExpand: onExpand } //... }; Ztree实现点击当前节点展开的同时其余节点关闭 Ztree实现点击当前节点展开的同时实时定向刷新该节点下的数据 ...
echarts矩阵树图不可拖拽，取消点击节点后的行为设置
kkk109A的博客
11-26 2802
series: [ { type: 'treemap', width: '100%', height: '100%', roam: false, //是否开启拖拽漫游（移动和缩放） nodeClick: false, //点击节点后的行为,false无反应 ] ...
echarts树状图点击展开子节点_echarts2.* tree树形图节点点击事件和节点点击图标更改...
weixin_31414515的博客
12-31 681
做项目用到echarts2.2.7版本做树图，遇到点击树图节点“更改样式”(并不能更改样式，只能换图标/图片)，百度、谷歌搜索后均没找到解决方案。后来苦苦探索，终于找到解决入口，特地分享给大家以供参考，吐槽一下echarts的api真的没有highcharts人性化和易找。//贴出关键点！functionclickFun(param){console.log(param);param.data...
echarts中设置tree的子节点的点击事件和控制子节点是否展开
MISS_zhang_0110的博客
02-20 3946
在Echarts中设置Tree的子节点的点击事件和控制子节点是否展开子节点事件--重要的代码子节点展开--重要的代码完整代码参考链接 子节点事件–重要的代码 一、 myChart.on(“click”, clickFun); 二、 function clickFun(param) { if (typeof param.seriesIndex == ‘undefined’) { return; } if (param.type == ‘click’) { alert((param)); } } 子节点展开
如何实现echarts树点击节点名称也可以实现展开收起(直接更改options即可)
qq_36487294的博客
11-17 3076
产品有个需求，需要用echarts画一颗树，原型大概这样 然后看了下官网,echarts的树图大概如下,呃呃呃，差好多，那就改呗 然后一顿操作页面出来差不多了，思路大概如下，左边那个灰色按钮是自己写的，总体数据是一颗树，我把第一层的label和line隐藏 实际效果就差不多了 然后发现有个问题，echarts树的点击事件只能绑定在前面的symbol(圆点)上，象征性的问了下产品，果不其然，被产品怼了回来，然后各种搜索，也没找到自己想要的结果，那只能自己手写了 我大概讲下我的思路啊，大.
echarts图表如何取消图例点击事件
最新发布
前端小陈的成长记录
03-05 1374
echarts图表取消图例点击事件
Echarts 取消点击事件
林中明月间丶
04-02 5387
if (type ==1) {//切换成地市就给echart加点击事件 this.chart.on("click", param => { //给echars 添加点击事件 this.$emit("sendInvoiceDialog"); }); } else { this.chart.off("click") //取消echarts 点击事件 } ...
Echarts 的取消动画效果，animation、layoutAnimation:false,
热门推荐
hongyanwang
12-14 2万+
做公司项目需要实现一个关系图，却发现初始化动画一直无法取消，图示： 在echarts 中相关案例中，都有差不多的效果，但在初始化时，都会有一个初始化动画（非Loading动画），可参考实例： https://www.makeapie.com/editor.html?c=x5rYx4aXK 在echarts5 的相关实例中尝试 加上 animation:false 属性，即可停止初始化动画，在echarts4中 除关系图外，别的图示加上 animation:false 属性，也可以停止动画， 但关系图却不可
echarts tree 节点间距
05-27
您可以通过设置节点之间的间距来控制ECharts Tree的布局。在ECharts中，可以通过以下两种方式来设置节点之间的间距： 1. 通过 `series` 中的 `layout` 属性来设置整个树形图的布局方式，然后通过 `series` 中的 `nodePadding` 和 `nodeGap` 属性来控制节点之间的间距。 例如： ``` option = { series: [{ type: 'tree', layout: 'horizontal', // 设置水平布局 nodePadding: 50, // 设置节点之间的内边距 nodeGap: 100, // 设置节点之间的间距 // ... }] // ... }; ``` 2. 直接在每个节点中设置自定义样式，通过 `itemStyle` 中的 `padding` 和 `gap` 属性来控制节点之间的间距。 例如： ``` option = { series: [{ type: 'tree', data: [{ name: '节点1', itemStyle: { padding: [0, 50], // 设置节点内边距 gap: 100 // 设置节点间距 }, // ... }], // ... }] // ... }; ``` 注意：以上两种方式不能同时使用，如果同时设置了 `nodePadding` 和 `itemStyle.padding` 属性，则以 `itemStyle.padding` 为准。同理，如果同时设置了 `nodeGap` 和 `itemStyle.gap` 属性，则以 `itemStyle.gap` 为准。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值