react-apexcharts图表无法撑满父容器 如何使其适配父容器尺寸

核心修改点 #

• 首先删除Chart组件上硬编码的固定宽度width="150"，替换为width="100%"，如需自适应高度可同时添加height="100%"属性。
• 在图表配置中关闭所有默认边距，具体修改如下：
  1. 在chart配置项新增offsetX: 0、offsetY: 0，清除图表本身的偏移边距
  2. 在grid配置中新增padding属性，将上下左右内边距全部设为0
  3. 在xaxis和yaxis配置中分别新增padding属性，清除坐标轴默认的左右、上下边距
• 需确保图表的父容器设置了明确的宽高值，不可使用auto等内容自适应尺寸，否则图表无法正确继承父容器尺寸。

修改后的完整代码 #

import Chart from "react-apexcharts";

const SimpleChart = () => {
    const data = {
        series: [{
          name: 'series1',
          data: [31, 40, 28, 51, 42, 109, 100]
        }],
        options: {
          chart: {
            type: 'area',
            toolbar: { show: false },
            offsetX: 0,
            offsetY: 0
          },
          dataLabels: {
            enabled: false
          },
          legend: {
            show: false
          },
          stroke: {
            curve: 'smooth'
          },
          grid: { 
            show: false,
            padding: {
              top: 0,
              right: 0,
              bottom: 0,
              left: 0
            }
          },
          xaxis: {
            labels: { show: false },
            axisBorder: { show: false },
            axisTicks: { show: false },
            type: 'datetime',
            categories: ["2018-09-19T00:00:00.000Z", "2018-09-19T01:30:00.000Z", "2018-09-19T02:30:00.000Z", "2018-09-19T03:30:00.000Z", "2018-09-19T04:30:00.000Z", "2018-09-19T05:30:00.000Z", "2018-09-19T06:30:00.000Z"],
            padding: {
              left: 0,
              right: 0
            }
          },
          yaxis: { 
            labels: { show: false },
            padding: {
              top: 0,
              bottom: 0
            }
          },
          tooltip: {
            enabled: false
          },
        },
    };

    return (
        <Chart
            options={data.options}
            series={data.series}
            width="100%"
            type="area"
        />
    )
}

export default SimpleChart

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