Flutter饼状图绘制插件easy_pie_chart的使用

Easy Pie Chart Package

Easy Pie Chart 插件为Flutter应用程序提供了一个多用途的饼状图小部件。它提供了多种自定义选项，可以创建交互性强且视觉效果吸引人的饼状图。

特性

• 三种饼状图变体：

  • Crust: 仅有边框，无填充。
  • TriCrust: 每个饼片周围都有边框。
  • Fill: 填充的饼片。

• 交互式饼片：

  • 每个饼片都是交互式的，并响应用户点击。

• 自定义选项：

  • 可调整饼片之间的间隙。
  • 控制边框边缘样式（圆角、方角等）。
  • 饼状图的起始角度可自定义。
  • 在饼状图内部显示文本或小部件的选项。
  • 动画：顺时针和逆时针动画，具有可调持续时间。

入门指南

要使用此插件，请在您的 pubspec.yaml 文件中添加以下行：

dependencies:
  easy_pie_chart: ^version

或者，在项目的根目录下运行命令：

flutter pub add easy_pie_chart

然后，在Dart文件中导入该包：

import 'package:easy_pie_chart/easy_pie_chart.dart';

使用示例

以下是一个简单的创建Easy pie chart的示例：

PieChart(
  children: [
    PieData(value: 30, color: Colors.red),
    PieData(value: 50, color: Colors.blue),
  ],
)

更多示例可以在本仓库的 /example 文件夹中查看。

属性说明

示例代码

以下是完整的示例代码，演示了如何使用 easy_pie_chart 插件来创建不同类型的饼状图：

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: const Example(),
    );
  }
}

class Example extends StatefulWidget {
  const Example({Key? key}) : super(key: key);

  @override
  State<Example> createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  final List<PieData> pies = [
    PieData(value: 0.15, color: Colors.yellow),
    PieData(value: 0.35, color: Colors.cyan),
    PieData(value: 0.45, color: Colors.lightGreen),
  ];
  String tapIndex = "";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Demo Pie Chart')),
      body: SingleChildScrollView(
        child: Column(
          children: [
            const SizedBox(height: 30),
            CustomCard(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  EasyPieChart(
                    key: const Key('pie 1'),
                    children: pies,
                    borderEdge: StrokeCap.butt,
                    pieType: PieType.crust,
                    onTap: (index) {},
                    style: const TextStyle(color: Colors.pinkAccent, fontSize: 10),
                    gap: 0.02,
                    start: 0,
                    size: 130,
                  ),
                  EasyPieChart(
                    key: const Key('pie 2'),
                    children: pies,
                    pieType: PieType.crust,
                    onTap: (index) {
                      tapIndex = index.toString();
                      setState(() {});
                    },
                    gap: 0.1,
                    start: 0,
                    animateFromEnd: true,
                    size: 130,
                    child: Center(child: Text(tapIndex)),
                  ),
                ],
              ),
            ),
            const SizedBox(height: 30),
            CustomCard(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  EasyPieChart(
                    key: const Key('pie 3'),
                    children: pies,
                    borderEdge: StrokeCap.butt,
                    borderWidth: 10,
                    pieType: PieType.triCrust,
                    onTap: (index) {},
                    size: 130,
                  ),
                  EasyPieChart(
                    key: const Key('pie 4'),
                    children: pies,
                    pieType: PieType.triCrust,
                    onTap: (index) {},
                    animateFromEnd: true,
                    borderWidth: 10,
                    size: 130,
                  ),
                ],
              ),
            ),
            const SizedBox(height: 30),
            CustomCard(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  EasyPieChart(
                    key: const Key('pie 5'),
                    children: pies,
                    pieType: PieType.fill,
                    onTap: (index) {},
                    start: 180,
                    size: 130,
                  ),
                  EasyPieChart(
                    key: const Key('pie 6'),
                    children: pies,
                    pieType: PieType.fill,
                    onTap: (index) {},
                    start: 180,
                    animateFromEnd: true,
                    size: 130,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class CustomCard extends StatelessWidget {
  final Widget child;
  const CustomCard({Key? key, required this.child}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Padding(padding: const EdgeInsets.all(20.0), child: child),
    );
  }
}

贡献与问题反馈

• 贡献方式：

  • 修复bug
  • 编写和改进文档。文档对我们非常重要，欢迎帮助我们添加多语言支持。
  • 开发者可以检查源码并提交pull request。
  • 查看 CONTRIBUTING.MD，了解提交bug、请求新功能、准备代码进行pull request等内容。
  • 请记得点赞、关注和给我们的仓库加星！

• 遇到问题：

  • 如果遇到任何问题，请自由地打开 issue。
  • 如果觉得缺少某个特性，可以提出 feature request。也欢迎提交pull request。

• 许可证：

  • 本插件遵循MIT License。

希望以上内容能帮助您更好地理解和使用 easy_pie_chart 插件！