精华内容
参与话题
问答
  • 大屏数据可视化

    2017-02-18 10:07:55
    大屏数据可视化案例;大数据可视化案例;
  • 大屏数据可视化案例

    万次阅读 多人点赞 2018-06-25 18:07:38
    数据可视化:把相对复杂的、抽象的数据通过可视的、交互的方式进行展示,从而形象直观地表达数据蕴含的信息和规律。 数据可视化是数据空间到...大屏数据可视化应用的难点并不在于图表类型的多样化,而在于如何能在...

    数据可视化:把相对复杂的、抽象的数据通过可视的、交互的方式进行展示,从而形象直观地表达数据蕴含的信息和规律。
    数据可视化是数据空间到图形空间的映射,是抽象数据的具象表达。
    数据可视化交互的基本原则:总览为先,缩放过滤按需查看细节。

    大屏数据可视化是当前可视化领域的一项热门应用,通常可以分为信息展示类、数据分析类及监控预警类。
    大屏数据可视化应用的难点并不在于图表类型的多样化,而在于如何能在简单的一页之内让用户读懂数据之间的层次与关联,这就关系到布局、色彩、图表、动效的综合运用。如排版布局应服务于业务,避免为展示而展示;配色一般以深色调为主,注重整体背景和单个视觉元素背景的一致性。
    制作可视化大屏,最便捷有效的方式是使用DataV、帆软等报表工具,而本示例项目则使用ECharts自行开发。

    项目案例 - 上市公司全景概览
    在这里插入图片描述

    地图数据可视化 - 基于ECharts Geo
    这里写图片描述

    3D图表展示 - 基于ECharts GL
    这里写图片描述

    热力图展示 - 基于ECharts & 百度地图
    这里写图片描述

    ECharts扩展示例
    这里写图片描述

    旭日图 - 基于ECharts V4.2
    在这里插入图片描述

    地理信息数据 - ECharts & Baidu Map
    在这里插入图片描述

    项目Git地址:https://github.com/yyhsong/iDataV
    演示地址:https://yyhsong.github.io/iDataV

    后记:
    除自行开发可视化大屏外,还可以通过第三方服务来快速实现,如阿里云DataV、腾讯云图、百度Sugar等,具体可参考:https://blog.csdn.net/hwhsong/article/details/83097924

    展开全文
  • 大屏数据可视化模板

    万次阅读 多人点赞 2019-04-30 17:20:52
    在开发大屏数据可视化项目时,除了各类报表的开发外,大屏的风格设计也是一项十分重要且耗时的工作。 本文推荐的几款大屏模板,旨在帮助那些有大屏数据可视化开发需求的同学能够快速上手,把更多的时间、精力放在...

    在开发大屏数据可视化项目时,除了各类图表的开发外,大屏的风格设计也是一项十分重要且耗时的工作。
    本文推荐的几款大屏模板,旨在帮助那些有大屏数据可视化开发需求的同学能够快速上手,把更多的时间、精力放在报表本身的开发上。
    该套模板采用CSS3的flex布局,具备良好的适应性,能够适配普通PC及各类大屏的常用分辨率。
    模板采用了通用的上下和左中右布局,把整个大屏分隔成了若干区域(代码中已实现),方便在具体开发过程中根据实际需要自行调整。
    配色方面,模板均采用深色背景,或采用了简约风格的背景图片。

    模板1

    在这里插入图片描述
    在线演示:https://yyhsong.github.io/iDataV/tpl01/index.html

    模板2

    在这里插入图片描述
    在线演示:https://yyhsong.github.io/iDataV/tpl02/index.html

    模板3

    在这里插入图片描述
    在线演示:https://yyhsong.github.io/iDataV/tpl03/index.html

    模板4

    在这里插入图片描述
    在线演示:https://yyhsong.github.io/iDataV/tpl04/index.html


    项目演示:https://yyhsong.github.io/iDataV/
    项目Github:https://github.com/yyhsong/iDataV

    展开全文
  • 当前,比较流行的大屏数据可视化说白了,就是以大屏为载体的数据可视化。例如,双11,各大电商们通过大屏实时呈现不断跳动的销售额,这种大屏可视化能够营造热烈的氛围,调动人们的情绪,让大家跟着销售额不断狂欢!...

    古人云,一图胜万言,把抽象、复杂的数据通过图表的方式呈现出来,能够使数据更加直观、易于理解。

    当前,比较流行的大屏数据可视化说白了,就是以大屏为载体的数据可视化。

    例如,双11,各大电商们通过大屏实时呈现不断跳动的销售额,这种大屏可视化能够营造热烈的氛围,调动人们的情绪,让大家跟着销售额不断狂欢!

    cfe9c1679225bf33a8574b9437d6d3e4.gif

    利用酷炫大屏实时呈现业务数据,能够满足大型会议、领导参观、展览、业务监控等需求,业务数据一目了然。

    那么,如何实现大屏数据可视化呢?

    如果要自研,这里面涉及数据分析、UI、前端、后端等一系列环节,不是一个数据分析师或者产品经理可以完成的!

    当然,除了自研,还可以直接选用第三方产品来实现数据大屏可视化。

    1、市面上已有的产品

    目前,市面上已有不少成熟的大屏可视化工具,可以直接选用。下面介绍几种。

    (1)阿里DataV

    DataV是由阿里云出品的一款数据可视化产品,DataV数据可视化是使用可视化应用的方式来分析并展示庞杂数据的产品。

    例如,智能商场数据大屏案例。

    8e877e0afbfe4c119eb30f9cf8047c40.gif

    DataV提供了满足各类场景和人群需求的可视化应用工具,开箱即用,效果惊艳。通过DataV还可以开发天猫双11同款数据可视化应用。

    (2)腾讯云图

    腾讯云图是一个一站式数据可视化展示平台,零门槛打造出专业大屏数据展示。

    例如,永辉超市数据大屏可视化案例。

    a05f8ccfba6a31153405489a6b4525ff.png

    腾讯云图具有酷炫大屏、自由布局、灵活多端和实时数据等特性。

    (3)百度数据可视化Sugar

    百度Sugar具有自助BI报表分析和制作可视化数据大屏的强大工具,组件丰富,开箱即用,无需SQL和任何编码。

    例如,电商618数据大屏案例。

    7429e391fbd7a6435f3d0ccc197199ab.png

    Sugar具有BI报表与大屏一体化、移动端完美适配、支持云端及私有部署等优势。

    (4)帆软报表

    帆软报表,FineReport,专为企业数据分析而生。将炫酷的数据大屏发布到各场景中展示,如监控中心、会展中心等。

    例如,泰尔重工大屏可视化案例。

    ab7aa264b3b422987ccf45d58dbe485a.png

    帆软报表具有简单易上手、轻松开发复杂报表及快速应对各种需求的特点。

    当然,除了上面介绍的,还有很多其他类似产品,例如,网易有数、EasyV等等。

    2、大屏数据可视化自研

    如果选择自研,跟开发一个互联网产品一样,要经过需求调研、原型设计、UI、开发及测试等过程,只是大屏数据可视化这个产品更加复杂,不仅涉及软件,还涉及硬件。

    (1)需求调研

    梳理业务,明确需求,根据业务场景抽取关键指标,并确定指标分析维度。

    d070fb5ed96f10d6f4a14a09205b86db.png

    (2)原型设计

    由产品经理根据需求设计原型。

    cfadf59c31879e15e56561bbe20a9949.png

    图片来源:帆软社区

    (3)UI设计

    设计大屏一样要谨记要以展示数据为核心,任何炫酷屌炸天的表现都要建立在不影响数据的有效展示上!

    大屏几乎都是拼接的,拼接的每块小屏一般都是16:9的高度,设计尺寸可以把上下高度设定为1080px,例如一个快3*5的大屏,设计尺寸如下图所示。

    ff9ad4ab86c113a0222df05d6800446f.png

    (4)交互设计

    大屏又可分为两种,一种是纯展示型的,另一种是展示+交互型,对于纯展示型,几乎不用考虑交互,将后台数据展示出来即可,对于展示+交互型,还需要考虑交互方式,比如鼠标的移动、触摸屏的手势等。

    有时候,为了使大屏效果更加酷炫,还需要考虑动效设计,例如3D地球可视化。

    b913ac720511c7b20cce6e8875913895.gif

    (5)前后端开发

    可能涉及的前端技术有:HTML5、JS、CSS、WebGL、unity等,还可能用到一些图表可视化库,例如Ecahrts、Highcharts等。

    b4d7bf5c6913171391eec60b799173c3.png

    (6)测试并上线运行

    将真实页面投放到大屏进行测试与优化,这里主要有以下两部分工作。

    视觉方面的测试:关键视觉元素、字体字号、页面动效、图形图表等是否按预期显示、有无变形、错位等情况。

    性能与数据方面的测试:图表动画是否流畅、数据加载、刷新有无异常;页面长时间展示是否存在崩溃、卡死等情况;后台控制系统能否正常切换前端页面显示等。

    3c2290f48746b779dcb19adf7b623d76.png

    3、大屏数据可视化硬件

    大屏数据可视化还涉及硬件,数据可视化最终落地平台一般有:大屏、拼接屏、LED大屏、DLP大屏(无缝隙拼接市场占有率较高)、LCD、PDP(3mm拼接缝隙)等,采购时需要清楚了解大屏显卡所支持的分辨率,显卡是否支持自定义分辨率以及HDMI 线支持的分辨率,后期需要根据大屏分辨率确定设计稿的尺寸。

    4、总结

    有实力的大公司可以选择自研,比如阿里、腾讯、网易等,除了应用于自己公司外,还能够对外提供服务,中小型公司可以选择市面上成熟的产品,按需购买或者付费定制,也是一个不错的选择,一年的费用从几百到几千,上万不等。

    参考资料:

    1.http://www.woshipm.com/it/2510202.html

    2.https://www.uisdc.com/large-screen-data-visualization-design

    Excel数据分析全套视频教程已上线,涵盖6大模块:Excel函数、Excel常用技巧、数据透视表、Excel图表、基础统计分析和Excel VBA,目前限时优惠中!

    展开全文
  • 大屏数据可视化demo

    2019-03-22 16:00:32
    大屏数据可视化案例;大数据可视化案例;供大家学习使用。
  • 大屏数据可视化;数据多屏显示;多屏数据可视化;大屏数据可视化案例;
  • 本资源包含4款精美的大屏数据可视化模板源码,在实际大屏可视化项目中,可快速使用这些模板,提高开发效率。
  • 本资源包含8个高质量的大屏数据可视化案例源码,既有实际项目案例,也有旭日图、树图、热力图、地图、3D图表、地理信息数据可视化等专题案例。
  • 以下内容转载自:《可能是最详细的大屏数据可视化设计指南》,作者:程远目录1.基础概念 1.1. 什么是数据可视化1.2.什么是大屏数据可视化2.大屏数据可视化设计原则3. 大屏可视化设计流程 3.1 根据业务场景抽取关键...

    以下内容转载自:《可能是最详细的大屏数据可视化设计指南,作者:程远

    705303260d12d0e4006505bc827990f9.png

    目录1. 基础概念  1.1. 什么是数据可视化  1.2. 什么是大屏数据可视化2. 大屏数据可视化设计原则3. 大屏可视化设计流程  3.1 根据业务场景抽取关键指标  3.2 确立指标分析维度  3.3 选定可视化图表类型4. 了解物理大屏,确定设计稿尺寸5. 页面布局、划分6. 页面定稿、开发7. 注意事项  7.1 字体使用  7.2 配色搭配  7.3 页面布局
    73ea5446add7127837accab018a31327.png1. 基础概念

    1.1. 什么是数据可视化

    把相对复杂、抽象的数据通过可视的方式以人们更易理解的形式展示出来的一系列手段叫做数据可视化,数据可视化是为了更形象地表达数据内在的信息和规律,促进数据信息的传播和应用。数据可视化的本质是数据空间到图形空间的映射,是抽象数据的具象表达。

    069a7d431d8164ec3779ff2e57c1d8d0.png

    1.2. 什么是大屏数据可视化

    大屏数据可视化是以大屏为主要展示载体的数据可视化设计。「大面积、炫酷动效、丰富色彩」,大屏易在观感上给人留下震撼印象,便于营造某些独特氛围、打造仪式感。电商双11时大屏利用此特点打造了热烈、狂欢的节日氛围,原本看不见的数据可视化后,便能调动人的情绪、引发人的共鸣,传递企业文化和价值。

    5a958a1b26cf637fed611fba9b8295af.gif

    利用面积大、可展示信息多的特点,通过关键信息大屏共享的方式可方便团队讨论和决策,故大屏也常用来做数据分析监测使用。大屏数据可视化目前主要有信息展示、数据分析及监控预警三大类。

    2. 大屏数据可视化设计原则
    • 大屏设计要避免为了展示而展示,排版布局、图表选用等应服务于业务,所以大屏设计是在充分了解业务需求的基础上进行的。

    • 大屏因为大,承载数据多,为了避免观者迷失,大屏信息呈现要有焦点、有主次。可以通过对比,先把核心数据抛给用户,待用户理解大屏主要内容与展示逻辑后,再逐级浏览二三级内容。部分细节数据可暂时隐藏,用户需要时可通过鼠标点击等交互方式唤起。

    3. 大屏可视化设计流程

    d50df8b5228bd910f23da36c5b6db12a.png

    3.1 根据业务场景抽取关键指标

    关键指标是一些概括性词语,是对一组或者一系列数据的统称。一般情况下,一个指标在大屏上独占一块区域,所以通过关键指标定义,我们就知道大屏上大概会显示哪些内容以及大屏会被分为几块。确定关键指标后,根据业务需求拟定各个指标展示的优先级(主、次、辅)。

    b4fd25b4a7d3c97ef1bedfa8e34c68eb.png

    3.2 确立指标分析维度

    「横看成岭侧成峰」。同一个指标的数据,从不同维度分析就有不同结果。很多小伙伴做完可视化设计,发现可视化图形并没有准确表达自己的意图,也没能向观者传达出应有的信息,可视化图形让人困惑或看不懂。出现这种情况很大程度就是因为分析的维度没有找准或定义的比较混乱。

    59cff21122a0fc1974103011811b2d0b.png

    3.3 选定可视化图表类型

    当确定好分析维度后,事实上我们所能选用的图表类型也就基本确定了。接下来我们只需要从少数几个图表里筛选出最能体现我们设计意图的那个就好了。选定图表注意事项:易理解、可实现。

    5eb23aac99c85741894ec51068a7cee8.png

    c14974dcb40fa4b53543f8c2aab2cfaf.png

    4. 了解物理大屏,确定设计稿尺寸

    350c0a149d760f62eb0270719b63e3e1.png

    5. 页面布局、划分

    尺寸确立后,接下来要对设计稿进行布局和页面的划分。这里的划分,主要根据我们之前定好的业务指标进行,核心业务指标安排在中间位置、占较大面积;其余的指标按优先级依次在核心指标周围展开。一般把有关联的指标让其相邻或靠近,把图表类型相近的指标放一起,这样能减少观者认知上的负担并提高信息传递的效率。

    e16c53d7cde270724277842a98f9e489.png

    6. 页面定稿、开发

    d9746776c09d9f01dd8c8456ae22a7bd.png

    7. 注意事项

    7.1 字体使用

    字体优先使用系统默认字体,需要嵌入字体时考虑字体的可识别性、与当前设计风格是否融合、是否可免费商用。

    cb6e0c12b5099d61cd5cf3b0d8b627e6.png

    7.2 配色搭配

    色彩明度与饱和度差异显著、对比鲜明, 尽量避免使用邻近色配色。

    f6e52e4d3ae34bcc8131a40a6c09fa0a.png

    7.3 页面布局

    主次分明、条理清晰、注意留白,合理利用大屏上各个小的显示单元,并尽量避免关键数据被拼缝分割。

    abdec9f2b386b4d1a08cb8f4b3dc879b.png

    参考:

    可能是最详细的大屏数据可视化设计指南:

    https://www.uisdc.com/large-screen-data-visualization-design

    02a13a3842bbdbb3b88e7a1646d8a354.png


    91e9a831f1cada1d1440c803d36733c2.png

    展开全文
  • 大屏数据可视化示例

    千次阅读 2019-05-09 16:59:40
    数据可视化是数据空间到图形空间的映射,是抽象数据的具象表达。 数据可视化交互的基本原则:总览为先,缩放过滤按需查看细节。...大屏数据可视化应用的难点并不在于图表类型的多样化,而在于如...
  • PageNow作为国内技术团队自主研发的大屏数据可视化开发平台,于2020年3月份正式上线以来,历经六个多月的更新迭代,现已收获大多数国内企业的青睐并将其作为大屏数据可视化项目开发的首选产品。大屏数据可视化类项目...
  • 今天小编为大家总结了大屏数据可视化的设计规律,有兴趣的朋友都应该了解一下,以便后期遇到问题的时候不知道怎么运用。正文如下:一、基础概念数据可视化主要旨在借助于图形化手段,清晰有效地传达与沟通信息。但是...
  • 大都选择应用大屏数据可视化作为宣传的途径,什么是大屏数据可视化大屏数据可视化设计需要具备的条件又是什么,下面我将展开说明。 大屏数据可视化 大屏数据可视化是以大屏为主要展示载体的数据可视...
  • 作品介绍:物流可视化平台/大屏看板/图表统计/运单跟踪/物流数据统计/物流看板/运单量统计/axure原型/大屏数据可视化/动效可视化数据大屏看板 axure原型演示地址:...
  • 在今日,如果你还认为大屏数据可视化只能做到简单的在大屏上呈现数据分析,那就消息太滞后了。大屏数据可视化不仅能做到将数据分析呈现在大屏上,还可实现动态、静态、实时展现;在终端支持上也不局限于大屏,如手机...
  • 大屏数据可视化是以大屏为主要展示载体的数据可视化设计。大屏的特点,使得在用户观感上留下独特的印象,同时,大屏所具备储存更大的信息量,对于大屏企业来说重点主要在于将信息全面的显示在屏幕上,关注于画质的...
  • 大都选择应用大屏数据可视化作为宣传的途径,什么是大屏数据可视化大屏数据可视化设计需要具备的条件又是什么,下面我将展开说明。 大屏数据可视化是以大屏为主要展示载体的数据可视化设计。大屏的特点,使得在...
  • 大屏数据可视化设计指南

    万次阅读 2019-01-03 14:25:31
    把相对复杂、抽象的数据通过可视的方式以人们更易理解的形式展示出来的一系列手段叫做数据可视化数据可视化是为了更形象地表达数据内在的信息和规律,促进数据信息的传播和应用。 在当前新技术支持下,数据可视化...
  • 大屏数据可视化设计流程

    千次阅读 2019-01-07 16:37:01
    下面分析一下大屏数据可视化的流程: 前期需求调研; 大屏特点分析: A. 屏幕面积较大,字号字体的选择应以用户看清楚为原则。 B. 交互操作不便,结合平板触控设备利于操作。 C. 分析屏幕硬件:常见的分为有...
  • 甚至可以毫不犹豫地说,大屏数据可视化分析软件大大提高了企业数据分析能力、业务能力、管理能力。 在业务部门中,通过大屏数据可视化及时发现商机、跟进项目;在生产环节,密切监控着每一道数据,及时发现问题并...
  • 大屏数据可视化的第一个步骤和第二个步骤我们给大家介绍过了。不过关于大屏数据可视化中的内容还不止这些。今天在这篇文章中我们会继续为大家介绍大屏数据可视化的相关知识,希望这篇文章能够帮助大家理解数据可视化...
  • 产品名称:70套BI数据大屏可视化Axure RP原型设计软件软件版本: Axure 8,Axure 9(兼容)作品类型: BI数据大屏可视化Axure原型文件类型: .rp (可通过 Axure生成html)文件大小:49.6MB使用场景: PC,大屏适用人群...
  • 大屏数据可视化开发方案

    千次阅读 2020-08-15 14:56:28
    大屏可视化项目解决方案 ...2、阿里DataV数据可视化 3、腾信云图 4、基于Vue的可视化组件库(DataV) 大屏可视化项目示例: 1、零售行业数据可视化 2、汽车销售大数据 3、百度科技园3D大屏 ...
  • 炫酷动效、丰富色彩、视觉冲击,大屏在观感上直接给...大家熟悉的天猫双11类大屏就是利用此特点,打造了热烈、狂欢的节日氛围,原本在后台的数据经过可视化之后,便能调动人的情绪、引发人的共鸣,传递企业文化和价值。
  • 大屏数据可视化解决方案(上)主推 可能是目前大屏数据可视化标准解决方案最详尽的一篇文章了,可以当做定制设计指南使用的一篇经验分享。 发布时间:2019-01-17 21:12 转载于:...
  • 大屏数据可视化在现在是一个十分流行的内容,在很多的电商中都有广泛的应用。正是由于这个原因,很多人在学习数据可视化的时候也顺带着把大屏数据可视化也学习了。可见做好大屏数据可视化是很多人的目标,在这篇文章...

空空如也

1 2 3 4 5 ... 20
收藏数 1,898
精华内容 759
关键字:

大屏数据可视化