大屏基础学习

编辑
  • 文档创建者:帆软-Dingzz
  • 浏览次数:5783次
  • 编辑次数:6次
  • 最近更新:Kevin-s 于 2019-06-01
  • 数据可视化在数据分析中的作用不言而喻,主要是借助于图形化手段,清晰有效地传达与沟通信息。交互式可视化能够让决策者快速理解数据背后的意义,深入了解细节层次,为决策分析提供了精准的意见。

    通过本章节的学习,可以掌握基本技巧,学会如何快速有效地做出一张大屏。

    了解大屏数据可视化

    决策报表基础

    1.描述

    FineReport 决策报表采用了画布式操作界面,专为大屏和移动端而生,通过简单的拖拽操作即可帮助用户构建强大、全面的「管理驾驶舱」,在同一个页面整合不同的企业数据,完美地展示企业的各类业务指标,实现数据的多维度分析。

    1)多屏自适应:响应式布局,PC 端设计,平板、手机、电视、大屏等多类终端自适应(仅在自适应布局下适用)

    2)丰富的可视化元素:提供表格、图形、控件等超多可视化组件

    3)多种布局方式:自适应布局、绝对布局、Tab 布局等多种布局方式,拖拽式设计

    4)组件共享复用:组件云端共享和本地复用,帮助用户更快设计出好看报表

    5)组件联动分析:组件之间的联动分析,点击某个组件,关联组件自动触发数据加载

    6)数据监控,定时刷新:后台数据智能检测对比,数据有变更时前台及时更新

    7)自动轮播:支持同一个位置轮播显示不同的图表样式,支持多个 Tab 页轮播

    2. 决策报表界面

    打开设计器,点击文件>新建决策报表,即可新建一张决策报表,如下图:

    1530782178fVmWYVLK.png

    3.组件介绍

    3.1参数面板

    参数面板是指,为决策报表添加过滤参数面板,所有过滤控件全部添加在该面板上,也可以理解为参数面板是为了承载参数控件而存在的,其制作方式与 参数入门 类似。

    3.2空白块

    Tab 块

    在一个页面中可以有多个 Tab 选项卡,每一个 Tab 选项卡下对应的是一个自适应布局,具体使用方法可参考 Tab 块

    绝对画布块

    实现了固定大小与自适应相结合的需求,对于制作卡片式的自由报表非常方便,具体使用方法可参考 绝对画布块

    报表块

    可在该组件中绑定单元格数据,以表格的形式在组件范围内显示数据,报表块的具体设置与 cpt 模板一致,cpt 模板的制作请参照 报表应用,并且报表块中的数据可作为图表块的数据源。

    3.3图表块

    可在该组件中选择任意 FineReport 支持的图表类型,图表块中所有图表的使用参考 图表入门

    3.4控件

    指过滤数据的组件,既可以作为组成部分添加到参数面板中,也可作为单独的组件添加到决策报表主体 body 中,如果作为参数控件放在参数面板中,决策报表支持的控件类型与cpt模板支持的控件类型基本一致。详细请参照 控件类型

    决策报表中添加了所有的组件,帮助大家理解各个组件的含义,如下图

    可视化组件

    1. 基础图表

    帆软自主研发的 HTML5 图表,具有优秀的动态效果和强大的交互体验,提供超强的个性化设置项,能在多种终端设备完美展示。

    我们介绍一些典型的新图表制作方法,并介绍了如何设置图表的样式,让用户能够独立制作出专业精美的分析图表。

    索引:

    [新]各图表的使用场景列举

    [新]图表类型

    [新]图表数据

    [新]图表样式

    [新]图表特效

    [新]大数据优化

    [新]图表自定义函数

    [新]图表接口

    [新]图表典型应用

    [新]其他图表相关

    2. 扩展图表

    为了满足大屏等场景下的动画及自动播放效果,帆软团队基于 WebGL 等技术新开发了此插件。插件中包含了一些展示形态新颖或展示效果酷炫的新图表,同时此插件将保持持续更新,确保内容的丰富性。

    插件安装

    注: 1)该插件仅支持使用 Chrome 浏览器,且涉及更多三维效果,建议用户采用高配置电脑预览(建议显卡为 1050ti/rx460 以上 )

            2)不支持移动端展示。


    索引:

    时间齿轮

    轮播 GIS 点地图

    三维地球

    轮播 KPI 指标卡

    粒子计数器

    目录齿轮

    弧形柱形图


    快速入门

    前期准备

    • 进行业务需求调研、根据业务场景抽取关键指标

    • 确定可视化图表类型

      可视化的最终目的是为了更清晰地传递信息,也就是说,用什么图形展示数据,非常重要。同一个指标的数据,从不同维度分析就有不同结果。在我们确定了某个数据关系类型后,就可以根据该数据的使用场景查找出相对应的图表和使用建议,并在其中进行选择。

      1557383938101526.jpeg111111.png

    排版布局

    明确大屏展现的目的,首要是服务于业务的。要让业务内容、数据合理的展现,就要避免误入疯狂堆砌指标的歧途,要分清主次。主要指标是什么?是反应核心业务内容的。次要指标是什么?通常是用于进一步阐述主要指标的。一定要让数据之美绽放在数据价值体现的基础上。

    下面推荐几个常见版式给大家

    1.png

    上面几个版式,不是金科定律,只是通常推荐的主次分布版式,能让信息一目了然。实际项目中,可能会遇到更加复杂的情况,有更多的指标要展示,除了主次分布,还有平均分布,根据我们的基本原则进行微调就好


    配色

    合理的布局能让业务内容更富有层次,合理的配色能让观看者更舒适。

    Body 背景

    背景的选择要遵从两点基本原则:深色调&一致性

    如下所示给大家几个推荐的配色方案:

    image.png

    并不是说背景一定要用颜色,也可以采用深色系的图片,可以搭配其他一些现实特性可以让整体看着更有科技感。推荐使用一些带有星空、条纹、渐变线、点缀效果之类的图片等

    设置方式:

    选择 body>样式>填充背景

    2.png

    统一图表系列、标签配色

    设置单一图表背景通常为无,统一设置系列颜色,修改标签、坐标轴颜色

    技巧:预先设置好图表预定义配色,统一给图表系列更换配色

    image.png

    设置标题字体大小、颜色

    设置大屏主标题

    统一组件标题大小和颜色

    设置方式:

    组件>样式>自定义>标题

    3.png

    点缀

    在大屏展现上,细节会极大的影响整体效果,需要通过适当给元素、标题、数字等添加一些诸如边框、图画等在内的点缀效果,能帮助提升整体美观度。

    image.png

    动态效果

    动效的范围很广,可以从很多角度解读,丰富的动态效果能让大屏看上去科技感十足,让大屏展示效果更加炫酷。合理的利用动态效果,可以帮助我们快速理解数据间的关系,为决策分析提供了指导性的意义。

    大屏可视化插件(扩展图表)

    基于 WebGL 等技术新开发,目的在于让每一个用户通过简单拖拽即可实现自动播放、3D 动画特效等多种效果,同时也能多维度地展示数据,提升大屏的视觉效果

    官网4.gif

    动态效果索引:

    tab轮播图表轮播报表块监控刷新图表监控刷新地图监控刷新并动态弹出数据提示图表闪烁 、 报表块滚动动态边框、动态背景图片图表开启自动数据点提示轮播接口轮播时自动联动其他组件


    附件列表


    主题: 大屏数据可视化
    标签: 暂无标签 编辑/添加标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]