如何在Apex Chart中同时使用渐变和单色？

Question

如何为一个条形图列添加渐变（混合两种颜色）并在其顶部堆叠另一列（单色）？

目前，我正在尝试弄清楚如何在 ApexChart.js 中实现渐变和单色图案。至于现在我只能同时使用一个...

JavaScript：

var colors = ["#A865AA", "#222130",];
var dataColors = $("#monthlycost-ApexChart").data('colors');
if (dataColors) {
    colors = dataColors.split(",");
}
var options = {
    chart: {
        height: 260,
        type: 'bar',
        stacked: true,
        stackType: '10%',
        toolbar: {
            show: false
        },
    },
    stroke: {
        curve: 'smooth',
        width: 1
    },
    grid: {
        column: {
            colors: ['transparent', '#e5e5e5'],
        },


    },
    plotOptions: {
        bar: {
            columnWidth: '20%',
            endingShape: 'rounded',
        }
    },
    dataLabels: {
        enabled: false
    },
    series: [{
        name: 'Cost',
        data: [5.7, 5.7, 5.4, 5.4, 5.2, 7.8, 5.6, 5.4, 5.7, 0, 0, 0]
    }, {

        data: [12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12]
    }],
    xaxis: {
        labels: {
            show: true,
            style: {
                fontSize: '10px'
            },
            padding: {
                top: 0,
                bottom: 20
            },
        },
        offsetY: -10,
        position: 'bottom',
        axisBorder: {
            show: false
        },
        axisTicks: {
            show: false
        },
        lines: {
            show: false
        },
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        padding: {
            top: -5,
            bottom: 0
        },
    },
    yaxis: {
        axisBorder: {
            show: false
        },
        axisTicks: {
            show: false
        },
        lines: {
            show: false
        },
        title: {
            text: '£0,000',
            style: {
                fontWeight: 400,
                fontSize: '9px',
            }
        },
        tickAmount: 5,
        forceNiceScale: false,
        decimalsInFloat: 0,
        max: 10,
    },
    fill: {
        type: "gradient",
       /* gradient: {
            shadeIntensity: 1,
            opacityFrom: 0.7,
            type: 'vertical',
            opacityTo: 0.9,
            colorStops: [
                {
                    offset: 40,
                    color: "#EF9432",
                    opacity: 1
                },
                {
                    offset: 100,
                    color: "#A865AA",
                    opacity: 1
                }
        
            ]
        }*/
    },
    legend: {
        show: false,
    },
    
    colors: colors,
    grid: {
        row: {
            show: false,
        },
        borderColor: '',
        padding: {
            bottom: 5,
            top: 1

        }
    }
}

Answer 1

你应该使用分布式财产

plotOptions: {
        bar: {
          distributed: true
        }
      }

Answer 2

您必须传递一个数组才能允许像这样的填充类型组合，

fill: {
  type: 'gradient' 
}
/* For multiple fill types */
fill: {
  type: ['solid', 'gradient']
}

这里是参考文档https://apexcharts.com/docs/options/fill/