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

绝对坐标-纵向扩展

概述

绝对层次坐标

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

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

应用场景

如下图所示,简单展示数据
在这里插入图片描述

示例说明

数据准备

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

[
  {
    "type": 1,
    "name": "供应商产品",
    "response_data": [
      {
        "供应商": "1",
        "产品名称": "苹果汁"
      },
      {
        "供应商": "1",
        "产品名称": "牛奶"
      },
      {
        "供应商": "1",
        "产品名称": "番茄酱"
      },
      {
        "供应商": "2",
        "产品名称": "盐"
      },
      {
        "供应商": "2",
        "产品名称": "麻油"
      },
      {
        "供应商": "2"
### 关于小智前端框架的学习资料与教程 #### 小智前端框架简介 小智前端框架是一个专注于报表设计、数据可视化以及业务逻辑处理的工具集。它提供了丰富的功能支持,包括但不限于报表模板创建、动态数据绑定、复杂图表展示等功能[^3]。 #### 学习资源推荐 以下是针对小智前端框架的一些学习资源: 1. **官方文档** 官方开发使用文档是最权威的学习材料之一,涵盖了从小智报表的基础概念到高级应用的所有内容。可以通过以下链接访问: [https://doc.tizdata.com/xiaozhi/650](https://doc.tizdata.com/xiaozhi/650) 2. **示例源码下载** 提供了一个完整的样例项目,开发者可以直接通过源码理解其内部实现机制并快速上手实际操作。可以从Gitee仓库获取: ```bash git clone https://gitee.com/tizdata_admin/vue-xzreport-example.git ``` 3. **在线Demo体验** 如果希望直观感受小智报表的功能特性而不必立即搭建环境,则可尝试在线演示平台: [https://xzdemo.tizdata.com/#/imbedShow/reportExample](https://xzdemo.tizdata.com/#/imbedShow/reportExample)[^3] 4. **JS SDK下载** 对于需要集成至现有系统的场景,可以单独下载JavaScript SDK来完成对接工作: [https://tizdata.com/xzdownload/](https://tizdata.com/xzdownload/) 5. **具体案例解析——标签打印报表** 针对特定应用场景如标签打印,有专门的文章介绍其实现方式及其背后的技术细节: [https://www.yuque.com/attachments/yuque/...json](https://www.yuque.com/attachments/yuque/0/2023/json/25420404/1688113831323-a68c040e-7bd8-43b3-96b8-41457313b07c.json)[^5] #### 技术背景补充 如果计划深入研究小智前端框架的工作原理或者优化性能表现的话,还需要掌握一些基础理论知识,比如WebGIS领域中的图形图像底层渲染技术等[^2]。这些基础知识能够帮助更全面地理解和运用该类库。 --- ### 示例代码片段 下面给出一段简单的HTML+Vue.js脚本用于加载并初始化一个小智报表实例: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小智报表示例</title> <!-- 引入必要的CSS文件 --> <link rel="stylesheet" href="/path/to/xzreport.css"/> </head> <body> <div id="app"></div> <!-- Vue核心库 --> <script src="https://cdn.jsdelivr.net/npm/vue@next"></script> <!-- XZReport JS SDK --> <script src="/path/to/xzreport.min.js"></script> <script type="text/javascript"> new Vue({ el: '#app', mounted() { const reportConfig = { /* 自定义配置参数 */ }; this.$refs.xzreport.init(reportConfig); } }); </script> </body> </html> ``` ---
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小智数据

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值