ApexCharts饼图最后3个颜色渐变未生效问题求助

问题原因 #

1. gradientToColors参数格式错误：你设置了单个字符串#5c26ff，但饼图有10个系列。在3.35.3版本中，该参数需要传入与系列数量匹配的数组，否则后续系列无法正确触发渐变逻辑。
2. stops参数数值不合法：你设置的[2, 18, 28, 100, 60, 150]包含超过100的数值（150），且数组长度和系列数量不匹配，这会干扰渐变计算逻辑，导致部分系列渲染异常。

解决方案 #

不需要修改ApexCharts源文件，仅需调整填充渐变的配置项：

1. 将gradientToColors改为与series数量一致的数组（可统一用同一个目标色，也可给每个系列单独设置）；
2. 修正stops为0-100之间的百分比数组，数量建议与系列匹配，或使用默认均匀分布逻辑。

修改后的配置代码如下：

optionsos = {
    chart: {
        height: 225,
        type: "pie"
    },
    stroke: {
        curve: "smooth",
        width: 0
    },
    series: [30, 15, 25, 18, 20, 13, 15, 10, 23, 25],
    labels: ["Series 1", "Series 2", "Series 3", "Series 4", "Series 5", "Series 6", "Series 7", "Series 8", "Series 9", "Series 10"],
    colors: ["#99b3ff", "#4ca6ff", "#0080ff", "#006cd9", "#00468c", "#6c00d9", "#ffbfff", "#7396ff", "#3600d9", "#ff99ff"],
    plotOptions: {
      pie: {
        expandOnClick: true,
      }
    },
    fill: {
      type: 'gradient',
      gradient: {
        shade: 'dark',
        type: "horizontal",
        shadeIntensity: 0.5,
        // 改为与series数量匹配的数组，每个系列对应渐变目标色
        gradientToColors: Array(10).fill('#5c26ff'),
        inverseColors: true,
        opacityFrom: 1,
        opacityTo: 1,
        // 修正为0-100之间的百分比，数量与series匹配
        stops: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90],
        colorStops: []
      }
    },
    legend: {
        show: !1,
    },
};
chartart = new ApexCharts(document.querySelector("#pie_chart"), optionsos).render();

补充说明 #

如果需要给不同系列设置不同的渐变目标色，直接在gradientToColors数组对应位置替换颜色值即可，示例：

gradientToColors: ['#5c26ff', '#666666', '#999999', '#5c26ff', '#666666', '#999999', '#5c26ff', '#666666', '#999999', '#5c26ff']

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