企业系统首页展示模板- FineReport帮助文档 - 全面的报表使用教程和学习资料

文档创建者：张朵拉

历史版本：1

最近更新：张朵拉于 2021-12-15

1.模板内容

这是一张企业系统首页展示模板，分别从团队人员结构、业绩成果以及市场影响力等维度进行数据可视化展示。

模板实现效果如下：

模板下载：系统首页

模板特色功能：表排序、跑马灯

2.模板构成

这是一张决策报表模板，适用于PC端展示，模板一共由13个组件构成

	组件类型	个数	涉及功能	效果展示
1	指标卡	5	/
2	仪表盘	3	百分比刻度槽仪表盘
3	组合地图	1	区域地图、点地图、流向地图
4	图表	5	饼图、面积图、词云、雷达图、条形图
5	明细表	1	跑马灯

3.布局与属性设置

布局采用自适应布局，组件缩放逻辑选择双向自适应，组件间间隔设定为10，整体背景颜色选择了一个极淡的灰色（颜色的rgb颜色值为247,248,250，十六进制颜色码为#F7F8FA），body内边距全部设定为10

旧自适应下属性页面

其它组件的背景颜色均调成白色，组件大小调整见第4部分：组件实现所述。

4.组件实现

1）指标卡

①将空白块区的报表块图表拖入到body中

4.1-1.jpg

②编辑报表块

4.1-2.jpg

③分别选择相应的数据集

4.1-3.jpg

④调整组件大小

4.1-4.jpg

⑤预览效果

4.1-5.jpg

拓展：

指标卡的样式很多样，本张模板采用的紧紧是指标卡最基本的样式，其他更多展示形式可见：https://market.fanruan.com/reuse

2）仪表盘

①将图表栏里的仪表盘图标拖入到body中【百分比刻度槽型仪表盘-https://help.fanruan.com/finereport/doc-view-3380.html】

4.2-1.jpg

②类型选择第四种—百分比刻度槽型仪表盘

4.2-2.jpg

③分别为三个仪表盘选择对应的数据集，根据匹配的指针值和目标值会自动生成目标达成百分比

④此外，本张模板中的仪表盘的标签采用的是自定义设置【自定义标签-https://help.fanruan.com/finereport/doc-view-1882.html】

为了达到标签的换行的目的，可以采用html解析显示【图表标题/坐标轴/标签文本换行显示-https://help.fanruan.com/finereport/doc-view-1966.html】（其中一定要点击“使用html解析文本内容”）

⑤可以在系列中完成对该图表配色、布局、刻度槽、指针、半径大小等细节的调整

4.2-9.jpg

⑥调整组件大小

4.2-10.jpg

⑦预览效果

4.2-11.jpg

拓展：

其他更多仪表盘展现形式可见：https://market.fanruan.com/reuse

百分比圆环仪表盘-https://help.fanruan.com/finereport/doc-view-1325.html

试管型仪表盘-https://help.fanruan.com/finereport/doc-view-1326.html

3）组合地图

①将图表栏里的组合地图图标拖入到body中【组合地图-https://help.fanruan.com/finereport/doc-view-1586.html】

4.3-1.jpg

②类型选择第四种—组合地图，设置缩放等级和自定义中心点

4.3-2.jpg

③选择数据集分别给区域地图、点地图和流向地图匹配对应数据。

④在样式—系列中完成对区域图的主题颜色、不透明度，散点的样式和类型，流向的线宽、弯曲度、运动周期等的设置

⑤调整组件大小

4.3-9.jpg

⑥预览效果

4.3-10.jpg

拓展：

其他更多地图展现形式可见：https://market.fanruan.com/reuse

点地图-https://help.fanruan.com/finereport/doc-view-1585.html

流向地图-https://help.fanruan.com/finereport/doc-view-1699.html

多系列地图-https://help.fanruan.com/finereport/doc-view-2688.html

4）饼图

①将图表栏里的饼图图标拖入到body中【饼图-https://help.fanruan.com/finereport/doc-view-776.html】

4.4-1.jpg

②类型选择第一种—饼图

4.4-2.jpg

③选择对应的数据集，设置字段值

4.4-3.jpg

④在样式中可以完成对标签位置、不透明度、图表配色、内经占比等的设置

⑤调整组件大小

4.4-6.jpg

⑥预览效果

4.4-7.jpg

拓展：

其他更多饼图展现形式可见：https://market.fanruan.com/reuse

环形饼图-https://help.fanruan.com/finereport/doc-view-1308.html

多分类饼图-https://help.fanruan.com/finereport/doc-view-1310.html

5）面积图

