Flutter 空心饼状图的实现

        根据项目需求，需要实现下面的饼状图

然后找到了charts_fluttercharts_flutter | Flutter Package这个插件，进来之后可以看到Readme模块中有一个online gallery

可以看出来是使用这个插件可以实现的各种图表的样式，往下拉可以看到在饼状图的示例中，正好有上面UI相同的样式

点进去，就可以看到Example: 的示例代码

可以看一下PieChart(XXXXX)（XXXXX代表方法中的各种参数，这里就不提出来了）方法，示例中给出了3个参数，分别为seriesList、animate、defaultRenderer。

        先看seriesList，可以看到是Series的一个集合，而Series在示例代码中也看到它的实现方法。

Series(

        id: 'Sales',

        domainFn: (LinearSales sales, _) => sales.year,

        measureFn: (LinearSales sales, _) => sales.sales,

        data: data,

        // Set a label accessor to control the text of the arc label.

        labelAccessorFn: (LinearSales row, _) => '${row.year}: ${row.sales}',

      )

LinearSales是自定义的Object

class LinearSales {

  final int year;

  final int sales;

  LinearSales(this.year, this.sales);

}

方法中的id是可以自己定义的一个String类型的字段，domainFn和measureFn可以认为是一个坐标中的坐标系（在柱状图和折线图中会比较好理解一点），在示例中分别取值为自定义的对象LinearSales 的year、sales两个字段，data是LinearSales的集合（需要展示的数据的集合）。labelAccessorFn这个参数就是指的“备注”，在示例代码中赋值为'${row.year}: ${row.sales}'，在视图中展示为下图，那么是不是也可以在LinearSales中赋值一个参数来设置这个“备注”？

    再看animate方法，是一个bool类型的值，是否需要动画。

    最后看defaultRenderer，它是一个ArcRendererConfig，示例代码中给了两个参数arcWidth、arcRendererDecorators。arcWidth这个好理解，就是这个饼图的宽度（这个宽度可以理解为是画出来的饼图的线的宽度），arcRendererDecorators是Series中labelAccessorFn在饼状图中的显示样式。

       那么问题来了，要实现我们需求要求的样式的话，需要修改这个饼状图的颜色，示例代码中并没有给出来，那么就得自己研究了。那么留两个疑问：饼状图不同区域的不同颜色；展示备注的样式修改。

      1、给饼状图设置想要的颜色：

        我们在这个插件的浏览器页面中返回上一页（多种不同样式图表展示的页面），可以看到有多个颜色的图表，点进去，或者在代码中点击进入Series的源码中，都看到了一个colorFn的字段，和设置domainFn和measureFn字段类似，那么我们是不是可以在LinearSales中新赋值一个颜色的参数，来对Series进行设置。

        2、设置备注“labelAccessorFn”的展示样式

        在上面的文章中也提到了，arcRendererDecorators参数赋值的是一个ArcLabelDecorator，这个ArcLabelDecorator就是来做这个“备注”的展示样式的，我们点进去这个方法

看到了一些默认的参数，labelPosition是一个ArcLabelPosition，而根据它定义的值来说

我们可以得知它是用来区分这个“备注”在饼状图中的位置。

        而TextStyleSpec参数呢，通过它的代码，是不是就可以知道这个就是用来设置“备注”的样式的方法

那么现在，用代码（demo）来确定是不是可以通过上述的方法实现需求想要的结果

    1、首先，创建一个需要展示的数据的PieSales （示例代码中的LinearSales），我们把颜色和自定义的“备注”字段都加上

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

class PieSales {

     final intstatus;

     final StringstatusInfo;

      final intsales;

      final charts.Colorcolor;

      PieSales(this.status, this.sales, this.color, this.statusInfo);

}

        2、然后，生成PieSales 的集合data

var data = [

    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",),

];

        3、再然后，生成Series的集合seriesList

var seriesList = [

    charts.Series(

        id:'Sales',

        domainFn: (PieSales sales, _) => sales.status,

        measureFn: (PieSales sales, _) => sales.sales,

        colorFn: (PieSales sales, _) => sales.color,

        data: data,

        labelAccessorFn: (PieSales row, _) => row.statusInfo,

   )

];

        4、最后，return 出来一个PieChart

return charts.PieChart(

    seriesList,

  animate:true,

  defaultRenderer:new charts.ArcRendererConfig(

        arcWidth: (ScreenUtil().scaleWidth *40).toInt(),

          arcRendererDecorators: [

                charts.ArcLabelDecorator(

                    labelPosition: charts.ArcLabelPosition.inside,

                insideLabelStyleSpec:

                    charts.TextStyleSpec(fontSize:8, color: charts.Color.white),

        )

    ]),

);

效果图，如下图

我们修改labelPosition和insideLabelStyleSpec两个参数，看下效果

labelPosition: charts.ArcLabelPosition.auto,

insideLabelStyleSpec:charts.TextStyleSpec(fontSize:12, color: charts.Color.black),

效果如下

我们把其中一个“Four”修改为“FourFourFourFourFourFour”，展示如下图：

再修改labelPosition

labelPosition: charts.ArcLabelPosition.outside,

如图

至此，这个空心饼状图是不是就完成了。