图表组件

图表组件用于可视化数据，提供丰富的图表类型和交互功能。

提示：选择合适的图表库可以简化开发并提供更好的用户体验。
📱 渲染效果预览
40%
50%
10%

FL Chart

FL Chart 是一个轻量级且功能强大的图表库。

import 'package:fl_chart/fl_chart.dart';

// 饼图
PieChart(
  PieChartData(
    sections: [
      PieChartSectionData(
        value: 40,
        color: Colors.blue,
        title: '40%',
      ),
      PieChartSectionData(
        value: 30,
        color: Colors.red,
        title: '30%',
      ),
      PieChartSectionData(
        value: 20,
        color: Colors.green,
        title: '20%',
      ),
      PieChartSectionData(
        value: 10,
        color: Colors.yellow,
        title: '10%',
      ),
    ],
  ),
)
📱 渲染效果预览
5
2014
25
2015
100
2016
75
2017

charts_flutter

charts_flutter 是 Google 提供的图表库。

import 'package:charts_flutter/flutter.dart' as charts;

// 创建数据
final data = [
      OrdinalSales('2014', 5),
      OrdinalSales('2015', 25),
      OrdinalSales('2016', 100),
      OrdinalSales('2017', 75),
    ];

// 条形图
charts.BarChart(
  [
    charts.Series(
      id: 'Sales',
      colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
      domainFn: (OrdinalSales sales, _) => sales.year,
      measureFn: (OrdinalSales sales, _) => sales.sales,
      data: data,
    ),
  ],
)
📱 渲染效果预览

Syncfusion

Syncfusion 是一个功能全面的图表和 UI 组件库。

import 'package:syncfusion_flutter_charts/charts.dart';

// 折线图
SfCartesianChart(
  primaryXAxis: CategoryAxis(),
  series: [
    LineSeries(
      dataSource: [
        SalesData('Jan', 35),
        SalesData('Feb', 28),
        SalesData('Mar', 34),
        SalesData('Apr', 32),
        SalesData('May', 40),
      ],
      xValueMapper: (SalesData sales, _) => sales.month,
      yValueMapper: (SalesData sales, _) => sales.sales,
    ),
  ],
)
📱 渲染效果预览
30%
50%
20%

Pie Chart

饼图用于显示数据的比例关系。

// 使用 FL Chart
PieChart(
  PieChartData(
    sectionsSpace: 2,
    centerSpaceRadius: 40,
    sections: [
      PieChartSectionData(
        value: 30,
        color: const Color(0xff0293ee),
        title: '30%',
        radius: 50,
      ),
      PieChartSectionData(
        value: 50,
        color: const Color(0xfff8b250),
        title: '50%',
        radius: 50,
      ),
      PieChartSectionData(
        value: 20,
        color: const Color(0xff845bef),
        title: '20%',
        radius: 50,
      ),
    ],
  ),
)

Line Chart

折线图用于显示数据的趋势变化。

// 使用 Syncfusion
SfCartesianChart(
  primaryXAxis: CategoryAxis(),
  series: >[
    LineSeries(
      dataSource: [
        SalesData('Jan', 35),
        SalesData('Feb', 28),
        SalesData('Mar', 34),
        SalesData('Apr', 32),
        SalesData('May', 40),
      ],
      xValueMapper: (SalesData data, _) => data.month,
      yValueMapper: (SalesData data, _) => data.sales,
      color: Colors.blue,
      width: 3,
    ),
  ],
)
📱 渲染效果预览
35
A
28
B
34
C
32
D
40
E

Bar Chart

条形图用于比较不同类别的数据。

// 使用 Syncfusion
SfCartesianChart(
  primaryXAxis: CategoryAxis(),
  series: [
    ColumnSeries(
      dataSource: [
        SalesData('Product A', 35),
        SalesData('Product B', 28),
        SalesData('Product C', 34),
        SalesData('Product D', 32),
        SalesData('Product E', 40),
      ],
      xValueMapper: (SalesData data, _) => data.product,
      yValueMapper: (SalesData data, _) => data.sales,
      color: Colors.blue,
    ),
  ],
)
图表库选择指南：
  • FL Chart: 轻量级、美观、活跃维护
  • charts_flutter: Google 官方、功能全面
  • Syncfusion: 企业级、功能强大
← 自定义 Widget 地图组件 →