这个项目的起源非常的偶然，源于今年我有幸入选2019年CSDN博客之星年度总评选，并且排名一直还不错，在前20的行列中，而排名第一的天元浪子大大，用python分析了一波投票情况，我本人对自己也非常感兴趣，但因为我不会用python，而且python画出来的统计图不是动态图，于是我就想用Java做后端，前端用图表组件做个靓靓的大屏监控出来。大概花了两天时间，初见成效。现在简单介绍如下：

一、整体功能介绍

监控大屏是现在比较火的一个模式，因为他的视频冲击力很强，做出来的大屏科技感十足，所以也越来越受欢迎，像笔者所在的公司，就有设备状态监控、每日数据备份、项目实施情况、各地系统运行状况等十多个大屏。每天首长们在监控大厅就可以实时看到各部门的运行情况，为他们后续的运营决策提供数据支撑。基于这种项目的特殊性，主要有页面多样化，数据维度复杂化，每个数字化大屏就是一个单独的系统，后台的数据支持也完全不同，所以制作成本还是比较高的。

目前阿里提供的DataV数据可视化产品，能让更多的人看到数据可视化的魅力，帮助非专业的工程师通过图形化的界面轻松搭建专业水准的可视化应用。DataV提供丰富的可视化模板，满足您会议展览、业务监控、风险预警、地理信息分析等多种业务的展示需求。阿里的DataV产品提前制作了大量的模板，只要给他数据源，就能快速生成一张纸漂亮的大屏监控。唯一的缺点就是该产品收费，最便宜的版本，大概一个月要450块钱左右。对于我这种动手党来说，知道这个事情就好。剩余的还只能是自己来做。

二、大屏监控应用场景

基本上把阿里的产品介绍拿过来就可以了。当然我也做了一些补充。

天猫双11、阿里云城市大脑同款数据大屏、企业数据监控、业务汇报必备

满足数据分析、业务监控、实时指挥、媒体展示等各类场景和人群需求的可视化大屏工具，开箱即用，效果惊艳。
三维渲染

将三维渲染能力引入地理场景，适用于智慧城市、智慧交通、安全监控、商业智能等场景。
专业级地理信息可视化

支持绘制地理轨迹、地理飞线、热力分布、地域区块、3D地球等效果，支持地理数据多层叠加，展现更专业的大屏。基于GIS技术，实现重点单位、消防力量、辖区范围、消防水源、周边道路、微站、联动力量、储备物资等图层信息在地图上统一管理，将重点单位分布、预案状态、单位三维场景和推演内容进行可视化展示，同时支持警情定位，路径导航。支撑应急救援的一张图指挥、一张图调度、一张图分析、一张图决策。
沙盘推演部署

实现沙盘推演流程标准化。用户可根据标准步骤绘制逃生路线、救援路线、标注救援提示信息，实现三维沙盘的自主部署
预案智能推演

基于物联网实时数据和告警联动，自动生成处置步骤，力量调度方案，推荐消防车辆停车点和侦察、进攻、疏散等导航路线，计算消火栓供水能力为灭火救援提供有效作战参数。

三、本系统功能模块

本次参与活动的博主是201位，我每隔五分钟会爬取投票网站的投票数，并存到数据库，然后再基于这些数据进行分析。

1.投票概况

动态爬取投票网站数据，实时展示参与人数、累计投票和访问次数三个指标。

2.TOP20日增投票数量柱状图

基于爬取到数据库的每个博主的投票数，统计前一日投票数据增量，渲染为柱状图排行榜。

3.TOP10的10分钟投票增量曲线

目前取的是距现在200分钟，每隔十分钟的投票增量情况，本来想取近三天的，但数据量大，导致浏览器会渲染失败，所以只取了20个数据来展示。

4.TOP10的24小时得票数据统计曲线

因为现在总票数的基数比较大，所以我取了最近24小时，每小时一个值渲染了前十名博主的得票情况。

5.TOP20实时数据展示

实时展示前20名博主的最新时间、目前票数、排名以及跟前一日相比的排名变化情况。

四、项目技术栈

整体：

Git版本控制、Shell脚本

项目后端：

Java、SpringBoot、MybatisPlus、爬虫Jsoup、HttpClient、Maven项目构建

项目前端：

Vue、dataV可视化组件、axios异步话组件、webpack打包工具

五、教程最终目的

代码目前已经开源，我计划手把手教大家去把每一个功能都实现一次。也会把自己在完成项目过程中遇到的坑点都跟大家分享出来，让大家都能做成属于自己的数据可视化大屏应用来。

六、总结

