echarts tree 节点间距
时间: 2023-07-29 09:07:25 浏览: 328
您可以通过设置节点之间的间距来控制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` 为准。
相关推荐
![js](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)