Apex Charts饼图移动端数据标签字号响应式调整问题

你的问题出在响应式配置的层级错误上——移动端的样式配置没有嵌套到dataLabels节点下，导致Apex Charts无法识别这个样式规则。

正确的配置应该把移动端的style放在options.dataLabels内部，完整示例如下：

// 基础配置
dataLabels: {
  style: {
    fontSize: "15px",
    fontFamily: "DM sans",
    fontWeight: "light",
  },
  formatter(val, opts) {
    let labelIndex = [50, 15, 5, 5, 2.5, 12.5, 10];
    const name = opts.w.globals.labels[opts.seriesIndex];
    return [name, labelIndex[opts.seriesIndex] + "%"];
  },
},
// 响应式配置
responsive: [{
  breakpoint: 500,
  options: {
    dataLabels: { // 必须嵌套到dataLabels下
      style: {
        fontSize: "10px",
        fontFamily: "DM sans",
        fontWeight: "light",
      }
    }
  },
}]

关键注意点： #

• 响应式配置中的样式必须和基础配置的结构保持一致，基础配置里style在dataLabels下，移动端配置也要对应嵌套
• 不需要重复写formatter，响应式配置只会覆盖指定的属性，未指定的会沿用基础配置的设置
• 可以根据实际需求调整breakpoint的数值（比如改成768适配平板）

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