日期:2022-05-11  浏览次数:2315 次

大屏数据可视化是以大屏为主要展示载体的数据可视化设计。

“大面积、炫酷动效、丰富色 彩”,大屏易在观感上给人留下震撼印象,便于营造某些独特氛围、打造仪式感。

原本看不见的数据可视化后,便能调动人的情绪、引发人的共鸣。

大屏数据可视化目前主要有信息展示、数据分析及监控预警三大类。

今天小F就给大家分享30款开源的可视化大屏(含源码),可以多多学习。

da872e13f5a90f166a9189f9c5b3e72a.png

下载到本地后,直接运行文件夹中的index.html,即可看到大屏。

01 数据可视化页面设计

9a6e41024afcdd86dd4c20eabfe73ffd.gif

有动画效果,显得高大上!

主要图表:柱状图、水球图、折线图等。

02 数据可视化演示系统

0e03163755e7f9dcfc78e6cc9e2479ba.gif

不仅有动画效果,还有科技感光效。

主要图表:柱状图、折线图、饼图、地图等。

03 服务大数据可视化监管平台

ca71a2474f97f7860be57a4b0571fd44.gif

由多个不同的图表组合而成,且图表带有动画效果。

主要图表:树形面积图、柱状图、环形图、雷达图等。

04 智能看板

529f2df614d62b9a410105258699b259.gif

左侧有个滑动的信息流列表,中间有个飞线图。

动态效果,让整体看起来更加引人注目。
 

主要图表:地图、曲线图,饼图、柱状图等。

05 翼兴消防监控

4053bd0d52ca7f45355a8bad9308cc33.gif

消防数据监控,有两个可旋转的3D柱状图。

主要图表:柱状图、气泡图、仪表盘图、折线图等。

06 南方软件视频平台大屏中心

7de0309ce9507a39f3b995191b0dc6db.png

中间的柱状图添加了渐变颜色,显得很有立体感!

主要图表:柱状图、散点图等。

07 数据可视化大屏展示系统

57fc92fbd233ad3bd212155f8f66bfd4.png

左侧的光效设计的不错,使得画面饱满,立体感强。

突出主要视觉,吸引目光。

08 全国图书零售监测数据

8634553c100f00c3fe3b72170575876d.png

主要图表:地图、环形图、柱状图、折线图等。

09 晋城高速综合管控大数据

71710625c141f608bf1a2901d6c0514a.png

一个出行服务的交通大数据平台(智慧交通)。

主要图表:柱状图、折线图、曲线面积图、地图、雷达图、环形图等。

10 无线网络大数据平台

8b4b3e488bfebb18974678f4fdf25be6.png

较如今的设计,算是比较老旧的。

主要图表:柱状图、环形图、折线图、地图等。

11 Echart图例使用

d89d9312022623e63d6a657eaffa2028.png

Echarts是一个使用JavaScript实现的开源可视化库,涵盖各行业图表,满足各种需求。

主要图表:雷达图、地图、饼图、柱状图等。

12 发稿数据可视化大屏

7d8e0baa2c4602f4c828c82bc4299414.png

主要图表:柱状图、折线图、饼图等。

13 大数据可视化平台

a8f06eef350a160c3f7d3a5931c90329.png

挺常见的一个大屏模版。

主要图表:环形图、气泡图等。

14 设备大数据

64d85710fb00f48cae538c5898d9feca.png

这个大屏就简单一些,信息不是很多。

主要图表:饼图、柱状图、折线图等。

15 游戏数据大屏

847f2418fe3bc9efbf633dfc0fe3a046.png

一个游戏运营数据看板。

主要图表:柱状图、曲线图等。

16 厅店营业效能分析

929873c21bb3eb4ddc42aab6200107d1.png

手机营业厅日常数据展示。

主要图表:曲线图、柱状图等。

17 车辆综合管控平台

95a0d91bb7dbd539818f76e9995e2352.png

车辆数据分析平台,中间也是动画效果,没录GIF动图。

主要图表:柱状图、环形图、折线图等。

18 保税区A仓数据

b293d448ab3f8060a731f5ab9734e600.png

一个较为简约的大屏。

主要图表:曲线面积图、环形图、柱状图(可滑动)等。

19 政务大数据共享交换平台

216b54279fe4497f7316764eca8e6c8c.png

主要图表:饼图、曲线图、柱状图等。

20 兰州智慧消防大数据平台

d57b9bf64bd5de402cd26366d375e879.png

主要图表:折线面积图、柱状图等。

21 大数据可视化系统数据分析通用模版

e8ba12488bed43b1d1b261d7439e8b0f.png

一个大屏通用模版。

主要图表:条形图、柱状图、曲线图、环形图等。

22 大数据展示模版

f9f6df808379c5c21610bdc9d9f74ad8.png

同样是一个可视化大屏模版。

主要图表:地图、柱状图、条形图、曲线面积图、雷达图。

23 大数据可视化系统数据分析通用模版

6654713191f4ad01e9db6895fbc21bb9.png

主要图表:条形图、曲线面积图、雷达图等。

24 智慧社区

193747fa432f81799be2b063318ec621.png

dcc9fef9a20b79246f12b3d01f44ba80.png

一个智慧小区的可视化大屏。

主要图表:柱状图、曲线面积图、饼图等。

25 运营商服务器监控

0680bc68b0b2b1963aba2d54af00fd61.png

一个服务器监控大屏,了解服务器的运行情况。

主要图表:条形图、仪表盘图、雷达图、水球图等。

26 酒机运行状态

36764f82d9ee18d7d2ad933a2f75f65e.png

主要图表:仪表盘图、饼图、柱状图等。

27 医疗督导平台

137f22b8fc1896a98008db79d0ace711.png

这个在疫情期间,应该是非常有用的。

主要图表:环形图、柱状图等。

28 物流云数据看板平台

7dbffe258dd4e353285fac5c8927aca6.png

eb2c0383a6a5225526ecf88bc6c2aabf.png

物流信息看板,点击左上角「物流汇总看板」按钮,可以看到汇总信息。

主要图表:柱状图、环形图、面积图等。

29 大数据可视化平台(Vue.js)

0f0a70b852c2b38a358f46a6236e7515.gif

上面的大部分大屏都是基于jquery,echarts编写的,最后提供两个Vue.js编写的可视化大屏。

需要安装npm环境,最后运行如下代码,即可显示。


 
  1. npm install

  2. npm run serve

主要图表:饼图、条形图、雷达图、折线图等。

30 风机可视化大屏

06ac8cc0803734f67dd407b95ad4b77c.gif

一个3D风机可视化大屏,可以看到风机内部组件的运行情况。

主要图表:条形图、折线图等。

小伙伴们,快快用实践一下吧!如果在学习过程中,有遇到任何问题,欢迎加我好友,我拉你进Python学习交流群共同探讨学习。