ApexCharts柱状图仅边框着色：如何实现整柱独立着色？

你的问题核心在于重复引入了ApexCharts脚本导致配置冲突，同时可简化颜色配置逻辑，以下是具体解决方案：

修改步骤 #

• 移除HTML中重复的ApexCharts脚本引用，仅保留一个版本（推荐用压缩版）
• 利用distributed: true配合全局colors数组实现单系列柱子分色，无需重复配置fill.colors
• 按需调整stroke.width，避免粗边框遮盖填充色

修改后的完整代码 #

HTML部分 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.6.12/apexcharts.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.slim.min.js"></script>
<div id="barchart"></div>

JavaScript部分 #

window.Apex = {
    chart: {
        foreColor: '#ccc',
        toolbar: {
            show: false
        },
    },
    stroke: {
        width: 1, // 缩小边框宽度，避免遮盖填充色
    },
    dataLabels: {
        enabled: false
    },
    tooltip: {
        theme: 'dark'
    },
    grid: {
        borderColor: "#535A6C",
        xaxis: {
            lines: {
                show: true
            }
        }
    }
};

var optionsBar = {
    chart: {
        height: 280,
        type: 'bar'
    },
    plotOptions: {
        bar: {
            columnWidth: '18%',
            horizontal: true,
            distributed: true // 开启单系列柱子分色
        },
    },
    colors: ['red', 'orange', 'green', 'orange', 'red'], // 直接配置每个柱子的颜色
    dataLabels: {
        enabled: true,
    },
    series: [{
        name: 'mmol/L',
        data: [14, 25, 50, 10, 1],
    }],
    xaxis: {
        categories: ['> 14.0', '10 - 14.0', '4 - 10', '4 - 3.8', '< 3.8'],
    },
    fill: {
        type: 'solid',
        opacity: 1 // 确保填充完全不透明
    }
}

var chartBar = new ApexCharts(
    document.querySelector("#barchart"),
    optionsBar
);

chartBar.render();

CSS部分（无修改） #

body {
  background: #343E59;
  color: #777;
  font-family: Montserrat, Arial, sans-serif;
}

.body-bg {
  background: #F3F4FA !important;
}

.content-area {
  margin: 0 auto;
}

关键说明 #

1. 重复脚本冲突：同时引入apexcharts.js和apexcharts.min.js会导致库内部逻辑混乱，是填充色配置失效、仅显示边框的核心原因。
2. distributed属性作用：开启plotOptions.bar.distributed: true后，ApexCharts会自动将colors数组的颜色依次分配给单系列的每个柱子。
3. stroke宽度调整：若保留较粗边框，可能在视觉上掩盖填充色，可根据需求灵活调整stroke.width数值。

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