echarts柱状图堆叠

ECharts提供了堆叠柱状图的功能，可以用来展示多个数据系列在同一类别上的堆叠情况。堆叠柱状图通过将各个数据系列的值叠加在一起，形成堆叠效果。

要创建一个堆叠柱状图，首先需要配置x轴和y轴的数据。x轴通常表示不同的类别或时间，y轴表示对应类别的数据值。然后，通过设置series的stack属性为相同的值，将数据系列进行堆叠。

下面是一个使用ECharts创建堆叠柱状图的示例代码：

// 导入ECharts库
import echarts from 'echarts';

// 创建一个具有堆叠功能的柱状图
const myChart = echarts.init(document.getElementById('chart'));

// 配置x轴和y轴的数据
const option = {
  xAxis: {
    type: 'category',
    data: ['类别1', '类别2', '类别3', '类别4', '类别5']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '系列1',
      type: 'bar',
      stack: '堆叠',
      data: [120, 200, 150, 80, 70]
    },
    {
      name: '系列2',
      type: 'bar',
      stack: '堆叠',
      data: [220, 180, 230, 120, 170]
    },
    {
      name: '系列3',
      type: 'bar',
      stack: '堆叠',
      data: [150, 120, 200, 80, 130]
    }
  ]
};

// 将配置应用到图表中
myChart.setOption(option);

在上述代码中，我们创建了一个堆叠柱状图，其中有三个数据系列（系列1、系列2、系列3）。这些系列的数据将在同一类别上进行堆叠展示。通过设置series的stack属性为相同的值，实现了堆叠效果。

这只是一个简单的示例，你可以根据实际需求进行更多的定制和配置。详细的使用方法和更多功能，请参考ECharts的官方文档。

<em>1</em>
#### 引用[.reference_title]
- *1* [ECharts -堆叠柱状图](https://blog.csdn.net/weixin_43102784/article/details/112784028)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}} ] [.reference_item]
[ .reference_list ]