ApexCharts在React中缩放异常及多图表添加问题求助

原因分析 #

1. Flex容器container设置align-items: center，导致子元素无法自动拉伸填满容器高度，图表父元素的高度无法正确传递给Chart组件。
2. 媒体查询逻辑冲突：@media screen and (min-width: 992px)强制容器改为纵向排列，窗口缩小时触发该规则会直接压缩图表高度；同时min-height的媒体查询进一步打乱布局逻辑。
3. .block3使用固定比例flex: 0 0 calc(29%)，窗口缩小时无法自适应调整高度，且未设置最小高度限制，导致图表被过度压缩。

修复步骤 #

1. 调整Flex容器对齐方式
   修改.container的CSS，将align-items: center改为align-items: stretch，让子元素自动填满容器高度：

   .container {
       display:flex;
       flex-direction:row;
       justify-content:center;
       align-items: stretch; /* 替换原有的center */
       height:30vh;
       border-bottom:solid 1px;
       border-color:#d2d2d3;
   }
   

2. 修复媒体查询逻辑
   删除原有的错误媒体查询，改用max-width触发移动端响应式规则，避免窗口缩小时强制纵向排列：

   @media screen and (max-width: 992px) {
       .container {
           flex-direction: column;
           height: auto; /* 让容器高度自适应内容 */
           padding: 1rem 0;
       }
       .block3 {
           min-height: 300px; /* 设置图表最小高度，保证可读性 */
           margin: 0.5rem 0;
       }
   }
   

3. 优化图表容器样式
   修改.block3的CSS，让它在Flex布局中自适应分配空间，并设置最小高度：

   .block3 {
       flex: 1; /* 替换固定比例，自适应剩余空间 */
       min-height: 250px; /* 防止过度压缩 */
       background-color:#ffffff;
       display:flex;
       flex-direction:column;
       padding:1px;
       box-sizing:border-box;
       border:1px solid #d2d2d3;
       border-radius:5px;
   }
   

4. 配置ApexChart自适应高度
   在Chart组件中添加minHeight属性，并设置图表配置为自动高度：

   <Chart
       options={{...this.state.options, chart: { height: 'auto' }}}
       series={this.state.series}
       type="bar"
       width="100%"
       height="100%"
       minHeight="200px"
   />
   

原因分析 #

你写的function App { class Bar extends App { ... } }完全不符合React语法：既不是合法的函数组件定义，又错误地让类组件继承另一个组件（正确应该继承React.Component），导致代码无法编译，页面直接空白。

修复步骤 #

类组件写法 #

import React, { Component } from 'react';
import Chart from 'react-apexcharts';

// 独立定义图表组件
class BarChart extends Component {
    constructor(props) {
        super(props);
        this.state = {
            options: {
                xaxis: { categories: ['A', 'B', 'C'] },
                // 其他图表配置
            },
            series: [{ name: '数据', data: [30, 40, 45] }]
        };
    }

    render() {
        return (
            <Chart
                options={this.state.options}
                series={this.state.series}
                type="bar"
                width="100%"
                height="100%"
            />
        );
    }
}

// 主App组件
class App extends Component {
    render() {
        return (
            <div>
                <header id="header">
                    <h1>innovation platform portal</h1>
                </header>
                <div className="container">
                    <div id="flex1">
                        {/* 其他元素 */}
                        <div className="block block3">
                            <BarChart />
                        </div>
                    </div>
                    <div className="block block3">
                        <BarChart />
                    </div>
                </div>
            </div>
        );
    }
}

export default App;

函数组件写法（React 16.8+ 推荐） #

import React, { useState } from 'react';
import Chart from 'react-apexcharts';

const BarChart = () => {
    const [options] = useState({
        xaxis: { categories: ['A', 'B', 'C'] },
        // 其他图表配置
    });
    const [series] = useState([{ name: '数据', data: [30, 40, 45] }]);

    return (
        <Chart
            options={options}
            series={series}
            type="bar"
            width="100%"
            height="100%"
        />
    );
};

const App = () => {
    return (
        <div>
            <header id="header">
                <h1>innovation platform portal</h1>
            </header>
            <div className="container">
                <div id="flex1">
                    {/* 其他元素 */}
                    <div className="block block3">
                        <BarChart />
                    </div>
                </div>
                <div className="block block3">
                    <BarChart />
                </div>
            </div>
        </div>
    );
};

export default App;

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