反馈已提交

网络繁忙

年度计划展示看板

  • 文档创建者:RosieY
  • 历史版本:8
  • 最近更新:HeroZ 于 2023-02-24
  • 1.模板内容

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

    模板实现效果如下:

    1-1.jpg

    资源下载:

    1)设计器下载模板/场景方案示例,搜索模板名即可下载:设计器Alphafine模板商城下载模板

    模板商城下载模板-最终.gif

    2)帆软市场下载链接:公司年度计划表

    1-2.jpg

    模板特色功能:TAB轮播

    2.模板构成

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



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

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

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

    4TAB1/2-11.png


    3.布局与属性设置

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

    3-1.jpg

    旧自适应下的属性页面

    3-2.png

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

    4.组件实现

    1)指标卡

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

    4.1-1.jpg

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

    4.1-2.jpg

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

    4.1-3.jpg

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

    ⑤预览效果

    4.1-6.jpg

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

    拓展:

    指标卡的样式很多样,本张模板采用的紧紧是指标卡最基本的样式,其他更多展示形式可见:帆软市场

    大屏素材简介

    【图标素材下载网站】FVD

                                     阿里巴巴图标库(此图标素材下载网站来自于外部非帆软所有,商用请注意版权问题)

    2)Tab块

    ①选择空白块中的tab块拖入到body中【Tab块

    4.2-1.png

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

    4.2-2.png

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

    4.2-3.jpg

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

    4.2-4.png

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

    4.2-5.jpg

    拓展:

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

    决策报表Tab块轮播特效插件

    JS实现点击超链切换Tab块

    JS实现决策报表中Tab块轮播

    3)折线图

    ①插入折线图:选中第一个标签,将图表栏里的折线图图标拖拽到上一步新建好Tab块,编辑折线图,参照【折线图

    4.3-1.jpg

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

    4.3-2.jpg

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

    4.3-3.jpg

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

     

    ⑤调整组件大小

    4.3-6.jpg

    ⑥预览效果

    4.3-7.jpg


    拓展:

    其他更多折线图展现形式可见:帆软市场

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

    折线图最值设置闪烁动画

    折线图改变线条或标记点属性

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

    大数据折线图折线图动态轮播折线图

    4)饼图

    ①插入饼图:选中第一个标签,将图表栏里的饼图图标拖拽到2)中新建好Tab块,编辑饼图,参照【饼图

    4.4-1.jpg

    ②类型选择第一种

    4.4-2.jpg

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

    4.4-3.jpg

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

    ⑤调整组件大小

    ⑥预览效果

    拓展:

    其他更多饼图展现形式可见:帆软市场

    更多饼图实现方法:饼图

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

    4.4-9.jpg


    5)柱形图

    ①插入柱形图:选中第二个标签,将图表栏里的柱形图图标拖拽到2)中新建好Tab块,编辑柱形图,参照【柱形图

    4.5-1.jpg

    ②类型选择第一种

    4.5-2.jpg

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

    4.5-3.jpg

    ④设置样式

      

    ⑤调整组件大小

    4.5-6.jpg

    ⑥预览效果

    4.5-7.jpg

    拓展:

    其他更多柱形图展现形式可见:帆软市场

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

    渐变柱形图

    弧形柱形图

    堆积柱形图

    特殊图形柱形图

    占比柱形图

    6)试管型仪表盘

    ①插入仪表盘:选中第二个标签,将图表栏里的仪表盘图标拖拽到2)中新建好Tab块,编辑仪表盘,参照【试管型仪表盘

    4.6-1.jpg

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

    4.6-2.jpg

    ③选择对应的数据集

    4.6-3.jpg

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

     

    ⑤调整组件大小

    4.6-6.jpg

    ⑥预览效果

    4.6-7.jpg

    拓展:

    其他更多仪表盘展现形式可见:帆软市场

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

    多指针仪表盘

    百分比圆环仪表盘

    百分比刻度槽型仪表盘

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

    4.6-8.jpg

    7)条形图

    ①插入条形图:选中第三个标签,将图表栏里的条形图图标拖拽到2)中新建好Tab块,编辑条形图,参照【条形图

    ②类型选择第一种

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

    4.7-3.jpg

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

     

    ⑤调整组件大小

    4.7-6.jpg

    ⑥预览效果

    4.7-7.jpg


    拓展:

    其他更多条形图展现形式可见:帆软市场

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

    条形图隔行变色

    轮播条形图

    动态轮播条形图

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

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

    4.7-8.jpg

    8)面积图

    ①将图表栏中的面积图图标拖入到body中【面积图

    4.8-1.jpg

    ②类型选择为第二种

    4.8-2.jpg

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

    4.8-3.jpg

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

     

    ⑤调整组件大小

    4.8-6.jpg

    ⑥预览效果

    4.8-7.jpg

    拓展:

    其他更多面积图展现形式可见:帆软市场

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

    百分比堆积面积图

    垂直和曲线面积图

    范围面积图

    9)百分比环形仪表盘

    ①插入仪表盘:选中body,将图表栏里的仪表盘图标拖拽到body中,编辑仪表盘,参照【百分比刻度槽型仪表盘

    4.9-1.jpg

    ②类型选择为第三种

    4.9-2.jpg

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

    4.9-3.jpg

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

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

     

    ⑥预览效果

    4.9-9.jpg

    拓展:

    其他更多仪表盘展现形式可见:帆软市场

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

    多指针仪表盘

    百分比圆环仪表盘

    试管型仪表盘

    附件列表


    主题: 功能场景案例
    • 有帮助
    • 没帮助
    • 只是浏览

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭

    联系我们
    在线支持
    获取专业技术支持,快速帮助您解决问题
    工作日9:00-12:00,13:30-17:30在线
    页面反馈
    针对当前网页的建议、问题反馈
    售前咨询
    采购需求/获取报价/预约演示
    或拨打: 400-811-8890 转1
    qr
    热线电话
    咨询/故障救援热线:400-811-8890转2
    总裁办24H投诉:17312781526
    提交页面反馈
    仅适用于当前网页的意见收集,帆软产品问题请在 问答板块提问前往服务平台 获取技术支持