echart多树状图
时间: 2025-05-03 15:48:18 浏览: 33
### 如何在 ECharts 中实现多树状图
ECharts 提供了强大的图表绘制能力,其中树状图是一种常见的用于表示层次结构的数据可视化形式。为了实现在同一画布上展示多个树状图的效果,可以通过配置 `series` 数组来定义多个独立的树状图实例[^1]。
以下是具体实现方法:
#### 配置项说明
每个树状图都需要单独定义其数据源和样式属性。通过设置不同的 `data` 和 `layout` 参数,可以控制每棵树的位置、大小以及其他视觉特性[^4]。
#### 示例代码
以下是一个简单的例子,展示了如何在同一容器内渲染两个不同风格的树状图:
```javascript
// 初始化echart实例
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
// 定义第一个树的数据
var treeData1 = {
name: 'Node1',
children: [
{name: 'Child1'},
{name: 'Child2'}
]
};
// 定义第二个树的数据
var treeData2 = {
name: 'Node2',
children: [
{name: 'Subchild1', value: 10},
{name: 'Subchild2', value: 20}
]
};
option = {
series: [{
type: 'tree',
data: [treeData1],
top: '10%',
left: '10%',
bottom: '10%',
right: '50%', // 调整右侧间距使两棵树分开
symbolSize: 7,
label: {
position: 'left',
verticalAlign: 'middle',
rotate: 0
},
leaves: {
label: {
position: 'right'
}
},
emphasis: {
focus: 'descendant'
},
expandAndCollapse: true
},
{
type: 'tree',
data: [treeData2],
top: '10%',
left: '60%',
bottom: '10%',
right: '10%',
orient: 'vertical', // 设置方向为垂直布局
symbolSize: 7,
label: {
position: 'top',
verticalAlign: 'middle',
rotate: 90
},
leaves: {
label: {
position: 'bottom'
}
},
emphasis: {
focus: 'descendant'
},
expandAndCollapse: true
}]
};
myChart.setOption(option);
```
上述代码片段创建了一个水平排列的双树结构,左侧是一棵普通的树形图,而右侧则采用竖直方式呈现另一颗子节点较多的树形图[^2]。
#### 关键点解析
- **系列数组 (Series Array)**:每一个对象代表一个独立的序列,在这里我们指定了两次类型均为 `"tree"` 的序列。
- **位置调整**:利用百分比单位精确指定各部分所占比例,从而达到分离显示的目的。
- **自定义外观**:通过对标签文字方位(`position`)及其他图形元素样式的修改定制化每一棵树的表现形式[^3]。
---
阅读全文
相关推荐


















