使用fl_chart插件仿抖音'使用管理助手'页面效果

先看最终效果

实现抖音'使用管理助手'效果

需求分析：统计每个用户近7天每天的使用时长（从当天往后推导，假设今天周二），单位为分钟或者小时，根据平均时长决定

技术选型：

前端使用图表插件，pub.dev搜索chart后最多选择的是fl_chart插件
后端根据用户ID和时间统计出数据返回即可

1、引入插件

打开pub.dev，搜索fl_chart进入详情复制版本信息到pubspec.yaml配置文件中

fl_chart: 0.62.0

2、刷新依赖

3、下载官方例子，查看折线图第一个例子

4、运行官网案例example项目后页面如下

根据官方例子可以得知 Line Chart Sample1满足我们的需求

5、打开代码查看结构

最终代码是在line_chart_sample1.dart文件中

6、结构如下

7、然后细看主要部分（_LineChart(isShowingMainData: isShowingMainData)）

isShowingMainData: 用来控制显示不同效果的折线图，默认所以是 sampleData1

8、数据最重要的X轴和Y轴部分，如下

综上所诉：将图表中的集合中的对象数据改为自己想要的数据即可

最终接口返回值主要部分是：

{
	"周三": 92.7333,
	"周四": 16.0667,
	"周五": 26.0667
	"周六": 33.7333,
	"周日": 11.0667,
	"周一": 42.7333,
	"周二": 163.0167,
}

根据接口页面显示大致如下图

综上所述实现了'使用管理助手'页面；有问题或者需要代码的可以私信我

友情提示：主页中有从0到1完整的项目（全栈项目）

功能说明 1、登录注册、完善个人信息 2、发布帖子、发布话题 3、图片上传、修改 4、帖子推荐（暂未实现）、热门话题 5、评论帖子、回复评论 6、私信聊天（可发送图片），站内通知 7、搜索帖子、用户、话题等等 8、热门信息实时查看 9、个人主页信息（包含发布帖子，收藏帖子等等） 10、系统设置（主题设置、通知设置、多语言、重置密码、注销账号、黑名单、建议、退出登录等等） 11、扫一扫、个人二维码、主页访客、草稿、浏览记录 12、使用管理助手、审核中心（审核详情、审核列表）

Flutter仿抖音 “使用管理助手” 折线图表页面效果