小智报表实战系列 -1 商品销售环比占比报表
![小智报表实战系列-1 商品销售环比占比报表](https://static001.geekbang.org/infoq/94/949d532a96d510256964e7f3cb5aa102.png)
需求:商品销售 环比/占比(带参数查询)
复制代码
![](https://static001.geekbang.org/infoq/27/27831bf33ec2d17b4b53cd56dfd0bb80.png)
![](https://static001.geekbang.org/infoq/e8/e8327088566817587368ae26715d0c20.png)
报表难点
分组、聚合
同一分组下的坐标快速动态定位
同一分组下倒数第 1 条记录 =C4[B4:!-1]
同一分组下倒数第 2 条记录 =C4[B4:!-2]
强大定位,才可以计算特殊环比: =(C4[B4:!-1]-C4[B4:!-2])/C4[B4:!-2]
同一分组下的条件过滤
灵活的条件过滤,组内占比计算: =C4/SUM(C4[!0]{A4=$A4})
小智报表解决方案
小智报表设计器
脚本嵌入 接口实现
![](https://static001.geekbang.org/infoq/6e/6e597ce5785c9fc3a0440b0bfa0d8086.png)
复制代码
报表设计 = 自由拖拽(低代码) + 极简配置
![](https://static001.geekbang.org/infoq/82/82e66498cc77d31a181be58d6314b107.png)
![](https://static001.geekbang.org/infoq/d8/d8c19db1a66838da59874f27c75c4755.png)
查询面板 = 零代码 + 极简配置
![](https://static001.geekbang.org/infoq/96/969bcbbd8dad3f7624a789ab6db7f0b6.png)
打印面板 = 零代码 + 极简配置
![](https://static001.geekbang.org/infoq/29/29a2af0bc287893edb42ebe5f63486cc.png)
数据保存
复制代码
报表渲染实现
准备模板和数据
复制代码
脚本嵌入 接口实现
复制代码
![](https://static001.geekbang.org/infoq/2d/2d4eb9a9545826f828a66a49dbc039f4.png)
渲染数据样例
![](https://static001.geekbang.org/infoq/d2/d2ce2f97be19d8406b9fe8988617f00a.png)
参数查询 数据导出 打印 = 零代码 极简配置
点评
接口精简(默认可以满足大部需求)
onUpdateDatasetList :提供数据集列表
onUpdateData :提供数据集记录(带参数查询)
sheetDesign.getData() :提取报表设计器的模板数据
options 功能选项配置 :默认配置即可满足大部分需要
reportDesign.on("dataset-edited",on_dataset_edited);//监听 编辑数据集事件
reportDesign.loadData({config: config, data: data});//触发数据刷新事件
Json 数据格式 :跨平台通用
分组/聚合/汇总/钻取/穿透/图表/函数/富文本/多样式单元格
简化后端程序员数据处理逻辑
减少后端数据库压力,前端只需要极少的原始数据
促进报表设计器人员和后台程序员合理化分工并行工作
参数查询 导出 最大/小化 = 零代码,极简配置开箱即用
刷新 打印 = 低代码,极简配置开箱即用
参考文档和样例源码下载
![](https://static001.geekbang.org/infoq/79/790bc4ab8a8da58cb3078a25f7a4dc21.png)
小智报表 demo 体验
丰富的报表模板示例
小智报表在线试用
小智报表 js sdk 下载
开发使用文档
评论