echarts-for-react 堆叠柱状图用法

在 echarts-for-react 中创建堆叠柱状图，你可以遵循以下步骤：

1. 安装依赖:
   首先，确保你已经安装了 echarts-for-react 和 echarts。

   npm install --save echarts-for-react
   npm install --save echarts
   

2. 引入 ReactEcharts:
   在你的 React 组件中，引入 echarts-for-react。

   import ReactEcharts from 'echarts-for-react';
   

3. 准备数据和配置:
   准备你的数据和图表配置，堆叠柱状图的关键在于设置 series 中的 stack 属性，使得具有相同 stack 值的系列堆叠在一起。

   const getOption = (data) => {
       return {
           title: {
               text: '堆叠柱状图示例'
           },
           tooltip: {},
           legend: {
               data: ['系列1', '系列2', '系列3']
           },
           xAxis: {
               data: ['类目1', '类目2', '类目3', '类目4']
           },
           yAxis: {},
           series: [
               {
                   name: '系列1',
                   type: 'bar',
                   stack: '总量',
                   data: [120, 132, 101, 134, 90, 230]
               },
               {
                   name: '系列2',
                   type: 'bar',
                   stack: '总量',
                   data: [60, 72, 81, 64, 50, 120]
               },
               {
                   name: '系列3',
                   type: 'bar',
                   stack: '总量',
                   data: [40, 42, 31, 44, 30, 100]
               }
           ]
       };
   };
   

4. 使用 ReactEcharts 组件:
   将配置好的选项传递给 ReactEcharts 组件。

   <ReactEcharts option={getOption(data)} />
   

5. 运行你的 React 应用:
   当你运行你的 React 应用时，堆叠柱状图应该会根据你的配置显示出来。

以上步骤提供了一个基本的指南来使用 echarts-for-react 创建堆叠柱状图。你可以根据自己的需求调整配置项，比如轴的数据、图例、标题等。记得查看 ECharts 的官方文档以获取更多高级配置选项和功能 。同时，确保你理解了 stack 属性的使用，这是实现堆叠效果的核心 。