①将图表栏中的面积图图标拖入到body中【面积图-https://help.fanruan.com/finereport/doc-view-3379.html】

4.5-1.jpg

②类型选择第一种

4.5-2.jpg

③选择对应的数据集，设置字段值

4.5-3.jpg

④面积图的线条走势可以在系列——形态里面调整，面积的填充颜色也可以自定义

⑤调整组件大小为

4.5-6.jpg

⑥预览效果

4.5-7.jpg

拓展：

其他更多面积图展现形式可见：https://market.fanruan.com/reuse

更多面积图实现方法如下：

百分比堆积面积图-https://help.fanruan.com/finereport/doc-view-1314.html

垂直和曲线面积图-https://help.fanruan.com/finereport/doc-view-1315.html

范围面积图-https://help.fanruan.com/finereport/doc-view-3773.html

6）词云

①将图表栏中的词云图图标拖入到body中【词云图-https://help.fanruan.com/finereport/doc-view-1700.html】

4.6-1.jpg

②类型选择为默认

4.6-2.jpg

③选择对应的数据集，设置对应的词名和词频字段

4.6-3.jpg

④可以在样式—系列中设置配色、字体、大小范围等

4.6-4.jpg

⑤调整组件大小为

4.6-5.jpg

⑥预览效果

4.6-6.jpg

拓展：

其他更多词云展现形式可见：https://market.fanruan.com/reuse

7）雷达图

①将图表栏中的雷达图图标拖入到body中【雷达图-https://help.fanruan.com/finereport/doc-view-1426.html】

4.7-1.jpg

②类型选择第一种

4.7-2.jpg

③选择对应的数据集，系列名使用字段名

4.7-3.jpg

④可以在样式-系列中完成对该图表的配色、不透明度等的设置

4.7-4.jpg

⑤调整组件大小

4.7-5.jpg

⑥预览效果

4.7-6.jpg

拓展：

其他更多雷达图展现形式可见：https://market.fanruan.com/reuse

更多雷达图实现方法如下：

不同形态的雷达图-https://help.fanruan.com/finereport/doc-view-1427.html

8）条形图

①将图表栏中的条形图图标拖入到body中【条形图-https://help.fanruan.com/finereport/doc-view-3361.html】

4.8-1.jpg

②类型选择第一种

4.8-2.jpg

③选择对应的数据集

4.8-3.jpg

④在样式系列中设置图表的配色、柱宽、分类间隔、圆角等

4.8-4.jpg

⑤调整组件大小

4.8-5.jpg

⑥预览效果

4.8-6.jpg

拓展：

其他更多条形图展现形式可见：https://market.fanruan.com/reuse

9）跑马灯

通过JS实现收尾相接的跑马灯效果【https://help.fanruan.com/finereport/doc-view-1746.html#5】

正文的内容正常编辑即可

4.9-1.jpg

在组件事件中添加初始化事件

4.9-2.jpg

本例中用到的JS代码如下

setTimeout(function(){
	$("div[widgetname=REPORT1]").find("#frozen-north")[0].style.overflow="hidden";
	$("div[widgetname=REPORT1]").find("#frozen-center")[0].style.overflow="hidden";
	},100);
window.flag=true;
setTimeout(function(){   
$("#frozen-center").mouseover(function()  
{  
  window.flag=false;  
  })
$("#frozen-center").mouseleave(function()  
{  
  window.flag=true; 
  })  
var old=-1;   
var interval=setInterval(function()  
{
if(window.flag){
   currentpos=$("#frozen-center")[0].scrollTop;  
   if (currentpos==old){
   	$("#frozen-center")[0].scrollTop=0;
     }  
   else {  
      old=currentpos;  
      $("#frozen-center")[0].scrollTop=currentpos+1.5;  
        }  
      }
    },60);
},500)

拓展：

JS实现自动滚屏/跑马灯效果-https://help.fanruan.com/finereport/doc-view-1741.html

JS实现首尾相接的跑马灯-https://help.fanruan.com/finereport/doc-view-1746.html

ps:（本模板制作说明使用的是安装了新自适应插件的FineReport10，如果您未安装新自适应插件可参考https://help.fanruan.com/finereport10.0/doc-view-3665.html）

已经是第一篇

下一篇：新功能实验室

有帮助
没帮助
只是浏览

中文（繁體） English 日本語

中文（简体）

企业系统首页展示模板

1.模板内容

2.模板构成

3.布局与属性设置

4.组件实现

1）指标卡

2）仪表盘

3）组合地图

4）饼图

5）面积图

6）词云

7）雷达图

8）条形图

9）跑马灯

附件列表