数据可视化大屏的出现,掀起一番又一番的浪潮,众多企业主纷纷想要打造属于自己的“酷炫吊炸天”的霸道总裁大屏驾驶舱。
一、效果图展示
1、动态实时更新数据效果图
![63b6ee9430db2a31554444ef4db8cfd1.gif](https://i-blog.csdnimg.cn/blog_migrate/4ffa53d794fac9b15ab6f066a8c95d79.gif)
2、鼠标右键切换主题
![81ce58aa33a2c473e957c4dcf1293131.png](https://i-blog.csdnimg.cn/blog_migrate/4e6e71d51754a8b21f61f9849ed4f739.png)
![aabc9880515b4078a47efcd407fb5ebc.png](https://i-blog.csdnimg.cn/blog_migrate/8063e8928f53f3259f7f5b09b7014426.png)
![97c1af3dda1141c724f3589225424a74.png](https://i-blog.csdnimg.cn/blog_migrate/2003345c146bc76edb2df64ad5e32768.png)
![aa0b9e65b0a3eab658087349cd282547.png](https://i-blog.csdnimg.cn/blog_migrate/ee43c1ce7c1cda2084462969e9ef32f6.png)
二、 确定需求方案
1、确定产品上线部署的屏幕LED分辨率
本案例基于16:9 屏宽比,F11全屏显示。
2、部署方式
基于免安装可执行程序:支持Windows、Linux、Mac等各种操作系统;将程序复制到服务器上即可,无需其它环境依赖;
观看方式:既可在服务器上直接观看程序界面,也可在远程用浏览器打开播放,例如Chrome浏览器、360浏览器等。
三、整体架构设计
前端基于Echarts开源库设计,使用WebStorm编辑器;
后端基于Java Web实现,使用 IDEA 编辑器;
数据传输格式:JSON;
数据源类型:目前采用JSON文件方式,自行添加Mybatis可支持PostgreSQL、MySQL、Oracle、Microsoft SQL Server、SQLite,自行添加POI可支持Excel表格等,还可以定制HTTP API接口方式。
数据更新方式:采用http get 轮询方式 。在实际应用中,也可以视情况选择j监测后端数据实时更新,实时推送到前端的方式;
插播一条广告:需要开通正版 JetBrains 全家桶的可以联系我,56元一年,正版授权,官网可查有效期,有需要的加我微信:poxiaozhiai6,备注:924。
四、开发配置&代码结构说明
1、Java开发环境配置
![5796851cdb799871d07153987160c5cf.png](https://i-blog.csdnimg.cn/blog_migrate/44db974287dcaee4e32265a576719bed.png)
![1d66adf3901b03879daf2b9984ef10d3.png](https://i-blog.csdnimg.cn/blog_migrate/e5c9e8f0a8bd8362313a906badf6ebfd.png)
![66f382a222cb6848784480c01b706698.png](https://i-blog.csdnimg.cn/blog_migrate/0b79b2d3e88bb40cce85db5d5283aa9d.png)
然后GENERATE,下载包即可。
2、json库配置
使用alibaba的json库,pom.xml文件增加配置:
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.51</version>
</dependency>
3、代码结构说明
a、静态路径
![59f27d382b24759b6689d547ba1362f0.png](https://i-blog.csdnimg.cn/blog_migrate/d3cbdfcf4a429bd2d7feb18e259b631f.png)
b、Java 目录
![ad9fd6c1f125299db94b52e3227e2a43.png](https://i-blog.csdnimg.cn/blog_migrate/1700b97437a84d56fda095893f4a0814.png)
c、端口配置
![3357d3c68cff5efb5f50f6377682c0fa.png](https://i-blog.csdnimg.cn/blog_migrate/634d4bdbbf30547c3e8ae91d463dd49f.png)
4、启动命令
![f2953269431e7d8b56c9035ec42d0c1a.png](https://i-blog.csdnimg.cn/blog_migrate/51ce7a7194957af9c02c0e6e3f5d674b.png)
5、浏览器查看
浏览器中输入网址查看大屏(端口为 application.properties 中的 server.port 值) http://localhost:80xx
五、源码获取方法
![d451b9404e4f05c3294e3133c2e40480.png](https://i-blog.csdnimg.cn/blog_migrate/3f1c1271d62d2f9efddd29cefa79ed90.png)
项目源码,怎么领取?
源码获取
扫码下方二维码,回复【大屏】即可获取所有系统
或直接点击下方公众号直接添加