Echarts如何实现柱状图堆叠效果

要在 ECharts 中实现柱状图的堆叠效果，你需要按照以下步骤操作：

1. 引入 ECharts 库

确保你已经在项目中引入了 ECharts 库。如果还没有，请访问 ECharts 官网（https://echarts.apache.org/）下载并引入。

2. 准备数据

准备你想要展示的数据。堆叠柱状图需要将每个系列的值分别存储在一个数组中，并将这些数组放入一个名为 series 的对象中。

例如：

const data = [
  ['A', 'B', 'C', 'D'],
  [120, 132, 101, 134],
  [220, 182, 191, 234],
  [150, 232, 201, 154]
];

3. 配置 ECharts 选项

创建一个名为 option 的对象，并设置相关的配置项。要实现堆叠效果，需要将 series 中的 stack 属性设置为相同的值。

const option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['Series 1', 'Series 2', 'Series 3']
  },
  xAxis: {
    type: 'category',
    data: data[0]
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Series 1',
      type: 'bar',
      stack: 'stack1',
      data: data[1]
    },
    {
      name: 'Series 2',
      type: 'bar',
      stack: 'stack1',
      data: data[2]
    },
    {
      name: 'Series 3',
      type: 'bar',
      stack: 'stack1',
      data: data[3]
    }
  ]
};

4. 初始化 ECharts 实例

在 HTML 页面中创建一个用于渲染图表的容器元素，例如：

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

然后，在 JavaScript 中初始化 ECharts 实例，并将 option 对象传递给它：

const chart = echarts.init(document.getElementById('chart'));
chart.setOption(option);

现在，你应该可以在页面上看到一个具有堆叠效果的柱状图。你可以根据需要调整 option 对象中的配置项来自定义图表的外观和行为。