这个项⽬的起源⾮常的偶然,源于今年我有幸⼊选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. ⼤屏监控系统实战(1)-项⽬介绍
2. ⼤屏监控系统实战(2)-后台⼯程搭建
3. ⼤屏监控系统实战(3)-前端⼯程搭建
4. ⼤屏监控系统实战(4)-如何将SpringBoot+Vue前后端分离项⽬⼀次打包为⼀个Jar包运⾏?
5. ⼤屏监控系统实战(5)-⽗⼯程搭建及前端相关配置
6. ⼤屏监控系统实战(6)-爬⾍初探:爬取CSDN博客之星年度总评选投票统计数据
7. ⼤屏监控系统实战(7)-后端整合MybatisPlus并暴露服务
8. ⼤屏监控系统实战(8)-前端请求后端获取数据并显⽰
9. ⼤屏监控系统实战(9)-爬取所有博主实时投票票数并存数据库
10. ⼤屏监控系统实战(10)-⼤屏展⽰前20个博主的排名、票数及名次相对于前⼀⽇的升降情况
11. ⼤屏监控系统实战(11)-⼤屏显⽰⽇增投票数量柱状图的制作
12. ⼤屏监控系统实战(12)-10分钟投票增量曲线制作(⼀)
13. ⼤屏监控系统实战(13)-10分钟投票增量曲线制作(⼆)
14. ⼤屏监控系统实战(14)-24⼩时得票数量统计曲线制作
15. ⼤屏监控系统实战(15)-打包上线及总结