小智报表实战系列 -2 商品销售交叉表
![小智报表实战系列-2 商品销售交叉表](https://static001.geekbang.org/infoq/a5/a59dd28667a6c9e2197951ffae43a8c5.png)
需求背景:商品季度销售交叉表(带参数查询)
这种交叉表能够直观展示商品类别与时间周期(季度)之间的销售关联,帮助企业识别季节性销售模式、热门商品周期性波动和潜在的销售机会或风险。通过对商品季度销售数据的交叉分析,管理层可以做出更加精准的库存调整、促销活动安排和供应链优化决策。此外,交叉表还能促进跨部门协作,比如营销团队可以根据销售数据调整广告投放策略,财务部门则能据此预测现金流和制定预算。总之,商品季度销售交叉表是现代商业智能体系中不可或缺的一部分
最终效果
![](https://static001.geekbang.org/infoq/a5/a59dd28667a6c9e2197951ffae43a8c5.png)
![](https://static001.geekbang.org/infoq/4e/4e155ebe9e56a3098a39b7c362fd1343.png)
报表难点
层级分组
向下扩展
向右扩展
双向扩展
小智报表解决方案
小智报表设计器实现要点
脚本嵌入 接口实现
类 excel 报表设计 = 自由拖拽(低代码) + 极简配置
![](https://static001.geekbang.org/infoq/b6/b6ca19547f73c9a1c4a4f670a7af72ba.png)
![](https://static001.geekbang.org/infoq/1d/1d79bd5be72c8ea638f2819b083621c1.png)
![](https://static001.geekbang.org/infoq/04/040650f20f5850456ba0d90c45d21253.png)
![](https://static001.geekbang.org/infoq/12/124f35f7b4d3ada83cd307261e5501fc.png)
![](https://static001.geekbang.org/infoq/76/7633057740a04d2bf2f761b5dd8994a0.png)
![](https://static001.geekbang.org/infoq/d7/d71ff715b46813bb26b8d6a31ec07e33.png)
数据保存
报表渲染要点
准备模板和数据
在前面报表设计器的保存数据中,已经提交到业务后台保存;现在只需要 axios.get 提取 config,data 这 2 个 json 数据
脚本嵌入 接口实现
![](https://static001.geekbang.org/infoq/a0/a0394aa3c48d9606de4f0716785a6668.png)
渲染数据样例
![](https://static001.geekbang.org/infoq/1d/1d0c5b130232cb28aa3c2dfbc0c632ce.png)
点评
接口精简(默认可以满足大部需求)
onUpdateDatasetList :提供候选数据集列表
onUpdateData :提供数据集记录(带参数查询)
sheetDesign.getData() :提取报表设计器的模板数据 //config,data 两个部分,都作为报表模板保存
options 功能选项配置 :默认配置即可满足大部分需要
reportDesign.on("dataset-edited",on_dataset_edited);//监听 编辑数据集事件
reportDesign.loadData({config: config, data: data});//触发数据刷新事件
spreadSheet.update(config, data);
Json 数据格式 :跨平台通用
分组/聚合/汇总/钻取/穿透/图表/函数/富文本/多样式单元格
简化后端程序员数据处理逻辑
减少后端数据库压力,前端只需要极少的原始数据
促进报表设计器人员和后台程序员合理化分工并行工作
参数查询 导出 打印 最大/小化 刷新 = 低代码 + 极简配置开箱即用
参考文档和样例源码下载
![](https://static001.geekbang.org/infoq/fd/fd6ef6f0980e3d8d94dec3db3c519f5c.png)
小智报表 demo 体验
丰富的报表模板示例
小智报表在线试用
小智报表 js sdk 下载
开发使用文档
评论