Apex Donut charts如何居中对齐无标签总计值并修改颜色

两个问题的核心原因：

• 垂直不居中：ApexCharts 3.x版本环形图中心标签默认分为上下两个区块，上区块放配套说明label、下区块放总计值，即便将label设为空字符串，组件仍会为上区块预留垂直占位，导致总计值整体偏下
• 无法改颜色：原生配置项仅开放了label的颜色设置属性，总计值颜色没有提供直接配置入口

完整实现代码 #

JavaScript配置调整 #

在原有total配置项中补充基础对齐、字号配置，后续可配合CSS微调：

var options = {
  series: [20,40],
  plotOptions: {
    pie: {
      donut: {
        labels: {
          show: true,                       
          total: {
            show: true,
            showAlways: true,
            label: '',
            // 新增基础配置
            fontSize: '16px',
            textAlign: 'center',
            color: '#0065bd', // 可直接在此设置默认颜色，CSS配置优先级更高
            formatter: function (w) {
              return w.globals.seriesTotals.reduce((a, b) => {
                return `${a}/${b}`
              })
            }
          }
        }                   
      }
    }
  },        
  colors: ['#0065bd', '#dbecf8'],
  chart: {
    type: 'donut',
  },
  dataLabels: {
    enabled: false,
  },
  legend: {
    show: false,
  },
  responsive: [{
    breakpoint: 480,
    options: {
      chart: {
        width: 200
      }
    }
  }]
}
var chart = new ApexCharts(
  document.querySelector("#responsive-chart"),
  options
);

chart.render();

CSS样式覆盖 #

通过CSS清除空label的占位，调整总计值位置、自定义颜色：

@import url('https://fonts.googleapis.com/css?family=Poppins');

* {
  font-family: 'Poppins', sans-serif;
}

#chart {
  max-width: 260px;
  margin: 35px auto;
  opacity: 0.9;
}

/* 隐藏空label的残留占位 */
.apexcharts-datalabels-group .apexcharts-text:first-child {
  display: none !important;
}

/* 总计值居中、自定义颜色 */
.apexcharts-datalabels-group .apexcharts-datalabel-value {
  transform: translateY(0) !important; /* 可根据实际显示效果微调数值，比如偏下调为translateY(-2px) */
  fill: #0065bd !important; /* 替换为你需要的总计值颜色 */
  text-anchor: middle;
}

HTML结构（无需修改） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.35.3/apexcharts.min.js" integrity="sha512-yhdujT21BI/kqk9gcupTh4jMwqLhb+gc6Ytgs4cL0BJjXW+Jo9QyllqLbuluI0cBHqV4XsR7US3lemEGjogQ0w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div id="chart">
  <div id="responsive-chart"></div>
</div>

注意事项 #

• 垂直偏移的微调值根据你设置的字号大小可能略有差异，修改translateY的参数即可：数值越大元素越靠下，越小越靠上
• 如果不需要CSS强制覆盖颜色，直接修改JS配置中total.color的值即可生效
• 上述CSS选择器仅针对环形图中心的标签组生效，不会影响页面其他Apex图表的渲染

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