echarts 树形图左边四个子节点右边两个子节点代码
时间: 2023-07-11 11:13:33 浏览: 125
您好,关于echarts树形图左边四个子节点右边两个子节点的代码,可以参考以下示例代码:
```javascript
option = {
series: [
{
type: 'tree',
data: [{
name: '父节点',
children: [
{
name: '左1',
children: [
{
name: '左1-1'
},
{
name: '左1-2'
},
{
name: '左1-3'
},
{
name: '左1-4'
},
]
},
{
name: '左2',
children: [
{
name: '左2-1'
},
{
name: '左2-2'
},
{
name: '左2-3'
},
{
name: '左2-4'
},
]
},
{
name: '左3',
children: [
{
name: '左3-1'
},
{
name: '左3-2'
},
{
name: '左3-3'
},
{
name: '左3-4'
},
]
},
{
name: '左4',
children: [
{
name: '左4-1'
},
{
name: '左4-2'
},
{
name: '左4-3'
},
{
name: '左4-4'
},
]
},
{
name: '右1',
children: [
{
name: '右1-1'
},
{
name: '右1-2'
},
]
},
{
name: '右2',
children: [
{
name: '右2-1'
},
{
name: '右2-2'
},
]
},
]
}],
top: '10%',
left: '20%',
bottom: '10%',
right: '20%',
symbolSize: 10,
orient: 'horizontal',
label: {
position: 'right',
verticalAlign: 'middle',
align: 'left',
fontSize: 16
},
leaves: {
label: {
position: 'left',
verticalAlign: 'middle',
align: 'right',
fontSize: 16
}
},
expandAndCollapse: true,
animationDuration: 550,
animationDurationUpdate: 750
}
]
};
```
以上代码中,我们使用了echarts的tree组件,通过设置data属性来指定树形结构的数据,通过设置orient属性来实现节点的左右布局,通过设置label和leaves属性来设置节点的样式和位置。
希望能对您有所帮助!
阅读全文