根据项目需求，需要实现下面的饼状图
然后找到了charts_fluttercharts_flutter | Flutter Package这个插件，进来之后可以看到Readme模块中有一个online gallery
可以看出来是使用这个插件可以实现的各种图表的样式，往下拉可以看到在饼状图的示例中，正好有上面UI相同的样式
点进去，就可以看到Example: 的示例代码
可以看一下PieChart(XXXXX)（XXXXX代表方法中的各种参数，这里就不提出来了）方法，示例中给出了3个参数，分别为seriesList、animate、defaultRenderer。
先看seriesList，可以看到是Series的一个集合，而Series在示例代码中也看到它的实现方法。
Series<LinearSales, int>(
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,
如图
至此，这个空心饼状图是不是就完成了。
