Flutter项目实现（空心，实心）饼状图

1、插件安装

依赖：charts_flutter: ^0.9.0
之后使用Pub get安装依赖

2、插件使用

在github上面的例子中，我们的饼图是在 StatelessWidget 里面写的，但是我们实际上经常使用的地方是有状态组件。
其他的就不说了，直接上案例代码哈，大家对此案例如果有什么疑问的话，可以在评论区留言，我们一起讨论哦

/// Donut chart with labels example. This is a simple pie chart with a hole in
/// the middle.
// EXCLUDE_FROM_GALLERY_DOCS_START
import 'dart:math';
// EXCLUDE_FROM_GALLERY_DOCS_END
import 'package:charts_flutter/flutter.dart' as charts;//引入依赖
import 'package:flutter/material.dart';
class PieSales {
  final int initstatus;
  final String statusInfo;
  final intsales;
  final color;

  PieSales(this.initstatus, this.intsales, this.color, this.statusInfo);
}

class DonutAutoLabelChart2 extends StatefulWidget {
  @override
  _DonutAutoLabelChart2State createState() => _DonutAutoLabelChart2State();
}


class _DonutAutoLabelChart2State extends State<DonutAutoLabelChart2> {
  final List<charts.Series> seriesList= _createRandomData();
  final bool animate=true;


  /// Creates a [PieChart] with sample data and no transition.


  /// Create random data.
  static List<charts.Series<PieSales, int>> _createRandomData() {

    final data = [
      new  PieSales(0,20,charts.ColorUtil.fromDartColor(Color(0xFF48BFFE)), "Zero",),
     PieSales(1,20,charts.ColorUtil.fromDartColor(Color(0xFF38D28D)),"One",),

     PieSales(2,20,charts.ColorUtil.fromDartColor(Color(0xFFF2CE28)), "Two", ),

     PieSales(3,20,charts.ColorUtil.fromDartColor(Color(0xFFFFA65B)), "Three",),

     PieSales(4,20, charts.ColorUtil.fromDartColor(Color(0xFFE5574D)), "Four",),

    PieSales(5, 20,charts.ColorUtil.fromDartColor(Color(0xFFDADADA)), "Five",),
      // new PieSales(3, random.nextInt(100)),
    ];//charts.ColorUtil.fromDartColor方法里面的颜色就是我们需要实现的饼状图的颜色。有多个 PieSales就会把整个圆分成几个部分，这里也是可以设置的。PieSales的第二个参数就是我们这个部分占圆的百分比

    return [
      new charts.Series<PieSales, int>(
        id: 'Sales',
        domainFn: (PieSales sales, _) => sales.initstatus,
        measureFn: (PieSales sales, _) => sales.intsales,
        colorFn: (PieSales sales, _) => sales.color,
        data: data,
        // Set a label accessor to control the text of the arc label.
        labelAccessorFn: (PieSales row, _) => row.statusInfo,
      )
    ];
  }
  // EXCLUDE_FROM_GALLERY_DOCS_END

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(),
      body: Container(
        width: 120,
        height: 120,
        child: charts.PieChart(
         seriesList,
         animate:true,
        defaultRenderer:new charts.ArcRendererConfig(
        arcWidth: 15,//这里是弧的宽度，当我们的宽高较小，而这个较大的时候，我们的饼状图就是实心的，否则就是空心的。可以自己设置
        arcRendererDecorators: [
        charts.ArcLabelDecorator(
        labelPosition: charts.ArcLabelPosition.inside,
        insideLabelStyleSpec:
           charts.TextStyleSpec(fontSize:8, color: charts.Color.white),
        )
        ]),
    )
      ),
    );
  }

 
}

下面是效果：
实心的效果：

空心的效果：