Flutter 饼状图、柱状图、拆线图、Flutter动态饼图、Flutter图表 flutter_echart 开发文档

在码农的世界里，优美的应用体验，来源于程序员对细节的处理以及自我要求的境界，年轻人也是忙忙碌碌的码农中一员，每天、每周，都会留下一些脚印，就是这些创作的内容，有一种执着，就是不知为什么，如果你迷茫，不妨来瞅瞅码农的轨迹。

优美的音乐节奏带你浏览这个效果的编码过程
坚持每一天，是每个有理想青年的追求
追寻年轻人的脚步，也许你的答案就在这里

1 简介

flutter_echart 是基于Flutter Canvas 绘图思想实现的图表功能，支持饼状图、柱状图、拆线图，在2020-12-02 更新1.0.1版本，将动态饼状图发布到 pub 仓库，地址如下：

1	https://pub.flutter-io.cn/packages/flutter_echart

大家可以直接在 Flutter 项目中添加依赖如下：

1 2	dependencies: flutter_echart: ^1.0.0

然后加载一下依赖

1	flutter pub get

然后在使用的地方导包如下：

1	import 'package:flutter_echart/flutter_echart.dart';

1 饼状图

首先需要有饼图数据，flutter_echart提供了EChartPieBean对象来封装数据。

1.1 EChartPieBean的定义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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});
}

1.2 饼图基本使用

首先定义数据

1
2
3
4
5
6
7

List<EChartPieBean> _dataList = [
EChartPieBean(title: "生活费", number: 200, color: Colors.lightBlueAccent),
EChartPieBean(title: "游玩费", number: 200, color: Colors.deepOrangeAccent),
EChartPieBean(title: "交通费", number: 400, color: Colors.green),
EChartPieBean(title: "贷款费", number: 300, color: Colors.amber),
EChartPieBean(title: "电话费", number: 200, color: Colors.orange),
];

如下图所示，以动画的方式显示：
在这里插入图片描述
对应代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

PieChatWidget buildPieChatWidget() {
return PieChatWidget(
dataList: _dataList,
//是否输出日志
isLog: true,
//是否需要背景
isBackground: true,
//是否画直线
isLineText: true,
//背景
bgColor: Colors.white,
//是否显示最前面的内容
isFrontgText: true,
//默认选择放大的块
initSelect: 1,
//初次显示以动画方式展开
openType: OpenType.ANI,
//旋转类型
loopType: LoopType.DOWN_LOOP,
//点击回调
clickCallBack: (int value) {
print("当前点击显示 $value");
},
);
}

initSelect 属性为默认选择放大显示的饼块，当此值为 -2 时，不会有放大效果

当 isBackground 属性为 false时，效果如下：

在这里插入图片描述
当 isLineText 为false 时：