图像文字报表

概述

图像文字报表：报表中混合显示文字与图像，实现图像与文字的混合排列。

应用场景

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

示例说明

数据准备

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

[{"图像":"https://img0.baidu.com/it/u=3609521783,3249485151&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666","姓名":"孙林","性别":"男","民族":"汉","籍贯":"陕西","健康状况":"健康","出生年月":"1995-02-03","员工档案":"员工档案","在职教育":"北京大学","现任职务":"副总经理","专业技术职位":"副总经理"},{"图像":"https://img0.baidu.com/it/u=964250596,1816275952&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667","姓名":"金士朋","性别":"男","民族":"汉","籍贯":"山东","健康状况":"健康","出生年月":"1996-07-04","员工档案":"员工档案","在职教育":"山东大学","现任职务":"助理","专业技术职位":"助理"},{"图像":"https://img0.baidu.com/it/u=4282417178,614415074&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=664","姓名":"张珊","性别":"女","民族":"汉","籍贯":"河南","健康状况":"健康","出生年月":"1997-02-12","员工档案":"员工档案","在职教育":" 山东师范大学","现任职务":"技术开发","专业技术职位":"技术开发"},{"图像":"https://img1.baidu.com/it/u=3184016870,4257895732&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667","姓名":"孙阳","性别":"男","民族":"汉","籍贯":"吉林","健康状况":"健康","出生年月":"1989-12-06","员工档案":"员工档案","在职教育":"北京大学","现任职务":"项目经理","专业技术职位":"项目经理"},{"图像":"https://img0.baidu.com/it/u=2163774115,3688520422&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667","姓名":"袁丽","性别":"女","民族":"汉","籍贯":"河北","健康状况":"健康","出生年月":"1998-05-07","员工档案":"员工档案","在职教育":"北京师范大学","现任职务":"项目总监","专业技术职位":"项目总监"}]

报表设计

将A1-F1合并单元格，E2-F5合并单元格。
将数据字段拖入到A1、B2、B3、B4、B5、D2、D3、D4、D5、E2单元格，A1设置成分组以及不扩展，其余设置成分组以及向下扩展。在顶部工具栏-元素 将E2设置为图片。
选中A1-F5，点击上方工具栏-添加分组，将A1-F5添加为一个分组。
如下图所示

效果预览

多层表头报表.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

ttps://doc.tizdata.com/xiaozhi/650

下一篇 自动布局报表