每日开源 | 几个酷炫的可视化大屏项目

哈喽，大家好！

大数据时代，离不开可视化，无论大到农业，交通，旅游，电商，还是小到企业用户数据，网站埋点数据，超市库存数据，从离线分析到实时计算分析（大数据框架不断的在演变），这其中可视化展示时刻扮演这重要的角色。

数据可视化可以让数据更直观的展现在我们面前，可以让企业管理者准确地做出对企业或者业务发展更有利的决策，说以，数据是会说话的。

本篇文章，整理了 5 个可视化开源项目，其中包括可视化制作低代码平台、大屏可视化、地图可视化、热图、图标可视化等等。

1数据大屏可视化

通过拖拽快速生成自己的可视化作品的低代码平台，前端使用Vue.js技术栈，后端部分采用Node.js Koa MongoDB。

这个平台能够通过 Excel 导入数据，可视化画布。在画布能够添加图表、图片、文字、边框等组件，支持拖拽和缩放。

2数据大屏可视化

大屏可视化便利性工具，结构简单。安装这个项目后，只需要配置好数据就能实现可视化。

3百度地图可视化

这是一款基于百度地图的大数据可视化库，专注于大数据方向的散点图、热力图、网格、聚合等方式展示，致力于让大数据可视化变得简单易用。欢迎关注我们，公号终码一生。

这个可视库支持GeoJSON，可以自定义主题。支持多线程，具有高性能、API 友好等优点。

4大屏可视化案例

本示例项目则这个项目使用 ECharts 自行开发的大屏可视化案例，目标是让用户能在简单的一页之内让用户读懂数据之间的层次与关联

作为一个接触可视化大屏项目4年多的老技术，做了过大大小小十几个大屏项目，给大家科普一下实际工作中，一个可视化大屏项目的上线流程，顺带给大家扫一扫对大屏认知的误区

可视化大屏项目实施流程

一般整个大屏开发流程可划分为六个部分，之前的文章里我介绍过，这边再讲一下：

1、需求调研：最耗费时间，最重要的一步。大屏需求调研是大屏项目的重中之重，搞清楚业务需求，做出来的大屏才有应用的价值，这个过程需要和业务方沟通确认，耗时很长，不少大屏项目前期需求没沟通清楚就动手开发，后面改到哭爹喊娘。

除了业务需求调研之外，如果要在硬件上展示的大屏，还需要对大屏硬件进行需求调研，比如大屏显示设备采购、分辨率输出等等

2、原型设计：大屏展示什么指标，指标如何布局，一般需要列一个指标清单，和业务方明确。然后图表的样式，可视化交互功能，如钻取、联动、轮播等，根据排版好的内容落地成盒原型图demo。

3、蓝图方案：然后根据原型图进行视觉美化，需要结合屏幕尺寸、分辨率、大屏的风格来设计。对于大屏而言，蓝图方案除了业务、数据、技术、实施方案外，更重要的是对大屏的指标、功能点、预期效果进行整理输出。

4、效果落地：根据蓝图在前端绘制demo

5、数据处理：数据处理大致分为三步，底层数据处理，前端数据展现，数据校对。根据数据量和实时性需

数据量小（计算简单），准实时，不需要结果表

数据量大（计算复杂），准实时，需要结果表。

数据量小（计算简单），实时，不需要结果表。

数据量大（计算复杂），实时，需要技术方案（如kafka flink）

6、大屏调试：理论上显卡分辨率和PC端调试分辨率一致的情况下且字体自适应，不需要过多调试，在条件允许的情况下，建议在效果图落地甚至原型图设计阶段就进行大屏预调试。

这样一套流程下来，一个大屏项目周期在10-20人天不等，如果需求复杂，很有可能一个项目耗费1-2个月，这之后还有相当大的维护工作要做，所以单纯从技术角度去做一张大屏很容易，但是要完成一个实用的大屏项目并不简单，望大家慎重考虑后动手。

可视化大屏技术上如何实现？

