如何在Apex Chart堆叠柱状图中同时使用渐变与单色填充

ApexChart支持为单个系列单独配置fill属性，无需全局统一填充模式，你只需要把两种填充规则分别写到对应的series配置项里即可。

具体修改点 #

• 移除全局的fill配置，改为在每个系列中单独定义填充规则
• 第一个Cost系列配置渐变填充，直接复用你之前注释的渐变参数即可
• 第二个系列配置为实心单色填充
• 可选优化：你当前配置的stackType: '10%'不符合常规堆叠柱状图的参数规则，要实现100%堆叠效果可以改为stackType: '100%'

修改后完整代码 #

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: '100%', // 按需调整堆叠模式
        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],
        // 单独配置渐变填充
        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
                    }
                ]
            }
        }
    }, {
        data: [12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12],
        // 单独配置单色填充
        fill: {
            type: 'solid'
        }
    }],
    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,
    },
    legend: {
        show: false,
    },
    colors: colors,
    grid: {
        row: {
            show: false,
        },
        borderColor: '',
        padding: {
            bottom: 5,
            top: 1
        }
    }
}

效果参考 #

内容的提问来源于stack exchange，提问作者moledro