echart 同时画多个树状图

### ECharts中同时绘制多个树状图的配置与示例 在ECharts中，可以使用`series`数组来定义多个树状图，并通过不同的`data`和`layout`配置实现多棵树的同时绘制。以下是一个完整的示例代码[^1]，展示如何在同一个图表容器中绘制多个树状图。 ```javascript // 初始化echarts实例 var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); // 配置项 var option = { tooltip: {}, series: [ { type: 'tree', data: [ { name: '节点A', children: [ { name: '子节点A1' }, { name: '子节点A2' } ] } ], top: '10%', left: '60%', bottom: '10%', right: '10%', symbolSize: 7, label: { normal: { position: 'left', verticalAlign: 'middle', align: 'right' } }, leaves: { label: { normal: { position: 'right', verticalAlign: 'middle', align: 'left' } } }, expandAndCollapse: true, animationDuration: 550, animationDurationUpdate: 750 }, { type: 'tree', data: [ { name: '节点B', children: [ { name: '子节点B1' }, { name: '子节点B2' } ] } ], top: '10%', left: '10%', bottom: '10%', right: '60%', symbolSize: 7, label: { normal: { position: 'right', verticalAlign: 'middle', align: 'left' } }, leaves: { label: { normal: { position: 'left', verticalAlign: 'middle', align: 'right' } } }, expandAndCollapse: true, animationDuration: 550, animationDurationUpdate: 750 } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); ``` 上述代码展示了如何通过配置两个`series`对象来同时绘制两棵独立的树状图。每棵树可以通过调整`top`、`left`、`bottom`和`right`属性来控制其在图表中的位置[^2]。此外，还可以通过修改`symbolSize`、`label`等属性来自定义树状图的样式。 ### 注意事项 - 如果需要动态更新树状图数据，建议先清空容器内容再重新渲染新数据[^3]。 - 确保每个树状图的`data`结构正确，且包含必要的`children`字段以表示父子关系。 - 在复杂场景下，可以通过调整`layout`参数（如`orthogonal`或`radial`）来优化树状图的布局效果。