数据展示效果如下图：
一、下载安装wxcharts
点击这里：demo下载
下载后，wxcharts.js 复制到utils目录下，如下图：
utils目录
pages目录下新建2个page：柱状图和折线图，如下图：
page页
js文件中引入wxcharts.js
js引入
wxml中引用canvas组件
wxml引用组件
二、数据设计和数据查询
2.1 数据结构设计
本需求是按年、月、日三个层级汇总显示故障数据量，数据存放表结构如下：
report（datetype，date，num）
datetype：year、month、day 分别表示年、月、日
date：数据日期
2.2 定时任务汇总统计数据
通过云函数设计定时任务
定时任务
汇聚产生统计数据
汇聚
2.3 通过云函数产生查询数据
三、数据展示
查询报表数据，按照wxcharts 的demo文件，定义categories和data
查询数据
数据显示如图：
年度数据
点击图表数据，可以下钻，如下图。点击月数据，可以展示日数据。
月度数据
四、数据以图片方式保存
放置保存按钮，js方法如下图：
保存图片
保存后效果图，如下：
网友评论