echarts制作tree
时间: 2023-07-29 14:06:10 浏览: 108
用Echarts画思维导图
Echarts提供了tree图表类型,可以用于展示树形结构数据。下面是一个简单的tree示例,供你参考:
```javascript
option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'tree',
data: [
{
name: '节点1',
children: [
{
name: '节点1-1',
children: [
{ name: '节点1-1-1' },
{ name: '节点1-1-2' }
]
},
{ name: '节点1-2' }
]
},
{ name: '节点2' },
{
name: '节点3',
children: [
{ name: '节点3-1' },
{ name: '节点3-2' }
]
}
],
top: '5%',
left: '7%',
bottom: '2%',
right: '20%',
symbolSize: 7,
label: {
position: 'left',
verticalAlign: 'middle',
align: 'right',
fontSize: 9
},
leaves: {
label: {
position: 'right',
verticalAlign: 'middle',
align: 'left'
}
},
expandAndCollapse: true,
animationDuration: 550,
animationDurationUpdate: 750
}
]
};
```
在上述代码中,我们先定义了一个包含树形结构数据的data数组,然后设置了tree图表的基本属性,比如位置、节点大小、标签样式等。其中,leaves属性用于设置叶子节点的样式,expandAndCollapse属性用于设置是否支持节点展开和折叠,animationDuration和animationDurationUpdate属性分别用于设置初始渲染和数据更新时的动画时长。
你可以根据实际需求修改上述示例中的数据和样式来制作自己的tree图表。
阅读全文