小智纯前端js报表实战9-相对坐标-双向扩展

相对坐标-双向扩展

概述

相对坐标-双向扩展

应用场景

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

示例说明

数据准备

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

[
  {
    "type": 1,
    "name": "销售产品",
    "response_data": [
      {
        "销售员": "孙林",
        "产品": "苹果汁",
        "销售量": "140"
      },
      {
        "销售员": "孙林",
        "产品": "牛奶",
        "销售量": "431"
      },
      {
        "销售员": "孙林",
        "产品": "柳橙汁",
        "销售量": "176"
      },
      {
        "销售员": "孙林",
        "产品": "巧克力",
        "销售量": "333"
      },
      {
        "销售员": "孙林",
        "产品": "牛肉干",
        "销售量": "789"
      },
      {
        "销售员": "金士鹏",
        "产品": "苹果汁",
        "销售量": "290"
      },
      {
        "销售员": "金士鹏",
        "产品": "牛奶",
        "销售量": "635"
      },
      {
        "销售员": "金士鹏",
        "产品": "柳橙汁",
        "销售量": "500"
      },
      {
        "销售员": "金士鹏",
        "产品": "巧克力",
        "销售量": "420"
      },
      {
        "销售员": "金士鹏",
        "产品": "牛肉干",
        "销售量": "156"
      },
      {
        "销售员": "张三",
        "产品": "苹果汁",
        "销售量": "300"
      },
      {
        "销售员": "张三",
        "产品": "牛奶",
        "销售量": "324"
      },
      {
        "销售员": "张三",
        "产品": "柳橙汁",
        "销售量": "340"
      },
      {
        "销售员": "张三",
        "产品": "巧克力",
        "销售量": "318"
      },
      {
        "销售员": "张三",
        "产品": "牛肉干",
        "销售量": "289"
      },
      {
        "销售员": "孙洋",
        "产品": "苹果汁",
        "销售量": "120"
      },
      {
        "销售员": "孙洋",
        "产品": "牛奶",
        "销售量": "644"
      },
      {
        "销售员": "孙洋",
        "产品": "柳橙汁",
        "销售量": "540"
      },
      {
        "销售员": "孙洋",
        "产品": "巧克力",
        "销售量": "256"
      },
      {
        "销售员": "孙洋",
        "产品": "牛肉干",
        "销售量": "562"
      },
      {
        "销售员": "袁成捷",
        "产品": "苹果汁",
        "销售量": "220"
      },
      {
        "销售员": "袁成捷",
        "产品": "牛奶",
        "销售量": "343"
      },
      {
        "销售员": "袁成捷",
        "产品": "柳橙汁",
        "销售量": "563"
      },
      {
        "销售员": "袁成捷",
        "产品": "巧克力",
        "销售量": "583"
      },
      {
        "销售员": "袁成捷",
        "产品": "牛肉干",
        "销售量": "546"
      },
      {
        "销售员": "张颖",
        "产品": "苹果汁",
        "销售量": "250"
      },
      {
        "销售员": "张颖",
        "产品": "牛奶",
        "销售量": "234"
      },
      {
        "销售员": "张颖",
        "产品": "柳橙汁",
        "销售量": "300"
      },
      {
        "销售员": "张颖",
        "产品": "巧克力",
        "销售量": "352"
      },
      {
        "销售员": "张颖",
        "产品": "牛肉干",
        "销售量": "218"
      },
      {
        "销售员": "王伟",
        "产品": "苹果汁",
        "销售量": "180"
      },
      {
        "销售员": "王伟",
        "产品": "牛奶",
        "销售量": "666"
      },
      {
        "销售员": "王伟",
        "产品": "柳橙汁",
        "销售量": "490"
      },
      {
        "销售员": "王伟",
        "产品": "巧克力",
        "销售量": "384"
      },
      {
        "销售员": "王伟",
        "产品": "牛肉干",
        "销售量": "541"
      },
      {
        "销售员": "张武",
        "产品": "苹果汁",
        "销售量": "233"
      },
      {
        "销售员": "张武",
        "产品": "牛奶",
        "销售量": "700"
      },
      {
        "销售员": "张武",
        "产品": "柳橙汁",
        "销售量": "233"
      },
      {
        "销售员": "张武",
        "产品": "巧克力",
        "销售量": "435"
      },
      {
        "销售员": "张武",
        "产品": "牛肉干",
        "销售量": "219"
      },
      {
        "销售员": "韩文",
        "产品": "苹果汁",
        "销售量": "123"
      },
      {
        "销售员": "韩文",
        "产品": "牛奶",
        "销售量": "111"
      },
      {
        "销售员": "韩文",
        "产品": "柳橙汁",
        "销售量": "760"
      },
      {
        "销售员": "韩文",
        "产品": "巧克力",
        "销售量": "356"
      },
      {
        "销售员": "韩文",
        "产品": "牛肉干",
        "销售量": "345"
      }
    ]
  }
]

报表设计

将数据字段拖入到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
• 本文样例参考了：帆软报表-层次坐标
  • https://help.fanruan.com/finereport9.0/doc-view-339.html
    m/#/imbedShow/reportExample
  • 丰富的报表模板示例
• 小智报表在线试用
  • https://xzreport.com
• 小智报表js sdk下载
  • https://tizdata.com/xzdownload/
• 开发使用文档
  • https://doc.tizdata.com/xiaozhi/650
• 本文样例参考了：帆软报表-层次坐标
  • https://help.fanruan.com/finereport9.0/doc-view-339.html

下一篇 单行单列：双向扩展