FineReport报表插件

一、3D地球

安装插件:

 

新建决策报表:

 

 

添加数据集:

编辑3D地图:

 

预览:

 

 

二、3D卡片动画

图片展示时,实现 3D 炫酷效果来展示,效果如下图所示: 

1574234568222024.gif

 

安装该插件后,以决策报表为例,图表里会多出一个3D 卡片动画控件
222

图片准备:

点击下载images文件夹并解压:images.zip

images文件夹复制到%FR_HOME%\webapps\webroot\help\picture目录下,如下图所示:

1574234759606348.png

 

新建决策报表,添加内置数据集:

注:imgPath为绝对路径,内置数据集中的图片路径必须和电脑中图片路径一致

1574235310624789.png

将 3D 卡片动画控件拖入到报表中,选中 3D 卡片动画控件,可以看到相应的配置。

数据设置:

1574235968595185.png

具体含义如下表所示:

内容定义
名称 显示在卡片中央的文字
图片路径

卡片的图片地址

支持 Window 和 Unix 地址分隔符,必须是绝对路径

X 坐标

图片在表状形态下的 X 坐标位置,数值为整数,从 1 开始

Y 坐标 图片在表状形态下的 Y 坐标位置,数值为整数,从 1 开始
描述 1-3 为卡片添加的额外描述,默认样式为显示在卡片下方

注:其中 X、Y 坐标为必填内容

 

2.4.2 样式面板配置

1574236544859723.png

1)样式

内容定义
背景 卡片动画的背景色
卡片 每一张小卡片的宽度、高度、背景色
边框 每一张小卡片的边框线宽、样式、颜色
阴影 每一张小卡片的阴影设置
编号 每一张小卡片的编号设置

2)相机

内容定义
视角 数值越大,卡片在水平方向被拉伸的越长
远近视截面 相对于深度剪切面的远近的距离
镜头角度 调整观察图像的角度

3)控制

内容定义
润滑度 鼠标操作指是的鼠标灵敏程度
距图像的最近最远距离 图像可以被缩小放大的极限距离

4)位置

调整图像位置和卡片之间的间隙

5)CSS

输入卡片各要素的 CSS 代码,让你的卡片更漂亮。

注:非技术人员这里可保持默认,无需配置。基本样式可以在样式栏中配置,这里只是让你的卡片更加好看。

  • 背景样式:图表展示框的样式,可以在此添加纹理图案。

222

  • 卡片样式:包括伪元素样式,可以写一些代码。

效果如下图所示:

222

 

2.4.3 特效面板配置

222

1)交互选项:在此面板配置图形形状,转换,旋转的参数,可以让图形连贯切换,效果更为炫酷。

 

效果预览

 

 

posted @   困了就睡觉觉  Views(849)  Comments(0Edit  收藏  举报
编辑推荐:
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 使用C#创建一个MCP客户端
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列1:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示