小智报表实战I _轻松玩转中国式复杂报表-1

小智报表实战系列I 轻松玩转中国式复杂报表-1

需求背景：商品季度销售环比和组内占比报表(带参数查询)

随着企业业务规模的扩大，对商品销售情况的精准掌握变得尤为重要。为此，企业亟需制作一张
《商品季度销售环比和组内占比》报表，以全面、系统地展示各商品在不同季度的销售表现。该报表需具备总计、小计功能，便于快速概览整体及细分销售数据；同时，需支持环比分析，以揭示销售趋势；此外，还需实现组内占比，明确商品在同类中的竞争力。为满足不同用户需求，报表应支持参数查询功能，允许灵活筛选数据。最后，为了方便数据传播与归档，报表需提供查询、翻页、导出、打印功能。
最终效果

报表难点

也是小智报表的亮点

• 分组、聚合
• 同一分组下的坐标快速动态定位
  • 同一分组下倒数第1条记录 =C4[B4:!-1]
  • 同一分组下倒数第2条记录 =C4[B4:!-2]
  • 强大定位，才可以计算特殊环比： =(C4[B4:!-1]-C4[B4:!-2])/C4[B4:!-2]
• 同一分组下的条件过滤
  • 灵活的条件过滤，组内占比计算： =C4/SUM(C4[!0]{A4=$A4})

小智报表解决方案

小智报表设计器实现要点

脚本嵌入 接口实现

<link rel="stylesheet" href="/xzreport.css">
<script type="module" src="/xzreportdesigner.js"></script>
const dataset = [ //  添加数据集按钮
  { id: 1,value: "新建Json数据集"  },
  { id: 2,value: "新建Http接口数据集" },
  { id: 3,value: "API服务数据集"  },
  { id: 4,value: "外部数据集"  }];
const options = {
  row: 100,  col: 25,
  width: () => document.documentElement.clientWidth,
  renderArrow: true,  // 是否显式 扩展方向图标
  showFreeze: true,  // 是否显式冻结线
  showGrid: true,   // 是否显式网格线
  showPreviewToolbar: true,
  showBottombar: true,
  showSelect: true,
  dataset
}
const _onUpdateDatasetList = [
[
  {
    "name": "商品区域销售",
    "id": "商品区域销售",
    "columns": [  //列描述   3:文本  2:数字  1:日期
      {
        "name": "商品",        "data_type": 3
      },
      {
        "name": "区域名称",        "data_type": 3
      },
      {
        "name": "销售额",        "data_type": 2
      }
    ,
      {
        "name": "年份",        "data_type": 3
      },
      {
        "name": "季度",        "data_type": 3
      },
      {
        "name": "目标完成比",        "data_type": 2
      }
    ],
    "params": [ //查询参数
      {
        "name": "商品",        "data_type": 3
      },
      {
        "name": "区域名称",        "data_type": 3
      }
    ]
  }
]

options.onUpdateDatasetList =  () => {
  return new Promise((resolve, reject) => {//Promise 异步回调
    resolve(_onUpdateDatasetList);// 返回后台获取的数据集列表
  })
}
onMounted(() => {// 页面加载时,初始化报表设计器
  sheetDesign = XZReportDesigner("#action_2_8_main", options);
})

类excel报表设计 = 自由拖拽(低代码) + 极简配置

查询面板 = 零代码 + 极简配置

打印面板 = 零代码 + 极简配置

丰富的工具栏按钮组件 = 零代码 + 极简配置

支持图片 二维码 条形码 html富文本

数据保存

const {config, data} = sheetDesign.getData(); //报表设计器的保存事件

报表渲染要点

准备模板和数据

在前面报表设计器的保存数据中，已经提交到业务后台保存；现在只需要axios.get提取config,data这2个json数据

脚本嵌入 接口实现

const option = {
  mode: 'read', view: { width: 1920px, height:1080px },   // 设置报表的宽高
  renderArrow: true,  // 是否显式 扩展方向图标
  showFreeze: true,  // 是否显式冻结线
  showGrid: true,   // 是否显式网格线
  showPreviewToolbar: true,  showBottombar: true,  showSelect: true,};

渲染数据样例

报表渲染效果

参数查询 零代码 极简配置

数据导出 零代码 极简配置

导出的数据在excel中打开样式如下图：

打印预览 零代码 极简配置

点评

接口精简(默认可以满足大部需求)

• onUpdateDatasetList ：提供数据集列表
• onUpdateData ：提供数据集记录（带参数查询）
• sheetDesign.getData() ：提取报表设计器的模板数据
• options功能选项配置 ：默认配置即可满足大部分需要
• reportDesign.on(“dataset-edited”,on_dataset_edited);//监听 编辑数据集事件
• reportDesign.loadData({config: config, data: data})；//触发数据刷新事件
• 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