概述
图像文字报表:报表中混合显示文字与图像,实现图像与文字的混合排列。
应用场景
如下图所示,简单展示数据
示例说明
数据准备
在数据面板中添加数据集,可选择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添加为一个分组。
如下图所示
效果预览
参考文档
- 小智报表样例源码下载
- 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