react-apexcharts渲染基础柱状图时图表不可见问题求助

问题现象 #

使用react-apexcharts渲染基础柱状图时页面无图表内容，经 devtools 确认组件已正常挂载、内部配置与数据无误，可通过图表自带的右上角操作菜单正常导出完整图表文件，直接复用官方示例代码仍无法解决问题。
复现代码如下：

const CustomChart: React.FC = () => {
    const [data, setData] = useState({
    options: {
        chart: {
            id: 'apexchart-example'
        },
        xaxis: {
            categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
        }
    },
    series: [{
        name: 'series-1',
        data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
    }]
});

return (
    <Chart
        options={data.options}
        series={data.series}
        type='bar'
        width={500}
    />
);

当前项目依赖版本：

• react-apexcharts: ^1.4.0
• react: ^17.0.2
• apexcharts: ^3.35.3

排查与解决步骤 #

能正常调出图表菜单、导出文件正常，说明图表逻辑层完全正常，问题100%出在渲染尺寸、CSS样式冲突或渲染时机层面，按优先级逐一排查即可：

1. 补全组件高度属性
   你当前代码只给Chart组件传入了width参数，未设置height。ApexCharts在未显式传入高度、且父容器无固定高度时，生成的SVG画布高度会默认计算为0，直接表现就是页面看不到内容但交互菜单正常。直接给组件加上固定高度即可：

   <Chart
       options={data.options}
       series={data.series}
       type='bar'
       width={500}
       height={350}
   />
   

2. 排查全局CSS样式冲突
   检查项目内的全局样式重置文件，是否对svg、rect、path这类基础元素设置了opacity: 0、fill: none、display: none、visibility: hidden之类的重置规则，这类规则会直接误伤ApexCharts生成的图表元素。可临时给图表外层容器加专属类名，写入以下样式验证：

   .chart-wrap svg {
       opacity: 1 !important;
       fill: initial !important;
       visibility: visible !important;
   }
   

3. 检查渲染时机与SSR适配
   • 如果项目使用Next.js、Remix这类带服务端渲染的框架，ApexCharts依赖浏览器DOM API，服务端渲染输出的内容无法正常初始化，需要动态导入组件并关闭SSR：

     import dynamic from 'next/dynamic'
     const Chart = dynamic(() => import('react-apexcharts'), { ssr: false })
     

   • 如果图表放在Tab切换、折叠面板这类默认隐藏的容器中，组件初始化时父容器宽高为0，会导致图表画布尺寸计算异常，等容器显示后给Chart组件更新key属性强制重绘即可。
4. 排除依赖安装异常
   上述方案都无效时，删除node_modules文件夹与包管理lock文件（package-lock.json/yarn.lock/pnpm-lock.yaml），重新执行依赖安装命令，排除多版本apexcharts冲突、依赖文件损坏的问题。

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