在生活中，我们经常在数学或经济问题中用到统计图表来分析数据，判断数据走向。今天我们就在 flutter 环境中利用 flutter_echart 插件简单描摹一下，绘制一个扇形统计图。
扇形统计图，它是用整个圆表示总数，用圆内各个扇形的大小表示各部分数量占总数的百分数(比)。通过扇形统计图可以很清楚地表示出各部分数量同总数之间的关系。
1.我们首先来来查阅一下作图工具插件 flutter_echart 。
2.查看插件的源代码，了解扇形统计图的属性和方法。
///扇形图组件
PieChatWidget({
Key? key,
@required this.dataList, //内容项，取值类型为：List<EChartPieBean>
this.initSelect = 0,
required this.clickCallBack, //点击响应
this.loopType = LoopType.NON, //循环方式
this.openType = OpenType.ANI, //打开方式
this.isLineText = true,
this.isBackground = true, //是否显示背景
this.isFrontgText = true, //是否显示前景图案
this.animationMills = 1800,
this.isLog = false,
this.bgColor = const Color(0xFFCADCED), //背景颜色初始化
this.isHelperLine = false,
this.width=300,
this.height=300,
}) : super(key: key);
///扇面内容项
class EChartPieBean {
dynamic id;
String title;
int number;
Color color;
bool isClick;
EChartPieBean(
{this.id,
this.title = '',
this.number = 100,
this.color = Colors.blue,
this.isClick = false});
}
详细学习请点击：flutter_echart
3.对插件源代码学习后，我们新建一个项目并导入依赖。
&新建项目，命名为 EChart_demo 。
&在项目文件中找到 pubspec.yaml 文件，然后在 dependencies: 标签下添加 flutter_chart: ^1.0.2 依赖，接下来运行 pub get 命令。
&显示如下图则导入成功。
4.这时，如果依赖导入成功的话，我们就在新建项目的 lib 文件夹里面编写界面代码。
///整体布局代码
Scaffold(appBar:AppBar(title:Text("EChart 饼图"),),
body:Container(
color: Colors.blueGrey,
child: BuildPieChatWidget(),
//Center(child: Icon(Icons.bluetooth),),
),
);
///构建扇形图
PieChatWidgetBuildPieChatWidget(){
return PieChatWidget(
dataList: PCList,
//是否输出日志
isLog:true,
//是否需要背景
isBackground:true,
//是否画直线
isLineText:true,
//背景
bgColor: Colors.blueGrey,
//圆心背景
circleColor: Colors.pinkAccent,
//外围背景
outColor: Colors.grey,
//是否显示最前面的内容
isFrontgText:true,
//默认选择放大的块
initSelect:1,
//初次显示以动画方式展开
openType: OpenType.ANI,
//旋转类型
loopType: LoopType.DOWN_LOOP,
//点击回调
clickCallBack: (int value) {
print("当前点击显示 $value");
},
);
}
5.界面代码的布局层次如下图：
6.检查代码中是否有语法错误和逻辑错误，有要根据提示修改，没有直接运行。
运行截图如下：
