echarts三成关系树形图
时间: 2023-10-13 17:29:07 浏览: 92
echarts关系图
首先需要准备好数据,数据格式为树形结构,每个节点包含一个name和一个children数组,children中又包含多个节点对象。可以使用JSON格式来表示这个树形结构的数据。
接下来,需要在ECharts中使用series的type为“tree”,并将数据传入。同时,可以设置节点的展开、收起状态、节点的样式等属性。代码示例如下:
```javascript
option = {
series: [
{
type: 'tree',
data: [/* 树形结构数据 */],
top: '1%',
left: '7%',
bottom: '1%',
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表示树形结构数据,top、left、bottom、right设置树形图的位置,symbolSize设置节点的大小,label设置节点的标签样式,leaves设置叶子节点的样式,expandAndCollapse设置是否允许展开和收起节点,animationDuration和animationDurationUpdate分别设置展开和收起动画的时间。
阅读全文