Echarts tree 图展开状态设置

最新推荐文章于 2025-09-22 00:00:00 发布

原创最新推荐文章于 2025-09-22 00:00:00 发布 · 1.9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#js #echarts

本文介绍如何使用 Echarts 的 Tree 图组件，并通过修改 JSON 数据结构来控制节点的默认展开状态。具体包括如何通过 index 控制哪些节点是展开或折叠的状态。

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] 加[ ]