报表开发高手养成记3——年度计划完成怎么样?我用一张监控看板来说服你!

楼主
我是社区第264321位番薯,欢迎点我头像关注我哦~

1.模板内容

这是一张证券公司年度计划完成情况监控看板,分别从收盘价、成交量、总市值等几个维度进行深入分析。

模板实现效果如下:

模板下载:点击链接公司年度计划表

模板特色功能:TAB轮播

2.模板构成

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

序号 组件类型 个数 涉及功能 效果展示
1 指标卡 4 /

  

2 图表 5 面积图、折线图、饼图、柱形图、条形图

3 仪表盘 4 试管型仪表盘、百分比圆环形仪表盘

4 TAB 1 /

 

3.布局与属性设置

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

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

4.组件实现

1)指标卡

①新建一个普通报表块,向body里面拖入报表块正常编辑内容即可

②编辑报表块:通过将背景染色、合并单元格、调整大小等变成合适的样式

③将提前准备好的小图标通过【插入图片】的方式插入到相应的单元格,将相关指标的文本插入到对应的单元格。

④设置此组件大小与的圆角边框,内容显示方式:双向铺满报表块

⑤预览效果

类似可做出如下所示指标卡:

拓展:

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

【大屏素材简介】https://help.fanruan.com/dvg/doc-view-68.html

【图标素材下载网站】https://www.ztupic.com/tupian/15850529689525/0-15-1-0-1.html

https://www.iconfont.cn/

(以上两个图标素材下载网站均来自于外部非帆软所有,商用请注意版权问题)

2)Tab块

①选择空白块中的tab块拖入到body中【Tab块-https://help.fanruan.com/finereport/doc-view-633.html#

②点击右上角“+”新增标签

③选中某个标签页修改标题

④选中容纳tab页标签的面板tabpane,可以修改样式模板

⑤设置Tab块的整体布局以及轮播间隔

拓展:

更多Tab块轮播实现方式如下:

决策报表Tab块轮播特效插件-https://help.fanruan.com/finereport/doc-view-3247.html

JS实现点击超链切换Tab块-https://help.fanruan.com/finereport/doc-view-2099.html

JS实现决策报表中Tab块轮播-https://help.fanruan.com/finereport/doc-view-2005.html

3)折线图

①插入折线图:选中第一个标签,将图表栏里的折线图图标拖拽到上一步新建好Tab块,编辑折线图,参照【折线图-https://help.fanruan.com/finereport/doc-view-1505.html

②编辑折线图:折线图类型选择为第一种

③选择对应的数据集,其中系列名选择字段值

④在样式中可以设置图表的图例和在系列中进行配色和调线宽等

⑤调整组件大小

⑥预览效果

拓展:

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

更多折线图展现技巧如下:

折线图最值设置闪烁动画-https://help.fanruan.com/finereport/doc-view-1721.html

折线图改变线条或标记点属性-https://help.fanruan.com/finereport/doc-view-3535.html

更多折线图实现方法如下:

大数据折线图-https://help.fanruan.com/finereport/doc-view-1955.html

渐变折线图-https://help.fanruan.com/finereport/doc-view-3218.html

动态轮播折线图-https://help.fanruan.com/finereport/doc-view-3259.html

4)饼图

①插入饼图:选中第一个标签,将图表栏里的饼图图标拖拽到2)中新建好Tab块,编辑饼图,参照【饼图-https://help.fanruan.com/finereport/doc-view-776.html

②类型选择第一种

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

④设置图例、标签、配色等

  

⑤调整组件大小

⑥预览效果

拓展:

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

更多饼图实现方法如下:

半圆饼图-https://help.fanruan.com/finereport/doc-view-1307.html

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

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

轮播环形图:https://help.fanruan.com/finereport/doc-view-3324.html

至此Tab块中第一个标签页的图表已完成,布局采用左右布局,折线图在左,环形图在右。布局效果如图所示:

5)柱形图

①插入柱形图:选中第二个标签,将图表栏里的柱形图图标拖拽到2)中新建好Tab块,编辑柱形图,参照【柱形图-https://help.fanruan.com/finereport/doc-view-1400.html

②类型选择第一种

③选择对应的数据集,系列名选择字段值

④设置样式

⑤调整组件大小

⑥预览效果

拓展:

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

更多柱形图实现方法如下:

渐变柱形图-https://help.fanruan.com/finereport/doc-view-3548.html

弧形柱形图-https://help.fanruan.com/finereport/doc-view-2664.html

堆积柱形图-https://help.fanruan.com/finereport/doc-view-3425.html

特殊图形柱形图-https://help.fanruan.com/finereport/doc-view-3776.html

占比柱形图-https://help.fanruan.com/finereport/doc-view-3563.html

6)试管型仪表盘

①插入仪表盘:选中第二个标签,将图表栏里的仪表盘图标拖拽到2)中新建好Tab块,编辑仪表盘,参照【试管型仪表盘-https://help.fanruan.com/finereport/doc-view-1326.html

②类型选择最后一种—试管型仪表盘

③选择对应的数据集

④在样式中设置图表的标签、配色等

⑤调整组件大小

⑥预览效果

拓展:

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

更多仪表盘实现方法如下:

多指针仪表盘-https://help.fanruan.com/finereport/doc-view-1324.html

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

百分比刻度槽型仪表盘-https://help.fanruan.com/finereport/doc-view-3380.html

至此Tab块中第二个标签页的图表已完成,布局采用左右布局,柱形图在左,试管型仪表盘在右。布局效果如图所示:

7)条形图

①插入条形图:选中第三个标签,将图表栏里的条形图图标拖拽到2)中新建好Tab块,编辑条形图,参照【条形图-https://help.fanruan.com/finereport/doc-view-3361.html

②类型选择第一种

③选择对应的数据集,其中系列名选择字段值

④在样式中调整图表的配色、间隔、设置坐标轴

 

⑤调整组件大小

⑥预览效果

拓展:

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

更多条形图展现技巧如下:

条形图隔行变色-https://help.fanruan.com/finereport/doc-view-3493.html

轮播条形图-https://help.fanruan.com/finereport/doc-view-3836.html

动态轮播条形图-https://help.fanruan.com/finereport/doc-view-3193.html

插入指标卡:选中第三个标签,将空白块中的报表块拖拽到2)中新建好Tab块,然后编辑样式,设置大小为445*324。

至此,Tab块中第三个标签页的图表已完成,布局采用左右布局,条形图在左,指标卡在右。布局效果如图所示:

8)面积图

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

②类型选择为第二种

③选择对应的数据集,其中系列名选择字段值

 

④在样式中可以设置图表标题、配色等

⑤调整组件大小

⑥预览效果

拓展:

其他更多面积图展现形式可见: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

9)百分比环形仪表盘

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

②类型选择为第三种

③选择对应的数据集,根据匹配的指针值和目标值会自动生成目标达成百分比

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

⑤调整组件大小(同理可以做出“全年总市值”的仪表盘,数据集为【Embedded1】)

⑥预览效果

拓展:

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

更多仪表盘实现方法如下:

多指针仪表盘-https://help.fanruan.com/finereport/doc-view-1324.html

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

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

 

 

分享扩散:

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

返回顶部 返回列表