React+MUI环境下Apex Bar Chart柱状颜色自定义问题咨询

你遇到的问题是因为在plotOptions.bar中设置了distributed: true，这个属性会强制每个柱子使用独立的颜色，从而覆盖了你在series中定义的color属性。以下是两种解决方式：

方式一：移除distributed属性（推荐，匹配你的需求） #

因为你需要Income系列统一橙色、Expenses系列统一绿色，不需要每个柱子单独配色，直接去掉distributed: true即可让series中的color属性正常生效：

修改后的plotOptions配置：

plotOptions: {
    bar: {
        borderRadius: 4,
        // 移除distributed: true
        columnWidth: '20%',
        endingShape: 'rounded',
        startingShape: 'rounded',
    },
},

series部分保持原有配置即可：

series={[
    {
        name: 'Income',
        data: [37, 57, 45, 75, 57, 40, 65],
        color: theme.palette.primary.main // 橙色
    },
    {
        name: 'Expenses',
        data: [32, 82, 23, 69, 90, 14, 60],
        color: theme.palette.success.main // 绿色
    },
]}

方式二：保留distributed属性（仅适用于特殊场景） #

如果你必须保留distributed: true，可以在options根级别添加colors数组，按顺序对应两个系列的颜色：

修改后的options配置：

options = {
    // 其他配置不变
    colors: [theme.palette.primary.main, theme.palette.success.main], // 第一个颜色对应Income，第二个对应Expenses
    plotOptions: {
        bar: {
            borderRadius: 4,
            distributed: true, // 保留该属性
            columnWidth: '20%',
            endingShape: 'rounded',
            startingShape: 'rounded',
        },
    },
    // 其他配置不变
};

此时series中的color属性可以删除，会被colors数组的配置覆盖。

内容的提问来源于stack exchange，提问作者Nabeel Ahmed Mufti