ApexCharts网格线颜色无法修改，求正确配置方法

云上老周

2026-7-9

问题：无法修改图表Y轴网格线颜色

我尝试修改Y轴线条或边框线条的颜色，以下是我使用的配置代码：

grid: {
    borderColor: "#90A4AE",
    color: '#D0D4D9',
    yaxis: { 
        color: '#D0D4D9',
        borderColor: "#ffffff4f",
        lines: {
            backgroundColor: "#ffffff4f",
            borderColor: "#ffffff4f",
                style: {
                    color: '#D0D4D9',
                    borderColor: "#ffffff4f",
                },
        }
    }, 
},

但始终无法修改图中偏蓝色的线条颜色，我确定这些是网格线，按理应能修改颜色，请问我哪里操作有误？

解决方案

你的配置层级错误，yaxis不能嵌套在grid配置内，主流图表库的Y轴网格线配置要么是顶层独立配置项，要么在专属的yAxis/yaxis配置对象里，而非grid的子属性。
以ApexCharts为例，正确的Y轴网格线颜色配置写法：

yaxis: {
    grid: {
        borderColor: '#D0D4D9', // Y轴边框颜色
        color: '#D0D4D9' // Y轴网格线颜色
    }
},
grid: {
    borderColor: "#90A4AE" // 整体网格边框颜色
}

若是ECharts，配置方式如下：

yAxis: {
    splitLine: {
        lineStyle: {
            color: '#D0D4D9' // 网格线颜色
        }
    },
    axisLine: {
        lineStyle: {
            color: '#ffffff4f' // Y轴轴线颜色
        }
    }
},
grid: {
    borderColor: "#90A4AE"
}