React中ApexCharts环形图标签不显示的问题求助

问题现象 #

• API返回的JSON数据可正常渲染环形图，但中心的百分比标签始终显示0
• 修改ChartComponent内的配置（如fontSize）时，标签会短暂显示正确数值，页面渲染完成后又变回0

问题截图 #

当前显示状态：

修改配置后的临时状态：

问题根源 #

1. 闭包与组件更新机制冲突：ChartCard组件中options对象每次渲染都会重新创建，但ApexCharts可能未正确检测到formatter函数的更新，导致仍调用旧的formatter（捕获了初始的data=0）
2. API字段拼写错误：API返回的键是forth，但App组件中使用apiData['fourth']读取，导致第四个图表始终获取不到正确值

修复步骤 #

步骤1：修正API字段拼写错误 #

在App组件中，将第四个ChartCard的value属性从apiData['fourth']改为apiData['forth']：

<ChartCard title="Commercial And Pipeline [NAM]" value={apiData ? apiData['forth'] : 0}></ChartCard>

步骤2：缓存配置对象避免闭包问题 #

在ChartCard组件中，使用useMemo缓存options和series，确保只有当依赖项变化时才重新创建，让ApexCharts能正确更新标签：

首先导入useMemo：

import { useMemo } from 'react';

然后修改ChartCard组件的代码：

export default function ChartCard(props) {
  const data = props.value;

  // 用useMemo缓存series，依赖data变化
  const series = useMemo(() => [data, 100 - data], [data]);

  // 用useMemo缓存options，依赖props.title和data变化
  const options = useMemo(() => ({
        colors: ["#0ead69", "#e71d36"],
        labels: ["Progress", "Lapse"],
        title: {
        text: props.title,
        align: "center",
        style: {
            fontSize: "15px",
            fontWeight: "normal",
            textDecoration: "underline",
        },
        },
        stroke: {
        width: 0,
        },
        legend: {
        show: false,
        },
        dataLabels: {
        enabled: false,
        },
        plotOptions: {
            pie: {
                expandOnClick: true,
                donut: {
                    background: "white",
                    labels: {
                        show: true,
                        total: {
                            show: true,
                            fontSize: "15",
                            fontWeight: 10,
                            formatter: () => `${data}%`,
                        },
                        name: {
                            show: false,
                        },
                        value: {
                            show: true,
                        },
                    },
                },
            },
        },
    }), [props.title, data]);

  return (
    <div className={styles.ChartDiv}>
      <Chart
        type="donut"
        width="100%"
        height={140}
        series={series}
        options={options}
      />
    </div>
  );
}

步骤3（可选）：使用ApexCharts内置参数获取数值 #

可以修改formatter函数，直接使用ApexCharts提供的全局参数获取series总和，避免依赖外部变量：

formatter: function(w) {
  // 取第一个series值（即进度值）
  return w.globals.series[0] + '%';
}

验证 #

修复后，切换月份或刷新页面，环形图中心的百分比标签会稳定显示正确数值，不会再变回0。

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