大屏数据可视化_7套大屏数据可视化源码 8套大屏设计图片 - CSDN
精华内容
参与话题
  • 大屏数据可视化案例

    万次阅读 多人点赞 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

    展开全文
  • 10款可视化大屏特效,酷炫又内涵!

    万次阅读 2018-12-11 15:13:15
    关于可视化数据大屏,之前已经讲了好多好多了,从大屏设计规范到大屏制作技巧、学习视频等等,我们做了很多的经验分享。 但还远远不够,用户始终在提出更高的要求,其中最重要的一点便是“更酷炫”。 但这里涉及到...

    关于可视化数据大屏,之前已经讲了好多好多了,从大屏设计规范到大屏制作技巧、学习视频等等,我们做了很多的经验分享。

    但还远远不够,用户始终在提出更高的要求,其中最重要的一点便是“更酷炫”。

    但这里涉及到两方面难题:

    一是诸如“好看”、“酷炫”这样的形容词,本身是很难定义清楚其范畴的,毕竟萝卜青菜各有所爱。

    二是酷炫的度如何把握,在耍酷与数据价值之间如何平衡。

    我们所见过许多眼花缭乱的效果,用华丽的视效堆叠起来博人眼球,然而经不起业务价值的推敲。从产品理念出发,我们不希望把用户带向一个歧途,始终希望“让数据成为生产力,”“数据之美”应该绽放在“数据价值体现”的基础上;在此基础上,我们也希望能提供更适用于各种普世场景下的产品,能够尽可能满足更多用户的大屏需求。

    那么,到底该如何恰当的提供能包容多数人需要,同时又符合数据价值的“更酷炫”效果呢?

    我们做了大量的用户调研,得出几个有意思的结论:

    1、关注数据大屏的用户年龄段非常均衡,在20-40岁以每5个年龄作为一个区间,不同区间的占比高度接近。意味着数据大屏的设计应当具有很高的包容性,风格不可偏向性过重。

    2、关于“科技酷炫”和“简约直观”的偏好调查中,用户重合度接近60%,也就是说大多数用户在两类风格间徘徊。

    3、关于“科技炫酷”,绝大多数用户的选择特征是“蓝绿色系、动态效果、灵活多变”,可以理解为对色系和动态效果的要求是大屏的核心需求之一。

    基于此,我们在FineReport 10.0中设计了新的大屏可视化效果,总计10个大屏3D特效、15种动态加载效果,在技能满足酷炫的同事又能醒目的体现数据价值。

    新的可视化大屏图表,默认采用深色背景+荧光配色,符合浸入式的大屏体验;并根据图表类型和数据要求提供 '轮播'或'刷新'两种动画形式,满足用户不同场景下的业务需求。

    同时我们还基于webgl等技术,对动画不断优化调整,为用户尽量提供简洁且酷炫的动态效果。

    如下是部分大屏可视化的效果!

    3D特效组件

    全新设计的轮播gis点地图,根据用户预先录入数据,按序播放各个地理点的相关信息,3D视角和跳转动画如同身临其境。

    (忽略图中错误的地理信息,只看效果)

    10款可视化大屏特效,酷炫又内涵!

     

    10款可视化大屏特效,酷炫又内涵!

     

    10款可视化大屏特效,酷炫又内涵!

     

    10款可视化大屏特效,酷炫又内涵!

     

    新增加的指标卡,提供多种可选效果,如轮播、粒子技术器等,以'酷炫'和'简洁'的方式展示最基础的数据。

    10款可视化大屏特效,酷炫又内涵!

     

    10款可视化大屏特效,酷炫又内涵!

     

    10款可视化大屏特效,酷炫又内涵!

     

    10款可视化大屏特效,酷炫又内涵!

     

    当然,很多效果这里不一一枚举~

    动态加载效果

    可视化的酷炫,除了图表本身,动态效果也很重要。我们对大屏布局中各个组件的动态效果也做了改进,新增了15种动态加载特效,简单来个GIF先睹为快:

    10款可视化大屏特效,酷炫又内涵!

     

    10款可视化大屏特效,酷炫又内涵!

     

    通过组件加载动效,让每个组件模块舞动起来,让整个大屏界面化静为动。更为重要的一点是,组件加载动效可以与我们的监控刷新功能相结合。从原始数据哪里来、过时数据往那里去到新数据怎么进来,兼顾整个闭环的良好体验。

    初始 -> 加载动效->判断数据过时 -> 消失动效 -> 动效完成 -> 获取新数据

    10款可视化大屏特效,酷炫又内涵!

     

    怎么样,是不是很有意思呢?

    不要着急,大家可以自己下载FineReport 10.0体验啦!

    戳这里看看吧

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

    千次阅读 2019-05-09 16:59:40
    数据可视化是数据空间到图形空间的映射,是抽象数据的具象表达。 数据可视化交互的基本原则:总览为先,缩放过滤按需查看细节。...大屏数据可视化应用的难点并不在于图表类型的多样化,而在于如...

    转载来自:https://blog.csdn.net/hwhsong/article/details/80805511

    数据可视化是数据空间到图形空间的映射,是抽象数据的具象表达。

    数据可视化交互的基本原则:总览为先,缩放过滤按需查看细节。

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

            </div>
    					<link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-258a4616f7.css" rel="stylesheet">
                      </div>
    
    展开全文
  • 用H5大屏数据可视化开发

    万次阅读 热门讨论 2018-12-21 13:40:25
    项目中需要做一个数据展示用的看板,初接到任务觉得这个没有什么难度,做个漂亮的网页浏览器全屏就可以了。可是实际做的过程中碰见了问题。 第一:浏览器不能有横向和纵向的滚动条,没有鼠标的滚动操作过程。 第二...

    项目中需要做一个数据展示用的看板,初接到任务觉得这个没有什么难度,做个漂亮的网页浏览器全屏就可以了。可是实际做的过程中碰见了问题。

    第一:浏览器不能有横向和纵向的滚动条,没有鼠标的滚动操作过程。

    第二:有各类尺寸的屏,除了在九宫格拼接屏上完美显示,还要同时满足普通用户的电脑端显示。电脑的客户分辨率可能是1399*768或1920*1080等各类尺寸的分辨率。

    利用传统网页制作从上到小的制作方式已经不能满足需求了。例如:

    下面的对比图:一个是1902*1080 ,一个是1366*768的屏幕,很明显高分辨率的屏显示的内容多些。

    那么如何做到大屏上内容动态调整适合屏幕展示呢?

    响应式媒体查询、rem,js控制尺寸还是其他方法呢?最开始觉得响应式媒体查询就可以满足我的需求,的确是可以精细化控制,可是时间有限,容不得我花费较长时间,而且写多套尺寸的css 我觉得工作量不少,界面元素一多,要照顾的地方也非常多。js控制也尝试过,不适合,要resize调整的项目多。总之,纠结了半天。

    后来买了一个基础版的DataV,做了开发,但DataV的可编程型不高,要多花费银子买企业版!最后问题还是回归到要H5制作大屏的需求上来。DataV的适屏做的很好,何不借鉴下呢,F12查看源码,看到了body 的scale css属性,大概就明白了做法,于是乎开工做。原理就是用一个基础尺寸比如1920*1080来做开发和布局,最后利用客户端浏览器的尺寸,按一定的计算比例做缩放。

    关键的代码片段:

     var ratio = $(window).height() / 1080;
            console.log(ratio);
            $('body').css({
                transform: "scale(" + ratio + ")",
                transformOrigin: "left top",
                backgroundSize: 100 * (window.screen.width / $(window).width() * ratio) + "%" + ' 100%',
                backgroundPosition: ($(window).width() - $('body').width() * ratio) / 2 + "px top",
                marginLeft: ($(window).width() - $('body').width() * ratio) / 2
            });

    利用这个原理顺利完成了大屏的开发:效果还不错,暂时没有碰见坑!

    效果如下:把浏览器缩到最小:

    全屏情况下:

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

    2019-03-22 16:00:32
    大屏数据可视化案例;大数据可视化案例;供大家学习使用。
  • 大屏数据可视化

    2020-05-28 09:04:16
    https://blog.csdn.net/feiyangqingyun/article/details/89856852?utm_source=app
  • 大屏数据可视化设计指南

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

    万次阅读 多人点赞 2019-04-30 17:20:52
    在开发大屏数据可视化项目时,除了各类报表的开发外,大屏的风格设计也是一项十分重要且耗时的工作。 本文推荐的几款大屏模板,旨在帮助那些有大屏数据可视化开发需求的同学能够快速上手,把更多的时间、精力放在...
  • 本资源包含8个高质量的大屏数据可视化案例源码,既有实际项目案例,也有旭日图、树图、热力图、地图、3D图表、地理信息数据可视化等专题案例。
  • 前端大屏数据可视化示例

    千次阅读 2019-11-01 13:39:42
    https://blog.csdn.net/hwhsong/article/details/80805511 前端大屏数据展示的各种布局以及阿里云的DataV数据展示。
  • 来源:ECharts数据可视化项目(PS:这个老师讲的不错,风趣生动) Echarts-介绍 常见的数据可视化库: D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难) ECharts.js 百度出品的一个开源 Javascript ...
  • 大屏数据可视化开源库

    千次阅读 2020-06-13 10:37:56
    http://datav.jiaminghi.com/
  • 大屏数据可视化开发方案

    千次阅读 2020-08-15 14:56:28
    大屏可视化项目解决方案 ...2、阿里DataV数据可视化 3、腾信云图 4、基于Vue的可视化组件库(DataV) 大屏可视化项目示例: 1、零售行业数据可视化 2、汽车销售大数据 3、百度科技园3D大屏 ...
  • 轻松实现大屏数据可视化We’ve accumulated a massive amount of data in the Information Age, which is only increasing as the digital universe grows. By 2020, the digital universe will likely grow to 40,...
  • 转载于:https://www.cnblogs.com/telwanggs/p/10975510.html
  • 大屏数据可视化在现在是一个十分流行的内容,在很多的电商中都有广泛的应用。正是由于这个原因,很多人在学习数据可视化的时候也顺带着把大屏数据可视化也学习了。可见做好大屏数据可视化是很多人的目标,在这篇文章...
  • 大屏数据可视化总结

    千次阅读 2018-05-15 17:55:47
    将得到的缩放值赋予文档的body的scale属性,这样就可以在可视区域最大范围内看到页面整体的效果了。当然如果是长宽比过大,则需要以宽获取缩放值。 大屏设计注意点 字体 字体过大或过小都会影响人的视觉,尤其是...
  • 作品介绍:web常用通用组件+Axure后台管理系统框架模板+大屏数据可视化元件库+智慧社区管理系统大屏+图表组件+表单组合+智慧数据看板+通用大屏图表原件库+电脑端常用组件 原型演示及下载地址:...
1 2 3 4 5 ... 20
收藏数 7,099
精华内容 2,839
关键字:

大屏数据可视化