Next.js + ApexCharts饼图无法更新问题排查求助

环境信息 #

• Next.js 15.2.5
• apexcharts 4.7.0
• react-apexcharts 1.7.0

问题描述 #

尝试两种方式更新饼图数据均失败：

1. 通过React State更新配置和数据
2. 通过ApexCharts.exec直接调用API更新

以下是原组件代码和动态导入代码：

原组件代码 #

"use client"
import ApexCharts, { ApexOptions } from "apexcharts";
import { useEffect, useState } from "react";
import Chart from 'react-apexcharts';

var initialOptions: ApexOptions = {
  chart: {
    id: "my-pie",
    width: 380,
    type: 'pie',
  },
  series: [44, 55, 13, 43, 22],
  labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
};

const ApexPieChartChangeView = () => {

      const [state, setState] = useState(initialOptions)

      const onChangeSeries1 = () => {
        const newLabels = ['Member A', 'Member B', 'Member C', 'Member D', 'Member E']
        const newSeries = [10, 30, 40, 5, 15]
        setState(prev => {
          return {...prev, labels: newLabels, series: newSeries }
        })
      }

      const onChangeSeries2 = () => {
        const newLabels = ['Member A', 'Member B', 'Member C', 'Member D', 'Member E']
        const newSeries = [10, 30, 40, 5, 15]
        ApexCharts.exec("my-pie", "updateOptions",  {...initialOptions, labels: newLabels, series: newSeries }, true)
      }

      useEffect(() => {
        console.log(`ApexPieChartChangeView on state changed ${JSON.stringify(state.labels)}`) //this is printed out each time onChangeSeries1 was called
      },[state])

      return (
        <div>    
          <Chart
              options={state}
              series={state.series}
              type="pie"
              width="500"  
          />
          <button onClick={onChangeSeries1}>Change series 1</button>
          <button onClick={onChangeSeries2}>Change series 2</button>
        </div> 
      )
}

export default ApexPieChartChangeView;

动态导入代码 #

import dynamic from 'next/dynamic'

const ApexPieChartChangeView = dynamic(() => import('./ApexPieChartChangeView'), { ssr: false });

问题原因及修复方案 #

方法1（State更新）失败原因 #

react-apexcharts的Chart组件要求options和series作为独立props传入，而你将series嵌套在options对象中管理。当更新state时，组件无法正确识别series的变化逻辑，导致图表不更新。

修复后的代码

"use client"
import ApexCharts, { ApexOptions } from "apexcharts";
import { useEffect, useState } from "react";
import Chart from 'react-apexcharts';

// 拆分配置：options仅存图表配置，series单独定义
const initialOptions: ApexOptions = {
  chart: {
    id: "my-pie",
    width: 380,
    type: 'pie',
  },
  labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
};
const initialSeries = [44, 55, 13, 43, 22];

const ApexPieChartChangeView = () => {
  // 拆分state，分别管理options和series
  const [options, setOptions] = useState(initialOptions);
  const [series, setSeries] = useState(initialSeries);

  const onChangeSeries1 = () => {
    const newLabels = ['Member A', 'Member B', 'Member C', 'Member D', 'Member E'];
    const newSeries = [10, 30, 40, 5, 15];
    // 分别更新labels和series
    setOptions(prev => ({ ...prev, labels: newLabels }));
    setSeries(newSeries);
  }

  const onChangeSeries2 = () => {
    const newLabels = ['Member A', 'Member B', 'Member C', 'Member D', 'Member E'];
    const newSeries = [10, 30, 40, 5, 15];
    // 分开调用updateOptions和updateSeries
    ApexCharts.exec("my-pie", "updateOptions", { ...initialOptions, labels: newLabels }, true);
    ApexCharts.exec("my-pie", "updateSeries", newSeries, true);
  }

  useEffect(() => {
    console.log(`labels更新：${JSON.stringify(options.labels)}`);
    console.log(`series更新：${JSON.stringify(series)}`);
  }, [options, series])

  return (
    <div>    
      <Chart
          options={options}
          series={series}
          type="pie"
          width="500"  
      />
      <button onClick={onChangeSeries1}>Change series 1</button>
      <button onClick={onChangeSeries2}>Change series 2</button>
    </div> 
  )
}

export default ApexPieChartChangeView;

方法2（ApexCharts.exec）失败原因 #

updateOptions方法仅用于更新图表配置（如labels、样式），数据更新需要单独调用updateSeries方法。原代码中把series放在updateOptions的参数里，无法触发数据更新。

修复点

将ApexCharts.exec拆分为两次调用：

// 更新labels配置
ApexCharts.exec("my-pie", "updateOptions", { ...initialOptions, labels: newLabels }, true);
// 更新series数据
ApexCharts.exec("my-pie", "updateSeries", newSeries, true);

验证说明 #

• 修复后点击两个按钮，饼图的标签和数据都会正确更新
• 动态导入代码无需修改，保持ssr: false即可避免window未定义错误

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