zoukankan      html  css  js  c++  java
  • FineReport报表插件

    一、3D地球

    安装插件:

    新建决策报表:

    添加数据集:

    编辑3D地图:

    预览:

    二、3D卡片动画

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

    1574234568222024.gif

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

    图片准备:

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

    images文件夹复制到%FR_HOME%webappswebroothelppicture目录下,如下图所示:

    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)交互选项:在此面板配置图形形状,转换,旋转的参数,可以让图形连贯切换,效果更为炫酷。

    效果预览

  • 相关阅读:
    String、StringBuffer、StringBuilder源码解读
    查询条件左边写入函数,导致无法命中索引
    【图形学手记】law of the unconscious statistician
    【图形学手记】蒙特卡洛方法相关笔记
    【图形学手记】抽样分布相关的数学笔记
    C++ lower_bound
    【图形学手记】Inverse Transform Sampling 逆转换抽样
    【Java学习笔记】LinkedList JDK1.6
    【疑难杂症】new Date() 造成的线程阻塞问题
    【疑难杂症】【Solved】maven-compiler-plugin 在 idea 下的问题
  • 原文地址:https://www.cnblogs.com/zhangguosheng1121/p/12617391.html
Copyright © 2011-2022 走看看