ApexCharts无法渲染系列值，提示无法映射NULL值问题排查

核心问题 #

报错“无法映射NULL值”的根本原因是：budgetData或expenseData在组件初始渲染时可能为null/undefined，此时直接调用map方法会抛出错误；另外你用的|| [0, 0, ...]逻辑无效——因为空数组是真值，不会触发后面的默认数组，而且即使数组存在，单个item.data可能为空或转换失败导致NaN，也会影响图表渲染。

具体修复步骤 #

1. 给Props设置默认空数组 #

在组件参数定义时，给budgetData和expenseData设置默认值，避免初始状态为null/undefined：

function ChartComponent({ DarkMode, budgetData = [], expenseData = [] }) {
  // ... 原有代码
}

2. 安全处理数据转换 #

对每个item.data做空值检查+转换失败兜底，确保每个数据点都是有效数字：

series: [
  {
    name: 'budget',
    data: budgetData.map(item => parseInt(item?.data) || 0)
  },
  {
    name: 'expenditure',
    data: expenseData.map(item => parseFloat(item?.data) || 0)
  }
],

• item?.data：用可选链避免item为null/undefined时访问data报错
• parseInt/parseFloat(...) || 0：如果转换结果是NaN（比如data为空字符串、非数字格式），自动替换为0，保证图表能正常渲染

3. 优化图表渲染时机 #

在useEffect里先确认数据有效再创建图表，避免不必要的渲染：

useEffect(() => {
  // 确保DOM引用和数据都存在
  if (!chartRef.current || !budgetData.length || !expenseData.length) return;

  const options = { /* ... 原有配置 */ };

  const chart = new ApexCharts(chartRef.current, options);
  chart.render();

  return () => {
    chart.destroy();
  };
}, [budgetData, expenseData]);

修改后的完整代码 #

import ApexCharts from 'apexcharts';
import { useEffect, useRef } from 'react';

function ChartComponent({ DarkMode, budgetData = [], expenseData = [] }) {
  const chartRef = useRef(null);

  useEffect(() => {
    if (!chartRef.current || !budgetData.length || !expenseData.length) return;

    const options = {
      chart: {
        type: 'bar'
      },
      stroke: {
        show: false
      },
      plotOptions: {
        bar: {
          horizontal: false,
          borderRadius: 5,
          borderRadiusApplication: 'around'
        }
      },
      colors: ['#CFC3FF', '#5D37F6'],
      series: [
        {
          name: 'budget',
          data: budgetData.map(item => parseInt(item?.data) || 0)
        },
        {
          name: 'expenditure',
          data: expenseData.map(item => parseFloat(item?.data) || 0)
        }
      ],
      xaxis: {
        categories: ['Education', 'Grocery', 'Recreational', 'Family', 'Clothes', 'HealthCare']
      }
    };

    const chart = new ApexCharts(chartRef.current, options);
    chart.render();

    return () => {
      chart.destroy();
    };
  }, [budgetData, expenseData]);

  return <div className={`p-5 w-96 h-80 rounded-[3rem] ${DarkMode ? 'bg-stone-900' : 'bg-white'}`} ref={chartRef} />;
}

export default ChartComponent;

额外注意点 #

• 你xaxis的categories里拼错了“Education”，建议修正避免分类名不一致
• API返回的data是字符串格式，转换为数字后才能被ApexCharts正确识别

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