如何在Flutter中制作饼状雷达图？

可以使用fl_chart包来实现这类环形雷达图，以下是具体实现步骤：

1. 添加依赖 #

在pubspec.yaml中引入fl_chart：

dependencies:
  fl_chart: ^0.65.0

2. 核心代码实现 #

数据定义 #

先定义每个维度的数据模型：

class RadarDimension {
  final String label;
  final double value;
  final Color color;

  RadarDimension(this.label, this.value, this.color);
}

图表实现 #

创建包含雷达图的Widget：

import 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.dart';

class PieRadarChart extends StatefulWidget {
  const PieRadarChart({super.key});

  @override
  State<PieRadarChart> createState() => _PieRadarChartState();
}

class _PieRadarChartState extends State<PieRadarChart> {
  final List<RadarDimension> _dimensions = [
    RadarDimension('速度', 85, const Color(0xFFFF6B6B)),
    RadarDimension('力量', 70, const Color(0xFF4ECDC4)),
    RadarDimension('耐力', 90, const Color(0xFF45B7D1)),
    RadarDimension('精准', 65, const Color(0xFFFFE66D)),
    RadarDimension('反应', 75, const Color(0xFF96CEB4)),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: SizedBox(
          width: 320,
          height: 320,
          child: Stack(
            alignment: Alignment.center,
            children: [
              RadarChart(
                RadarChartData(
                  // 设置环形雷达形状
                  radarShape: RadarShape.circle,
                  // 数据系列配置
                  dataSets: [
                    RadarDataSet(
                      entries: _dimensions.map((d) => RadarEntry(value: d.value)).toList(),
                      borderColor: Colors.grey.shade700,
                      borderWidth: 2,
                      // 扇区填充渐变
                      fillGradient: RadialGradient(
                        colors: _dimensions.map((d) => d.color.withOpacity(0.45)).toList(),
                        stops: _dimensions.map((d) => d.value / 100).toList(),
                      ),
                      fillColor: Colors.transparent,
                    ),
                  ],
                  // 轴配置
                  radarAxisData: RadarAxisData(
                    maxValue: 100,
                    tickCount: 5,
                    showAxisName: true,
                    axisNamePosition: AxisNamePosition.outside,
                    axisNameTextStyle: const TextStyle(fontSize: 12, fontWeight: FontWeight.w500),
                    ticksTextStyle: const TextStyle(color: Colors.grey, fontSize: 10),
                    ticksBorderData: BorderData(color: Colors.grey.shade300),
                  ),
                  // 网格配置
                  radarTileData: RadarTileData(
                    tileBorderColor: Colors.grey.shade200,
                    tileColor: Colors.grey.shade50,
                  ),
                  radarBorderData: BorderData(color: Colors.grey.shade400),
                ),
              ),
              // 添加中心空白圆
              Container(
                width: 90,
                height: 90,
                decoration: const BoxDecoration(
                  color: Colors.white,
                  shape: BoxShape.circle,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

关键参数说明 #

• radarShape: RadarShape.circle：将雷达图设置为环形，实现饼状结构
• fillGradient：使用径向渐变匹配示例中每个扇区的色彩填充效果
• 叠加中心Container：模拟示例图的中心空白区域
• radarAxisData：调整标签位置、刻度数量，让维度标签显示在雷达外侧

内容的提问来源于stack exchange，提问作者Naveen kumar k