echarts 交错柱状图

交错柱状图（stacked bar chart）是 ECharts 中一种常见的图表类型，它可以同时显示多个类别之间的数据比较，并且将各个类别的数据按照不同的系列进行堆叠展示。

以下是使用 ECharts 创建交错柱状图的基本步骤：

1. 引入 ECharts 库：

<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>

2. 创建一个 HTML 容器：

<div id="chart-container" style="width: 600px; height: 400px;"></div>

3. 初始化图表对象：

var chart = echarts.init(document.getElementById('chart-container'));

4. 配置图表选项：

var option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'shadow' }
  },
  legend: {
    data: ['系列1', '系列2', '系列3']
  },
  xAxis: {
    type: 'category',
    data: ['类别1', '类别2', '类别3', '类别4', '类别5']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '系列1',
      type: 'bar',
      stack: '总量',
      data: [120, 132, 101, 134, 90]
    },
    {
      name: '系列2',
      type: 'bar',
      stack: '总量',
      data: [220, 182, 191, 234, 290]
    },
    {
      name: '系列3',
      type: 'bar',
      stack: '总量',
      data: [150, 232, 201, 154, 190]
    }
  ]
};

5. 设置图表配置项并渲染：

chart.setOption(option);

以上代码中，通过配置项 `series` 的每个系列的 `stack` 属性为相同的值，从而使得柱状图能够堆叠显示。

你可以根据自己的需求修改数据和样式来创建一个交错柱状图。希望这能帮到你！