基础子报表

主子报表–基础子报表

概述

基础子报表：在一个主控报表中显示多个子报表，实现多个报表的集中体现。

应用场景

如下图所示，简单展示数据

示例说明

数据准备

在数据面板中添加数据集，可选择Json数据集和Http接口数据集，Json数据如下图所示：

"Customer":
[{"CustomerID":"ALFKI","CompanyName":"三川实业有限公司","ContactName":"刘小姐","ContactTitle":"销售代表","Address":"大崇明路 50 号","City":"天津","Region":"华北","PostalCode":"343567","Country":"中国","Phone":"(030) 30074321","Fax":"(030) 30765452"},
{"CustomerID":"ANATR","CompanyName":"东南实业","ContactName":"王先生","ContactTitle":"物主","Address":"承德西路 80 号","City":"天津","Region":"华北","PostalCode":"234575","Country":"中国","Phone":"(030) 35554729","Fax":"(030) 35553744"},
{"CustomerID":"ANTON","CompanyName":"坦森行贸易","ContactName":"王炫皓","ContactTitle":"物主","Address":"黄台北路 780 号","City":"石家庄","Region":"华北","PostalCode":"985060","Country":"中国","Phone":"(0321) 5553932","Fax":""},
{"CustomerID":"AROUT","CompanyName":"国顶有限公司","ContactName":"方先生","ContactTitle":"销售代表","Address":"天府东街 30 号","City":"深圳","Region":"华南","PostalCode":"890879","Country":"中国","Phone":"(0571) 45557788","Fax":"(0571) 45556750"},
{"CustomerID":"BERGS","CompanyName":"通恒机械","ContactName":"黄小姐","ContactTitle":"采购员","Address":"东园西甲 30 号","City":"南京","Region":"华东","PostalCode":"798089","Country":"中国","Phone":"(0921) 9123465","Fax":"(0921) 55123467"},
{"CustomerID":"BLAUS","CompanyName":"森通","ContactName":"王先生","ContactTitle":"销售代表","Address":"常保阁东 80 号","City":"天津","Region":"华北","PostalCode":"787045","Country":"中国","Phone":"(030) 30058460","Fax":"(030)  33008924"}
]

"Product":
[
{"ProductID":56,"ProductName":"白米","SupplierID":26,"CategoryID":5,"QuantityPerUnit":"每袋3公斤","UnitPrice":38,"UnitsInStock":21,"UnitsOnOrder":10,"ReorderLevel":30,"Discontinued":false},
{"ProductID":32,"ProductName":"白奶酪","SupplierID":14,"CategoryID":4,"QuantityPerUnit":"每箱12瓶","UnitPrice":32,"UnitsInStock":9,"UnitsOnOrder":40,"ReorderLevel":25,"Discontinued":false},
{"ProductID":16,"ProductName":"饼干","SupplierID":7,"CategoryID":3,"QuantityPerUnit":"每箱30盒","UnitPrice":17.45,"UnitsInStock":29,"UnitsOnOrder":0,"ReorderLevel":10,"Discontinued":false},
{"ProductID":42,"ProductName":"糙米","SupplierID":20,"CategoryID":5,"QuantityPerUnit":"每袋3公斤","UnitPrice":14,"UnitsInStock":26,"UnitsOnOrder":0,"ReorderLevel":0,"Discontinued":true},
{"ProductID":47,"ProductName":"蛋糕","SupplierID":22,"CategoryID":3,"QuantityPerUnit":"每箱24个","UnitPrice":9.5,"UnitsInStock":36,"UnitsOnOrder":0,"ReorderLevel":0,"Discontinued":false},
{"ProductID":12,"ProductName":"德国奶酪","SupplierID":5,"CategoryID":4,"QuantityPerUnit":"每箱12瓶","UnitPrice":38,"UnitsInStock":86,"UnitsOnOrder":0,"ReorderLevel":0,"Discontinued":false}
]

"Top10Customer":
[
{"CustomerID":"QUICK","CompanyName":"高上补习班","SumAmt":117483.39},
{"CustomerID":"SAVEA","CompanyName":"大钰贸易","SumAmt":115673.39},
{"CustomerID":"ERNSH","CompanyName":"正人资源","SumAmt":113236.68},
{"CustomerID":"HUNGO","CompanyName":"师大贸易","SumAmt":57317.39},
{"CustomerID":"RATTC","CompanyName":"学仁贸易","SumAmt":52245.9},
{"CustomerID":"HANAR","CompanyName":"实翼","SumAmt":34101.15},
{"CustomerID":"FOLKO","CompanyName":"五洲信托","SumAmt":32555.55},
{"CustomerID":"MEREP","CompanyName":"华科","SumAmt":32203.9},
{"CustomerID":"KOENE","CompanyName":"永业房屋","SumAmt":31745.75},
{"CustomerID":"QUEEN","CompanyName":"留学服务中心","SumAmt":30226.1}
]

"Top10Product":
[
{"ProductID":38,"ProductName":"绿茶","SumQty":149984.2},
{"ProductID":29,"ProductName":"鸭肉","SumQty":87736.4},
{"ProductID":59,"ProductName":"苏澳奶酪","SumQty":76296},
{"ProductID":60,"ProductName":"花奶酪","SumQty":50286},
{"ProductID":62,"ProductName":"山渣片","SumQty":49827.9},
{"ProductID":56,"ProductName":"白米","SumQty":45159.2},
{"ProductID":51,"ProductName":"猪肉干","SumQty":44742.6},
{"ProductID":17,"ProductName":"猪肉","SumQty":35650.2},
{"ProductID":18,"ProductName":"墨鱼","SumQty":31987.5},
{"ProductID":28,"ProductName":"烤肉酱","SumQty":26865.6}
]

报表设计

将上面四个Json数据集分别导入进数据面板。
将数据字段拖拽进对应的单元格并设置为分组(不合并单元格)以及向下扩展。

效果预览

基础子报表.json

https://www.yuque.com/attachments/yuque/0/2023/json/25420404/1700554130954-2de8d47f-43a7-46be-af48-80e58ffa5e9e.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