FineReport报表插件
一、3D地球
安装插件:
新建决策报表:
添加数据集:
编辑3D地图:
预览:
二、3D卡片动画
图片展示时,实现 3D 炫酷效果来展示,效果如下图所示:
安装该插件后,以决策报表为例,图表里会多出一个3D 卡片动画控件
图片准备:
点击下载images文件夹并解压:images.zip
将images文件夹复制到%FR_HOME%\webapps\webroot\help\picture目录下,如下图所示:
新建决策报表,添加内置数据集:
注:imgPath为绝对路径,内置数据集中的图片路径必须和电脑中图片路径一致
将 3D 卡片动画控件拖入到报表中,选中 3D 卡片动画控件,可以看到相应的配置。
数据设置:
具体含义如下表所示:
内容 | 定义 |
---|---|
名称 | 显示在卡片中央的文字 |
图片路径 |
卡片的图片地址 支持 Window 和 Unix 地址分隔符,必须是绝对路径 |
X 坐标 |
图片在表状形态下的 X 坐标位置,数值为整数,从 1 开始 |
Y 坐标 | 图片在表状形态下的 Y 坐标位置,数值为整数,从 1 开始 |
描述 1-3 | 为卡片添加的额外描述,默认样式为显示在卡片下方 |
注:其中 X、Y 坐标为必填内容
2.4.2 样式面板配置
1)样式
内容 | 定义 |
---|---|
背景 | 卡片动画的背景色 |
卡片 | 每一张小卡片的宽度、高度、背景色 |
边框 | 每一张小卡片的边框线宽、样式、颜色 |
阴影 | 每一张小卡片的阴影设置 |
编号 | 每一张小卡片的编号设置 |
2)相机
内容 | 定义 |
---|---|
视角 | 数值越大,卡片在水平方向被拉伸的越长 |
远近视截面 | 相对于深度剪切面的远近的距离 |
镜头角度 | 调整观察图像的角度 |
3)控制
内容 | 定义 |
---|---|
润滑度 | 鼠标操作指是的鼠标灵敏程度 |
距图像的最近最远距离 | 图像可以被缩小放大的极限距离 |
4)位置
调整图像位置和卡片之间的间隙
5)CSS
输入卡片各要素的 CSS 代码,让你的卡片更漂亮。
注:非技术人员这里可保持默认,无需配置。基本样式可以在样式栏中配置,这里只是让你的卡片更加好看。
-
背景样式:图表展示框的样式,可以在此添加纹理图案。
-
卡片样式:包括伪元素样式,可以写一些代码。
效果如下图所示:
2.4.3 特效面板配置
1)交互选项:在此面板配置图形形状,转换,旋转的参数,可以让图形连贯切换,效果更为炫酷。
效果预览
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 使用C#创建一个MCP客户端
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列1:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现