通常做大屏前端方案设计有三类选择，①是自行开发，利用开源的自定义可视化图表；②是利用BI/报表厂商的工具来制作；③是找集成商定制，可以软硬件一体化承包。

自行开发。比如基于vue、Echart 框架构建大屏展示模板，网上有很多开源源码。

其自带一些动效，比如数据动态刷新渲染、屏幕适应、内部图表自由替换、Mixins注入等功能，这个是前端。后端需要另写一套框架请求数据，一般java。

后端开发比较麻烦，如果数据需求复杂的话，比如需要多源数据连接，不断的数据抽取和更新，定制开发难度会上升，代码复杂了多了还有BUG，制作周期比较长，维护成本比较高。

我遇到的很多项目前期都是做了源码开发的尝试，最后因为不稳定，没人维护等原因走了商业开发。

大屏定制厂商：这种定制不是那种简单的图表展示。通常都是特殊需求，如3D建模，所以往往需要专业做可视化的厂商来按需定制。技术上基于三维的引擎如ventuz或者unity来定制大屏效果。商业定制效果通常来说都是最优的，但实施成本和后期维护成本也是极其高昂的，实施几百万不等。

BI/报表做大屏幕。现在很多大屏项目都是用BI/报表工具来开发，比如FineReport

虽然其本身是报表工具，但其实市面上能很好解决前端展示和后端数据读取连接的平台。再者本身提供构建可视化的“画布”（在FineReport里叫设计器），拖拽操作，对大屏的和移动设备也提供了一套高效可用的设计模式，构建可视化的成本比较低，上手也比较容易，光这一点就能节约一周的人天。

可视化方面，为大屏效果专门提供可复用模板和组件，能满足绝大部分大屏的需求，涉及到特殊3D模型，也可和专业厂商做集成，提供建模实施方案。

另外，项目管理往往需要考虑成本，人力成本和后续的维护成本。FineReport具备前端展示和后端数据读取的技术条件，平台化的产品，后续维护成本很低。

大家对可视化大屏有哪些认知误区？

误区一：效果图是效果图，实际不一定能做出来

我们经常能在网上看到很多视觉效果非常惊艳的效果图，拿来做参考，但是大部分的效果图都不能百分百复现，因为我们实际实施时需要适配屏幕分辨率，比如字体能否自适应大小。一些动态展示如3D旋转以及图表空间和数据刷新的速率也无法看见，基本上实际图做出来会和效果图差那么一两成。

误区二：大屏不仅仅是前端技术

很多人把大屏理解为单纯的前端展现技术，想的太简单了，数据从哪里来，是读业务数据库还是建立中间库，数据更新的频率要求是什么，数据质量有无问题还要先做底层数据处理？

硬件方面，需要明确大屏的尺寸、种类、驱动大屏的主机？业务方面，大屏展示什么指标和维度，业务分析逻辑谁来支撑？这些都是要考虑的。

误区三：大屏成本低，零代码实现？NO！

据我所知，一个大屏项目十几万是常有的事，上千万的大屏项目我也见过。

大屏的成本除去前端设计和定制还有硬件费用，一个大屏硬件都是十几万、几十万起步。另外有一些智慧城市、制造行业有3D建模需求的，需要定制建模渲染，那成本就是无底洞了，有待商榷。

大屏的前端技术实现有很多种方案，有低代码的绘制，也有全代码的定制，取决于技术和需求，技术和业务需求总是相互取舍的，后面会详细讲这块。

上市公司全景概览

地图可视化

3D图表展示

热力图展示

ECharts扩展示例

旭日图

地理信息数据

5GitHub 大数据可视化平台

用 Vue 构建的 GitHub 大数据可视化平台，通过它你可以更直观的看到你在 GitHub 里的一些数据，数据来源调用 GitHub 开发的 API。

好了，今天先给大家推荐这些个人感觉不错的可视化项目，如果觉得日后能用上，可以先收藏了，方便后面查看。

—END—