Apexcharts.js如何修改柱状图系列数值的字体颜色？

完全可行，分两种场景对应不同配置项，帮你理清：

1. 修改单个柱子上的数值标签颜色 #

单个柱子的数值标签配置不在plotOptions里，而是在**顶级的dataLabels**配置项中设置：

const chartOptions = {
  // 其他配置...
  dataLabels: {
    enabled: true, // 确保数值标签处于开启状态
    style: {
      colors: ['#2ecc71'], // 这里设置字体颜色，支持传入数组对应不同系列的颜色
      fontSize: '12px',
      fontWeight: '600'
    }
  },
  // 其他配置...
};

2. 修改堆叠柱状图的总计值颜色 #

如果是堆叠柱状图顶部的总计数值，才需要在plotOptions.bar.dataLabels.total里配置：

const chartOptions = {
  // 其他配置...
  plotOptions: {
    bar: {
      stacked: true,
      dataLabels: {
        total: {
          enabled: true,
          style: {
            colors: ['#e74c3c'], // 总计值的字体颜色
            fontSize: '14px'
          }
        }
      }
    }
  },
  // 其他配置...
};

关于隐藏数值标签的规范方法 #

除了用opacity隐藏，更规范的方式有两种：

• 直接关闭数值标签：把dataLabels.enabled设为false
• 保留标签但隐藏文字：在dataLabels.style.colors里设为'transparent'

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