交叉报表–交叉表多数据列
概述
交叉表多数据列：一个具有多个数据列的交叉报表。
应用场景
如下图所示，简单展示数据
示例说明
数据准备
在数据面板中添加数据集，可选择Json数据集和Http接口数据集，Json数据如下图所示：
[{"City":"北京","Amount":144,"Quantity":8,"ProductID":1,"CompanyName":"仪和贸易","ProductName":"苹果汁"},{"City":"北京","Amount":1000,"Quantity":40,"ProductID":6,"CompanyName":"兰格英语","ProductName":"酱油"},{"City":"北京","Amount":144,"Quantity":10,"ProductID":1,"CompanyName":"留学服务中心","ProductName":"苹果汁"},{"City":"北京","Amount":660,"Quantity":30,"ProductID":4,"CompanyName":"留学服务中心","ProductName":"盐"},{"City":"北京","Amount":132,"Quantity":6,"ProductID":4,"CompanyName":"留学服务中心","ProductName":"盐"},{"City":"常州","Amount":54,"Quantity":3,"ProductID":1,"CompanyName":"迈策船舶","ProductName":"苹果汁"},{"City":"常州","Amount":228,"Quantity":12,"ProductID":2,"CompanyName":"椅天文化事业","ProductName":"牛奶"},{"City":"常州","Amount":608,"Quantity":40,"ProductID":2,"CompanyName":"椅天文化事业","ProductName":"牛奶"},{"City":"常州","Amount":616,"Quantity":35,"ProductID":4,"CompanyName":"椅天文化事业","ProductName":"盐"},{"City":"成都","Amount":72,"Quantity":4,"ProductID":1,"CompanyName":"新巨企业","ProductName":"苹果汁"},{"City":"大连","Amount":360,"Quantity":20,"ProductID":1,"CompanyName":"华科","ProductName":"苹果汁"},{"City":"大连","Amount":176,"Quantity":10,"ProductID":4,"CompanyName":"华科","ProductName":"盐"},{"City":"大连","Amount":1750,"Quantity":70,"ProductID":6,"CompanyName":"华科","ProductName":"酱油"},{"City":"海口","Amount":900,"Quantity":50,"ProductID":1,"CompanyName":"保信人寿","ProductName":"苹果汁"},{"City":"海口","Amount":72,"Quantity":4,"ProductID":1,"CompanyName":"保信人寿","ProductName":"苹果汁"},{"City":"海口","Amount":304,"Quantity":20,"ProductID":2,"CompanyName":"保信人寿","ProductName":"牛奶"},{"City":"海口","Amount":400,"Quantity":50,"ProductID":3,"CompanyName":"保信人寿","ProductName":"蕃茄酱"},{"City":"海口","Amount":160,"Quantity":20,"ProductID":3,"CompanyName":"保信人寿","ProductName":"蕃茄酱"},{"City":"海口","Amount":85.4,"Quantity":4,"ProductID":5,"CompanyName":"上河工业","ProductName":"麻油"},{"City":"南京","Amount":630,"Quantity":35,"ProductID":1,"CompanyName":"通恒机械","ProductName":"苹果汁"},{"City":"南京","Amount":399,"Quantity":21,"ProductID":2,"CompanyName":"通恒机械","ProductName":"牛奶"},{"City":"南京","Amount":300,"Quantity":30,"ProductID":3,"CompanyName":"通恒机械","ProductName":"蕃茄酱"},{"City":"南京","Amount":264,"Quantity":12,"ProductID":4,"CompanyName":"通恒机械","ProductName":"盐"},{"City":"南京","Amount":380,"Quantity":25,"ProductID":2,"CompanyName":"五洲信托","ProductName":"牛奶"},{"City":"南京","Amount":532,"Quantity":35,"ProductID":2,"CompanyName":"五洲信托","ProductName":"牛奶"},{"City":"南京","Amount":95,"Quantity":5,"ProductID":2,"CompanyName":"五洲信托","ProductName":"牛奶"},{"City":"南京","Amount":1100,"Quantity":50,"ProductID":4,"CompanyName":"五洲信托","ProductName":"盐"},{"City":"南京","Amount":1800,"Quantity":60,"ProductID":7,"CompanyName":"五洲信托","ProductName":"海鲜粉"},{"City":"南京","Amount":720,"Quantity":40,"ProductID":1,"CompanyName":"幸义房屋","ProductName":"苹果汁"},{"City":"南京","Amount":720,"Quantity":40,"ProductID":1,"CompanyName":"幸义房屋","ProductName":"苹果汁"},{"City":"南京","Amount":380,"Quantity":20,"ProductID":2,"CompanyName":"幸义房屋","ProductName":"牛奶"},{"City":"南京","Amount":500,"Quantity":20,"ProductID":6,"CompanyName":"幸义房屋","ProductName":"酱油"},{"City":"南京","Amount":190,"Quantity":10,"ProductID":2,"CompanyName":"永大企业","ProductName":"牛奶"},{"City":"南京","Amount":304,"Quantity":20,"ProductID":2,"CompanyName":"永大企业","ProductName":"牛奶"},{"City":"秦皇岛","Amount":364.8,"Quantity":24,"ProductID":2,"CompanyName":"友恒信托","ProductName":"牛奶"},{"City":"秦皇岛","Amount":427,"Quantity":20,"ProductID":5,"CompanyName":"利合材料","ProductName":"麻油"},{"City":"秦皇岛","Amount":180,"Quantity":6,"ProductID":7,"CompanyName":"利合材料","ProductName":"海鲜粉"},{"City":"秦皇岛","Amount":380,"Quantity":20,"ProductID":2,"CompanyName":"千固","ProductName":"牛奶"},{"City":"秦皇岛","Amount":300,"Quantity":10,"ProductID":7,"CompanyName":"千固","ProductName":"海鲜粉"},{"City":"秦皇岛","Amount":384,"Quantity":16,"ProductID":7,"CompanyName":"千固","ProductName":"海鲜粉"},{"City":"上海","Amount":190,"Quantity":10,"ProductID":2,"CompanyName":"业兴","ProductName":"牛奶"},{"City":"上海","Amount":750,"Quantity":30,"ProductID":6,"CompanyName":"业兴","ProductName":"酱油"},{"City":"上海","Amount":90,"Quantity":3,"ProductID":7,"CompanyName":"业兴","ProductName":"海鲜粉"},{"City":"深圳","Amount":285,"Quantity":15,"ProductID":2,"CompanyName":"国顶有限公司","ProductName":"牛奶"},{"City":"深圳","Amount":240,"Quantity":30,"ProductID":3,"CompanyName":"光明杂志","ProductName":"蕃茄酱"},{"City":"深圳","Amount":120,"Quantity":4,"ProductID":7,"CompanyName":"光明杂志","ProductName":"海鲜粉"},{"City":"深圳","Amount":720,"Quantity":30,"ProductID":7,"CompanyName":"光明杂志","ProductName":"海鲜粉"},{"City":"深圳","Amount":760,"Quantity":50,"ProductID":2,"CompanyName":"正人资源","ProductName":"牛奶"},{"City":"深圳","Amount":152,"Quantity":8,"ProductID":2,"CompanyName":"正人资源","ProductName":"牛奶"},{"City":"深圳","Amount":200,"Quantity":20,"ProductID":3,"CompanyName":"正人资源","ProductName":"蕃茄酱"},{"City":"深圳","Amount":250,"Quantity":25,"ProductID":3,"CompanyName":"正人资源","ProductName":"蕃茄酱"},{"City":"深圳","Amount":544,"Quantity":32,"ProductID":5,"CompanyName":"正人资源","ProductName":"麻油"},{"City":"深圳","Amount":1105,"Quantity":65,"ProductID":5,"CompanyName":"正人资源","ProductName":"麻油"},{"City":"深圳","Amount":540,"Quantity":18,"ProductID":7,"CompanyName":"正人资源","ProductName":"海鲜粉"},{"City":"深圳","Amount":360,"Quantity":20,"ProductID":1,"CompanyName":"远东开发","ProductName":"苹果汁"},{"City":"深圳","Amount":950,"Quantity":50,"ProductID":2,"CompanyName":"远东开发","ProductName":"牛奶"},{"City":"深圳","Amount":190,"Quantity":10,"ProductID":2,"CompanyName":"阳林","ProductName":"牛奶"},{"City":"深圳","Amount":110,"Quantity":5,"ProductID":4,"CompanyName":"阳林","ProductName":"盐"},{"City":"深圳","Amount":220,"Quantity":10,"ProductID":4,"CompanyName":"阳林","ProductName":"盐"},{"City":"深圳","Amount":320.25,"Quantity":15,"ProductID":5,"CompanyName":"阳林","ProductName":"麻油"},{"City":"深圳","Amount":760,"Quantity":40,"ProductID":2,"CompanyName":"一诠精密工业","ProductName":"牛奶"},{"City":"深圳","Amount":1050,"Quantity":35,"ProductID":7,"CompanyName":"一诠精密工业","ProductName":"海鲜粉"},{"City":"深圳","Amount":600,"Quantity":20,"ProductID":7,"CompanyName":"一诠精密工业","ProductName":"海鲜粉"},{"City":"深圳","Amount":240,"Quantity":10,"ProductID":7,"CompanyName":"昇昕股份有限公司","ProductName":"海鲜粉"},{"City":"深圳","Amount":140,"Quantity":14,"ProductID":3,"CompanyName":"中硕贸易","ProductName":"蕃茄酱"},{"City":"深圳","Amount":300,"Quantity":10,"ProductID":7,"CompanyName":"中硕贸易","ProductName":"海鲜粉"},{"City":"深圳","Amount":378,"Quantity":21,"ProductID":1,"CompanyName":"凯诚国际顾问公司","ProductName":"苹果汁"},{"City":"深圳","Amount":360,"Quantity":20,"ProductID":1,"CompanyName":"凯诚国际顾问公司","ProductName":"苹果汁"}]
报表设计
将A1-A2、B1-C1单元格合并。
将数据字段拖入A3、B1、B3、C3单元格。
将A3、B3、C3单元格设置为分组以及向下扩展。
将B1单元格设置为分组以及向右扩展。
选中A1-C3单元格，点击上方工具栏-添加分组；选中B1-C3单元格，点击上方工具栏-添加分组。
点击上方工具栏此按钮设置交叉表表头，用 | 分隔。
效果预览
交叉表多数据列.json
https://www.yuque.com/attachments/yuque/0/2023/json/25420404/1700470061026-d8e03f5f-0fbd-4f34-95c3-916c9c48af37.json
参考文档
- 小智报表样例源码下载
- https://gitee.com/tizdata_admin/vue-xzreport-example.git
- 小智报表demo体验
- https://xzdemo.tizdata.com/#/imbedShow/reportExample
- 丰富的报表模板示例
- 小智报表在线试用
- https://xzreport.com
- 小智报表js sdk下载
- https://tizdata.com/xzdownload/
- 开发使用文档
- https://doc.tizdata.com/xiaozhi/650