Echarts设置opacity时SplitLine与AxisLine重叠问题求助

这个问题在ECharts开发者群体里挺常见的，本质是splitLine默认会和axisLine在同一位置绘制，两条opacity为0.3的黑线叠加后，视觉上透明度相当于0.6，看起来像是重叠变粗了。

你当前用color数组设置第一条为none的临时方法虽然有效，但需要手动维护数组长度，当坐标轴数据变化时容易出错。这里有两个更优雅的解决方案：

方案1：设置splitLine的onZero为false（适用于数值型坐标轴） #

通过关闭splitLine在轴线位置的显示，直接避免重叠：

xAxis: {
    axisLine: {
       lineStyle: {
         color: 'black',
         opacity: 0.3,
         width: 1,
      }
    },
    splitLine: {
       onZero: false, // 禁止在轴线位置绘制分割线
       lineStyle: {
         color: 'black',
         opacity: 0.3,
         width: 1,
         type: 'dashed'
      }
    }
}

onZero是ECharts内置的配置项，默认值为true，控制分割线是否在轴线（0值对应的位置）处显示，设为false后，splitLine会从第一个刻度位置开始绘制，不再与axisLine重叠。

方案2：用splitLine.filter过滤第一条分割线（适用于类目轴等场景） #

如果是类目轴，或者需要更灵活的控制，可以通过过滤函数跳过第一条分割线：

xAxis: {
    type: 'category',
    data: ['项1', '项2', '项3', '项4'],
    axisLine: {
       lineStyle: {
         color: 'black',
         opacity: 0.3,
         width: 1,
      }
    },
    splitLine: {
       filter: (value, index) => index !== 0, // 过滤索引为0的分割线
       lineStyle: {
         color: 'black',
         opacity: 0.3,
         width: 1,
         type: 'dashed'
      }
    }
}

filter函数会遍历每条分割线，返回true则显示，false则隐藏。这里直接跳过第一条分割线，无需手动维护color数组，适配数据动态变化的场景。

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