如何移除或覆盖CSS fill属性 解决Apexcharts柱状图颜色被覆盖问题

原有方法失效原因 #

• 选择的是外层.accordion svg根元素，但实际覆盖柱形颜色的CSS规则作用在柱形对应的<path>子元素上，修改根元素fill无法覆盖子元素优先级更高的样式
• jQuery对象本身无style属性，直接调用.style.removeProperty会报错，需先转为原生DOM对象
• 样式修改执行时机早于Apexcharts渲染完成时间，修改后被图表渲染逻辑覆盖

可行方案（按优先级排序） #

方案1：通过Apexcharts配置强制指定柱形样式（最优） #

直接在图表初始化配置里设置柱形的内联填充样式，内联样式优先级高于外部CSS文件规则，不需要额外DOM操作：

const options = {
  // 保留你原有其他配置
  plotOptions: {
    bar: {
      distributed: true, // 开启默认多色分配逻辑
    }
  },
  chart: {
    events: {
      // 渲染完成后兜底修正样式
      rendered: function(chart) {
        document.querySelectorAll('.apexcharts-bar-series .apexcharts-series path').forEach(el => {
          el.style.removeProperty('fill');
          // 也可直接强制赋值对应系列的默认配色
          // el.style.fill = chart.w.globals.colors[el.getAttribute('series-index')]
        })
      }
    }
  }
}

方案2：动态插入样式规则覆盖冲突CSS #

无需修改原CSS文件，直接在页面中插入更高优先级的样式规则，覆盖掉冲突的fill设置：

const style = document.createElement('style');
style.innerHTML = `
/* 选择器优先级高于原冲突规则即可，可根据实际业务调整 */
.accordion svg .apexcharts-bar-series path {
  fill: unset !important;
}
`;
document.head.appendChild(style);

方案3：修正原DOM操作写法 #

如果要沿用DOM操作思路，需要修正写法且在图表渲染完成后执行：

// 要放在Apexcharts渲染完成的回调逻辑中执行
// 修正写法1：移除svg根元素的fill
$('.accordion svg')[0].style.removeProperty('fill');
// 修正写法2：清空所有柱形元素的fill
$('.apexcharts-bar-series path').css('fill', '');

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