目前专栏已基本完结，定价9.9元，前两章免费，大家在阅读完后觉得质量还可以就请支持一下我把。整个专栏目录如下：

大屏监控系统实战（1）-项目介绍
大屏监控系统实战（2）-后台工程搭建
大屏监控系统实战（3）-前端工程搭建
大屏监控系统实战（4）-如何将SpringBoot+Vue前后端分离项目一次打包为一个Jar包运行？
大屏监控系统实战（5）-父工程搭建及前端相关配置
大屏监控系统实战（6）-爬虫初探：爬取CSDN博客之星年度总评选投票统计数据
大屏监控系统实战（7）-后端整合MybatisPlus并暴露服务
大屏监控系统实战（8）-前端请求后端获取数据并显示
大屏监控系统实战（9）-爬取所有博主实时投票票数并存数据库
大屏监控系统实战（10）-大屏展示前20个博主的排名、票数及名次相对于前一日的升降情况
大屏监控系统实战（11）-大屏显示日增投票数量柱状图的制作
大屏监控系统实战（12）-10分钟投票增量曲线制作（一）
大屏监控系统实战（13）-10分钟投票增量曲线制作（二）
大屏监控系统实战（14）-24小时得票数量统计曲线制作
大屏监控系统实战（15）-打包上线及总结

大屏监控系统实战（1）-项目介绍相关推荐

大屏监控系统实战（13）-10分钟投票增量曲线制作（二）
因为内容太多,所以我们分成了两部分,接前文大屏监控系统实战(11)-10分钟投票增量曲线制作(一) 八.投票网站最近72小时10分钟投票走势和增量数据爬取在SchedulingTest中添加方法如 ...
大屏监控系统实战（16）-项目拾遗
一.概述项目已经算是完结了,但还有一些待优化的地方,我新开一帖,准备慢慢补充一下. 二.问题列表及解决方案 1.页面样式页面显示的问题,可调整的地方比较多,随着数据的变化,目前页面上已经有几处显示 ...
大屏监控系统实战（15）-打包上线及总结
专栏写到这,代码部分已经完成了,其实是个小小的项目,代码量也不大,但实现了我们想要的目标,那么我们还需要将这个大屏的项目部署到服务器上,我们要做就把完整的流程都做一遍. 一.打包方式的技术选型项目是 ...
大屏监控系统实战（14）-24小时得票数量统计曲线制作
一.概述这一章节我们来制作<24小时得票数量统计曲线>,这个跟10分钟投票的增量类似,不过他显示的是每个博主的总得票数,时间范围我设置为24小时,取每个小时博主的总得票数,通过这个监控, ...
大屏监控系统实战（6）-爬虫初探：爬取CSDN博客之星年度总评选投票统计数据
一.介绍我们先来做个简单的,我们的目标是爬取CSDN博客之星年度总评选的首页信息. 首页的地址:http://m234140.nofollow.ax.mvote.cn/wxvote/43ced329 ...
大屏监控系统实战（10）-大屏展示前20个博主的排名、票数及名次相对于前一日的升降情况
一.概述上一节我们已经把数据爬取到了数据库中并保存了起来,这章就要把数据在大屏上展示出来,先在大屏上展示前20个博主的排名.票数及名次相对于前一日的升降情况.最终实现的效果如下: 这个效果相当完美了 ...
大屏监控系统实战（9）-爬取所有博主实时投票票数并存数据库
一.概述这一节的目标,因为投票网只显示博主的实时投票数,所以我们计划每隔五分钟去爬取投票网站,获取该时段的博主实时票数,并将该时段所有博主的票数持久化到数据库,为后续的大屏展示提供数据支撑. 投票网 ...
大屏监控系统实战（4）-如何将SpringBoot+Vue前后端分离项目一次打包为一个Jar包运行？
玩过最新版Dubbo管控台的都知道,人家是个前后端分离的项目,可是一条打包命令能让两个项目整合在一起,生成一个jar包,这样的好处显而易见,部署的时候服务器不需要安装node环境单独部署前端项目,或者 ...
大屏监控系统实战（12）-10分钟投票增量曲线制作（一）
一.概述这一节我们的任务是10分钟投票增量曲线,这个指标非常重要,能监控到每个人投票的实时票数增长情况.做公众号的都知道一个网站:20次幂,它是一个公众号阅读监控.数据分析平台,他提供到分钟级监控, ...

大屏监控系统实战（1）-项目介绍

一、整体功能介绍

二、大屏监控应用场景

天猫双11、阿里云城市大脑同款数据大屏、企业数据监控、业务汇报必备

三维渲染

专业级地理信息可视化

沙盘推演部署

预案智能推演