echart多层级柱状图

ECharts是一个流行的JavaScript图表库，它支持创建各种复杂的图表类型，包括多层级柱状图（也称为树状图或层次柱状图）。在ECharts中，你可以通过`tree`系列以及其相关的配置项来构建这样的图形，通常用于展示层级分明的数据结构，如组织架构、产品分类等。

以下是制作多层级柱状图的基本步骤：

1. **数据准备**：需要数据包含父节点ID和子节点数据，比如每个子节点的值或数量。

[
    {
        name: 'A',
        children: [
            {name: 'A1', value: 10},
            {name: 'A2', value: 20}
        ]
    },
    {name: 'B', value: 40},
    // 更多层级...
]

2. **初始化图表**：
- 首先，创建一个新的ECharts实例，并选择合适的容器。
- 然后，设置`series`数组里的第一个元素为`type: 'tree'`，并指定其他必要的配置，如标题、颜色等。

var myChart = echarts.init(document.getElementById('main'));

myChart.setOption({
    series: [{
        type: 'tree',
        data: yourData,
        // 其他配置...
    }]
});

3. **配置选项**：
- 可以调整层级显示效果（如展开折叠）、数据绑定、节点样式等。
- `children`属性用于指定子节点，`value`表示节点的数据值。

例如，可以设置节点的颜色深浅随着数值递增而变化：

series: [{
    type: 'tree',
    data: yourData,
    emphasis: {
        focus: 'ancestor'
    },
    label: {
        normal: {
            formatter: '{b}'
        },
        emphasis: {
            fontSize: '20',
            color: function(data) {
                return data.value > 50 ? '#91d3f6' : '#fff';
            }
        }
    },
    // 其他配置...
}]