echarts树状图setOption之后怎么展开状态不变
时间: 2023-07-11 16:54:36 浏览: 107
在 echarts 树状图中,可以通过设置节点的 `collapsed` 属性来控制节点的展开状态。当 `collapsed` 属性为 `true` 时,节点会处于折叠状态;当 `collapsed` 属性为 `false` 时,节点会处于展开状态。
在调用 `setOption` 方法更新树状图数据时,如果想要保持节点的展开状态不变,可以在新数据中保留节点的 `collapsed` 属性。例如,假设我们有一个树状图,其中节点的数据如下:
```js
[
{
name: '节点1',
id: '1',
children: [
{
name: '节点2',
id: '2',
children: [
{
name: '节点3',
id: '3',
children: []
},
{
name: '节点4',
id: '4',
children: []
}
]
}
]
}
]
```
如果想要更新节点2的子节点,同时保持节点2的展开状态不变,可以将新数据设置为:
```js
[
{
name: '节点1',
id: '1',
children: [
{
name: '节点2',
id: '2',
collapsed: false, // 保持展开状态不变
children: [
{
name: '节点5', // 新的子节点
id: '5',
children: []
},
{
name: '节点6', // 新的子节点
id: '6',
children: []
}
]
}
]
}
]
```
这样,在调用 `setOption` 方法更新数据时,echarts 会根据节点的 `id` 属性来匹配新旧数据,同时保持节点的展开状态不变。需要注意的是,更新数据时要保证每个节点的 `id` 唯一,否则匹配会出错。
阅读全文