`

如何做一张能让人眼前一亮的大屏?

阅读更多

作为在职场驰骋的社会人,提到数据可视化大家应该都不陌生了。数据可视化的作用也不用我多说,主要是利用图形化手段,更清晰直观地将数据展示。多层次、交互式的可视化分析能够方便决策者理解数据背后的意义,深入了解数据细节,帮助领导者做出更加精准的决策。

近年来,数据可视化大屏的出现,更是掀起一番浪潮,众多企业纷纷想要打造属于自己的“炫酷”大屏驾驶舱。比如天猫每年的双十一销售大屏,地图上各地区实时滚动的销售额数据,总能给人下深刻的印象。

可是,在大屏上占据一席之地的地图往往只能从某一个维度展示数据,数据指标那么多,领导全部都要看,这可怎么办?

 

如何做一张能让人眼前一亮的大屏?

 

 

偷偷告诉你,大屏可视化插件扩展图表已经悄悄更新了一个新的地图图表类型——轮播三维组合地图

如何做一张能让人眼前一亮的大屏?

 

先看一下效果:

如何做一张能让人眼前一亮的大屏?

 

我们可以看出,图中以多种地图形态展示了四个维度的数据,既体现了数据价值,也实现了炫酷的动态效果。

单个图表的展示不能完全体现出效果,我们来看一张大屏demo模板

如何做一张能让人眼前一亮的大屏?

 

大家是不是都已经蠢蠢欲动了?允许小编卖个关子,先简单给大家介绍一下什么是扩展图表

扩展图表插件是基于webgl等技术开发,通过简单拖拽即可实现自动播放、3D动画特效等多种效果,且可以根据图表类型和数据提供“自动轮播”和“定时刷新”,满足用户不同场景下的业务需求,在体现数据价值的同时让大屏炫酷起来

如何做一张能让人眼前一亮的大屏?

 

打开设计器,跟我一起来玩转轮播三维组合地图

服务器>插件管理>安装/更新扩展图表3.0

 

如何做一张能让人眼前一亮的大屏?

 

选择扩展图表—地图类,轮播三维组合地图

如何做一张能让人眼前一亮的大屏?

 

分别给四种地图形态选取数据源

如何做一张能让人眼前一亮的大屏?

 

没错,就这么简单,轮播三维组合地图已经完成了!

当然,扩展图表可不仅仅只有这一种效果,包含地图类、指标卡类、仪表盘类等十几种图表类型,大家可以根据需求选择适合的图表,瞬间提升大屏可视化效果

其他扩展图表类型

轮播GIS点地图

如何做一张能让人眼前一亮的大屏?

 

轮播目标齿轮

如何做一张能让人眼前一亮的大屏?

 

时间齿轮

如何做一张能让人眼前一亮的大屏?

 

轮播夜光仪表盘

如何做一张能让人眼前一亮的大屏?

 

扩展图表的图表类型远不止于此,在这里小编就不一一介绍啦,更多的效果等待大家来挖掘。

扩展图表应用实例

每一个效果看起来都非常炫酷,浸入式的动画体验把枯燥的数据变得活灵活现,但是有些用户不知道怎么将扩展图表与大屏进行完美结合,小编今天带来几个实例模板,展示如何在大屏内应用扩展图表,提升大屏整体观感

如何做一张能让人眼前一亮的大屏?

 

 

如何做一张能让人眼前一亮的大屏?

 

 

如何做一张能让人眼前一亮的大屏?

 

想要大屏有风度,心中牢记四要素:排版布局、配色、点缀、动态效果

如何做一张能让人眼前一亮的大屏?

 

NO.1排版布局

明确大屏的展现目的,首先要服务于业务。一个驾驶舱无法展现所有的业务数据,要分清楚主次,让业务内容、数据合理的展现,切勿堆砌满屏的指标,领导找不到重点,数据再多,也毫无意义。

可以参考下面版式:

如何做一张能让人眼前一亮的大屏?

 

NO.2配色

  • 大屏的背景一般选用深色调的颜色或者图片,可以搭配一些带有星空、条纹等效果的图片可以使大屏看起来更有科技感
  • 图表的颜色也至关重要,在跟大屏主色调保持一致的基础上,所有图表的配色还要保持一致性

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

服务器—图表预定义配色—添加新的预定义样式—编辑图表—系列配色选择

如何做一张能让人眼前一亮的大屏?

 

  • 统一组件标题大小、颜色

设置方式:组件—样式—自定义—标题

如何做一张能让人眼前一亮的大屏?

 

NO.3点缀

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

如何做一张能让人眼前一亮的大屏?

 

NO.4动态效果

合理的利用动态效果,可以帮助我们快速理解数据间的关系,为决策分析提供了指导性的意义。

  • 报表块监控刷新,数字实时动态变化
如何做一张能让人眼前一亮的大屏?

 

  • 报表滚动(跑马灯),展示更多数据
如何做一张能让人眼前一亮的大屏?

 

  • 数据点提示自动播放
如何做一张能让人眼前一亮的大屏?

 

更多动态效果移步帮助文档,这里小编不过多介绍了

对大屏感兴趣的同学可以下载FineReport自己动手试试哦,详细步骤可以参考大屏实例方案,按照套路做大屏,适当发挥出扩展图表的优势,你的大屏一定美翻天!

 

分享到:
评论

相关推荐

    100套全网最全可视化大屏系统,即开即用

    2022年了,还有人不会可视化大屏? 我以前不止一次给各位看过可视化大屏,无论是什么做的,最终的意义都是要让数据展现的更直白、美观、有科技感一点! 或许,你以前是用Excel做可视化大屏 或者,你以前是用vue.js...

    分享100个数据可视化大屏模板及通用组件库,资源免费下载(Axure高保真原型元件,可一键导入编辑修改)

    开发一张可视化大屏? 一个完整的大屏开发项目,一般分为需求调研、原型设计、模板开发、大屏调试、正式上线这样五个步骤,这其中需求调研是重中之重。 首先要进行业务需求调研,搞清楚大屏的受众是谁,明确他们对...

    20套成品可视化大屏系统,即开即用

    2022年了,还有人不会可视化大屏? 我以前不止一次给各位看过可视化大屏,无论是什么做的,最终的意义都是要让数据展现的更直白、美观、有科技感一点! 或许,你以前是用Excel做可视化大屏 或者,你以前是用vue.js...

    30套成品可视化大屏系统,即开即用

    2021年了,还有人不会可视化大屏? 我以前不止一次给各位看过可视化大屏,无论是什么做的,最终的意义都是要让数据展现的更直白、美观、有科技感一点! 或许,你以前是用Excel做可视化大屏 或者,你以前是用vue.js...

    【大数据可视化大屏源码】仓库大屏.zip

    大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据可视化大屏前端源码大数据...

    大屏 首页 动画 大屏 首页 动画大屏 首页 动画大屏 首页 动画大屏 首页 动画

    标题和描述中提到的"大屏首页动画"指的是在网页设计和开发中,特别是针对大屏幕设备(如电视、广告屏幕或大型显示屏)的首页设计,通常会采用动态视觉效果来吸引用户注意力并提升用户体验。这种动画设计不仅局限于...

    17个HTML大屏展示模板

    8. **压力容器大屏**:可能是一个专门用于监控压力容器运行状态的大屏模板,可能包括压力读数、温度、安全警告等关键指标。 9. **车辆综合管控平台**:可能是一个用于监控和管理车队的大屏模板,展示车辆位置、速度...

    数据大屏76套源码.zip

    "数据大屏76套源码.zip" 是一个包含76个不同设计和功能的数据大屏模板的压缩文件,为用户提供了丰富的选择,无需从零开始构建,直接可以用于自己的项目中。下面我们将详细探讨这些知识点: 1. **前端技术**:数据...

    这套售楼处智能化规划设计方案,让人眼前一亮.pptx

    - 采用体验式设计,通过信息展示、交互和功能联动技术,如投影、人感互动、信息交互、增强现实、智能控制等,让客户全方位感知项目。 - 设计旨在加深客户印象,提供科技感、实用性和交互性的体验,使客户在认知、...

    WPF监控平台(科技大屏)一

    **WPF监控平台(科技大屏)一** 在IT领域,WPF(Windows Presentation Foundation)是一种微软开发的用户界面框架,用于构建具有丰富图形、多媒体和互动体验的应用程序。在这个项目中,"WPF监控平台(科技大屏)一"很...

    前端大屏展示框架一

    大屏展示的框架,,,,,

    多人签约仪式软件大屏同步显示

    多人签约仪式软件大屏同步显示是一种高效且现代的商务合作签署方式,它利用先进的技术将签约过程实时投影到大屏幕上,让所有参与者都能清晰地看到签约动态。这种软件通常具有高度的互动性和可视化效果,旨在提升会议...

    HTML大屏报表-数据可视化大屏大屏展示系统-Echarts图表大屏-源码-解压即用.zip

    现在,我们为您提供一份精心制作的HTML大屏报表资源包,基于强大的Echarts可视化库,让您轻松构建专业级的数据大屏。 资源特点: 前端技术领先:利用HTML5和CSS3的前沿技术,确保大屏展示流畅、兼容性强,支持多终端...

    Echarts + Web实现大屏展示

    Echarts + Web实现大屏展示是一种常见的数据可视化技术,它结合了Echarts库与Web开发技术,用于在大型显示屏上创建交互式的数据展示界面。Echarts是中国百度公司开源的一个JavaScript图表库,支持丰富的图形类型,如...

    一个简单的动态3d地图demo可以拿来做大屏展示

    "一个简单的动态3d地图demo可以拿来做大屏展示" 这个标题揭示了我们要讨论的核心内容:一个3D地图的演示项目,它具有动态特性,适用于大屏幕展示。描述中的“一个简单的动态3d地图demo,可以拿来做大屏展示”进一步...

    还拿大屏当摆设?无需代码,用Smartbi制作大屏让数据“会说话”!.docx

    标题中的“Smartbi制作大屏让数据‘会说话’”是指使用Smartbi这款BI(商业智能)工具,通过数据可视化的方式让数据呈现更直观、生动的效果。Smartbi是一款国内BI行业的领先产品,专注于为企业提供商业智能和大数据...

    大屏图表前端开发案例大屏图表开发项目

    本项目“大屏图表前端开发案例大屏图表开发项目”旨在提供一个全面的实践平台,帮助开发者掌握大屏图表的制作技巧。以下是关于这个项目及其相关知识点的详细说明: **一、前端开发基础** 前端开发是构建Web应用程序...

    HTML大屏报表-科技感大屏报表平台-Echarts图表大屏-源码-解压即用.zip

    现在,我们为您提供一份精心制作的HTML大屏报表资源包,基于强大的Echarts可视化库,让您轻松构建专业级的数据大屏。 资源特点: 前端技术领先:利用HTML5和CSS3的前沿技术,确保大屏展示流畅、兼容性强,支持多终端...

    基于Vue实现一个功能简单的GIS数据大屏案例源码.zip

    【资源说明】基于Vue实现一个功能简单的GIS数据大屏案例源码.zip基于Vue实现一个功能简单的GIS数据大屏案例源码.zip基于Vue实现一个功能简单的GIS数据大屏案例源码.zip基于Vue实现一个功能简单的GIS数据大屏案例源码...

    Vue 大屏数据展示模版

    datav模版 内容概要:组件库基于Vue ,主要用于构建...阅读建议:此资源提供dataV demo案例,不仅是代码编写实现也更注重内容上的需求分析和方案设计,所以在学习的过程要结合这些内容一起来实践,并调试对应的代码。

Global site tag (gtag.js) - Google Analytics