如何调整react-apexcharts雷达图的宽度与高度？

针对你遇到的雷达图尺寸无法调整的问题，这里有几个有效的调整方法：

1. 直接给Chart组件设置宽高属性 #

react-apexcharts的Chart组件支持直接传入width和height属性，这比在options里设置更直接且不易受父容器影响。你可以直接给组件设置固定值或百分比：

return <Chart options={options} series={props.series} type="radar" width={600} height={500} />;

如果需要响应式效果，也可以传入百分比（比如width="100%"），但必须确保父容器有明确的宽高值，否则百分比会失去参考基准。

2. 调整plotOptions.radar.size #

你代码里的plotOptions.radar.size设置为140，这个值控制的是雷达图多边形本身的大小（而非整个图表容器）。增大这个值可以让雷达图的核心区域变大：

plotOptions: {
  radar: {
    size: 200, // 调大这个值来放大雷达图核心区域
    polygons: {
      fill: {
        colors: ["#f8f8f8", "#fff"],
      },
    },
  },
},

3. 确保父容器有明确尺寸 #

如果坚持使用options里的height: "100%"和width: "100%"，需要给RadarChart组件的父元素设置固定宽高，比如在使用组件的地方：

<div style={{ width: "800px", height: "600px" }}>
  <RadarChart series={yourSeries} categories={yourCategories} />
</div>

4. 优化布局避免内容截断 #

增大尺寸后，可能需要调整图例或网格的padding来避免内容被截断，比如调整图例位置或网格内边距：

legend: {
  show: true,
  position: "bottom", // 改为底部避免顶部空间不足
  horizontalAlign: "center",
  fontSize: "14px",
},
grid: {
  padding: {
    left: 20,
    right: 20,
    top: 10,
    bottom: 10,
  },
},

修改后的完整示例代码 #

import { ApexOptions } from "apexcharts";
import React from "react";
import Chart from "react-apexcharts";

type RadarChartProps = {
  series: ApexOptions["series"];
  categories: string[];
};

const RadarChart: React.FC<RadarChartProps> = (props) => {
  const options: ApexOptions = {
    chart: {
      type: "radar",
      toolbar: {
        show: false,
      },
      zoom: {
        enabled: true,
      },
      sparkline: {
        enabled: false,
      },
    },

    xaxis: {
      categories: props.categories,
    },
    dataLabels: {
      enabled: false,
    },
    grid: {
      padding: {
        left: 20,
        right: 20,
        top: 10,
        bottom: 10,
      },
    },

    plotOptions: {
      radar: {
        size: 200,
        polygons: {
          fill: {
            colors: ["#f8f8f8", "#fff"],
          },
        },
      },
    },
    markers: {
      size: 4,
      colors: ["#0000FF"],
      strokeWidth: 0,
    },
    tooltip: {
      y: {
        formatter(val: number): string {
          return `${val}`;
        },
      },
    },
    legend: {
      show: true,
      position: "bottom",
      horizontalAlign: "center",
      fontSize: "14px",
    },
  };
  return <Chart options={options} series={props.series} type="radar" width={600} height={500} />;
};

export default RadarChart;

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