reactjs中的垂直堆积条形图

Question

我正在我的reactjs项目中研究图表。我将顶点图表用于图表。我在堆积条形图中有问题。我想创建一个堆积的条形图，但由于我是菜鸟而无法做到。我试图编码，我制作了所附的条形图。

• 代码如下：

import React from "react";
import '../../../assets/css/cp-style.css';
import Chart from 'react-apexcharts'
import SourceSystemRating from '../../../assets/img/customer-profiling/Source system rating.svg';
import ArrowDown from '../../../assets/img/customer-profiling/Down Arro.svg';
import CreditCard from '../../../assets/img/customer-profiling/credit-card.svg'
import internetBanking from '../../../assets/img/customer-profiling/Internet Banking.svg'
import Credit from '../../../assets/img/customer-profiling/credit-card11.svg';
import debitCard from '../../../assets/img/customer-profiling/debit-card 1.svg';
import Barchartdoubleas from '../../Apex-Charts/bar-charts-components/BasicBarChart'
import StackedColumnsChart from '../../Apex-Charts/column-charts-components/StackedColumnsChart';

class TransactionPoints extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            options: {
               
                chart: {
                    stacked: true,
                    toolbar: {
                        show: false
                    },
                    zoom: {
                        enabled: true
                    }
                },
                responsive: [{
                    breakpoint: 480,
                    options: {
                        legend: {
                            position: 'right',
                            offsetY: 0,
                          height: 230,
                        }
                    }
                }],
                plotOptions: {
                    bar: {
                        horizontal: false,
                    },
                },
                xaxis: {

                    categories: ['', 'Earn', '', '', '', '', '',
                        'Burn', ''
                    ],
                },
                legend: {
                    position: 'right',
                    offsetY: 9000
                },
                fill: {
                    opacity: 1
                },
                colors: [ '#fcaf33','#a85531','#4490d7' ,'#a8a331',],

            },
            series: [{
                name: 'Credit Card',
                data: [0, 0, 0, 0, 0, 0, 0, 450, 0]
            }, {
                name: 'PC',
                data: [0, 350, 0, 0, 0, 0, 0, 0, 0]
            }, {
                name: 'Naheed',
                data: [0, 200, 0, 0, 0, 0, 0, 0, 0]
            }, {
                name: 'Zamana',
                data: [0, 100, 0, 0, 0, 0, 0, 0, 0]
            }],
        }
    }

    render() {
        return (
            <div className='container-block' >
                <div className="car mb-4" style={{ height: '420px' }}>
                    <div className="car-body">
                        <div className='card-div'>

                            <h7 className="card-title"><b>Transaction Points</b></h7>
                            <div id="chart" className="apexcharts-content">
                                <Chart options={this.state.options} series={this.state.series} type="bar" height={350} />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}
export default TransactionPoints;

我想创建上面给出的图像。