小智纯前端js报表实战4-绝对坐标纵向扩展

绝对坐标-纵向扩展

概述

绝对层次坐标

用于获取扩展后某一位置上的值。如获取A1扩展后的A3单元格的值，就可以在别的单元格如B1中输入=A1[A1:3]，其公式意义在于获取A1扩展后的第三个单元格的值，其效果如下

绝对坐标-纵向扩展：绝对坐标定位

应用场景

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

示例说明

数据准备

在数据面板中添加数据集，可选择Json数据集和API服务数据集。Json数据集输入如下图所示：

[
  {
    "type": 1,
    "name": "供应商产品",
    "response_data": [
      {
        "供应商": "1",
        "产品名称": "苹果汁"
      },
      {
        "供应商": "1",
        "产品名称": "牛奶"
      },
      {
        "供应商": "1",
        "产品名称": "番茄酱"
      },
      {
        "供应商": "2",
        "产品名称": "盐"
      },
      {
        "供应商": "2",
        "产品名称": "麻油"
      },
      {
        "供应商": "2",
        "产品名称": "海苔酱"
      },
      {
        "供应商": "2",
        "产品名称": "肉松"
      },
      {
        "供应商": "3",
        "产品名称": "酱油"
      },
      {
        "供应商": "3",
        "产品名称": "海鲜粉"
      },
      {
        "供应商": "3",
        "产品名称": "胡椒粉"
      },
      {
        "供应商": "4",
        "产品名称": "鸡"
      },
      {
        "供应商": "4",
        "产品名称": "蟹"
      },
      {
        "供应商": "4",
        "产品名称": "鸡精"
      }
    ]
  }
]

报表设计

将数据字段拖入到A2、B2,在B5,B6,B7分别写入绝对坐标定位的公式，A2,B2并设置成分组以及向下扩展。如下图所示：

效果预览

参考文档

• 小智报表样例源码下载
  • 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

sdk下载

• https://tizdata.com/xzdownload/

• 开发使用文档
  • https://doc.tizdata.com/xiaozhi/650

下一篇 绝对坐标：横向扩展