devbox
正经夜光杯
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

6【源码】数据可视化：基于 Echarts +Java SpringBoot 实现的动态实时大屏范例 - 互联网大数据_java大屏大数据展示

作者：正经夜光杯 | 2024-08-13 10:37:45

赞

踩

java大屏大数据展示

数据可视化大屏的出现，掀起一番又一番的浪潮，众多企业主纷纷想要打造属于自己的“酷炫吊炸天”的霸道总裁大屏驾驶舱。

之前有小伙伴们建议我出一些视频课程来学习Echarts，这样可以更快上手，所以我就追星赶月的录制了《Echarts - 0基础入门课程》，希望对有需要的小伙伴有帮助。

传送门

YYDatav的数据可视化大屏《精彩案例汇总》（Java SpringBoot&Echarts源码）_YYDataV的博客-CSDN博客

6【源码】数据可视化：基于Echarts+JavaSpringBoot实现的动态实时大屏范例-互联网大数据统计-企业管理文档类资源-CSDN下载

效果图展示

​

一、 确定需求方案

1、确定产品上线部署的屏幕LED分辨率

本案例基于16:9 屏宽比，F11全屏显示。

2、部署方式 

基于免安装可执行程序：支持Windows、Linux、Mac等各种操作系统；将程序复制到服务器上即可，无需其它环境依赖；

观看方式：既可在服务器上直接观看程序界面，也可在远程用浏览器打开播放，例如Chrome浏览器、360浏览器等。

二、整体架构设计

  1. 前端基于Echarts开源库设计，使用WebStorm编辑器；
  2. 后端基于Java Web实现，使用 IDEA 编辑器；
  3. 数据传输格式：JSON；
  4. 数据源类型：目前采用JSON文件方式，自行添加Mybatis可支持PostgreSQL、MySQL、Oracle、Microsoft SQL Server、SQLite，自行添加POI可支持Excel表格等，还可以定制HTTP API接口方式。
  5. 数据更新方式：采用http get 轮询方式 。在实际应用中，也可以视情况选择监测后端数据实时更新，实时推送到前端的方式；

三、编码实现 （关键代码）

1、前端html代码 - 页面布局layout&样式style

  1.  <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title>互联网大数据统计展示大屏</title>
  6. 		<!-- 新 Bootstrap 核心 CSS 文件 -->
  7. 		<link href="css/bootstrap.min.css" rel="stylesheet">
  8. 		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  9. 		<script src="js/jquery.min.js"></script>
  10. 		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  11. 		<script src="js/bootstrap.min.js"></script>
  12. 		<link href="css/index.css" rel="stylesheet" />
  13. 	</head>
  14. 	<body>
  15. 		<header>互联网大数据统计展示大屏</header>
  16. 		<div class="container m-20">
  17. 			<div class="row">
  18. 				<div class="col-lg-3">
  19. 					<div class="box1">
  20. 						<div class="title">近7天日活增长数</div>
  21. 						<div class="box1_con" id="box1"></div>
  22. 					</div>
  23. 					<div class="box2 m-20">
  24. 						<div class="title">年度环比日活</div>
  25. 						<div class="box2_con" id="box2"></div>
  26. 					</div>
  27. 				</div>
  28. 				<div class="col-lg-6">
  29. 					<div class="box3">
  30. 						<div class="title">在线活跃设备</div>
  31. 						<div class="box3_con">
  32. 							<div class="box3_con_left" id="box3_left"></div>
  33. 							<div class="box3_con_right">
  34. 								<div class="box3_con_right_top">
  35. 									<div class="row">
  36. 										<div class="col-lg-4 data_bg"><p id="total">12569台</p><small>设备总数</small></div>
  37. 										<div class="col-lg-4 data_bg"><p id="total_online" > 12375台</p><small>运行设备</small></div>
  38. 										<div class="col-lg-4 data_bg"><p id="total_repair">178台</p><small>月修设备</small></div>
  39. 									</div>
  40. 								</div>
  41. 								<div class="box3_con_right_bot" id="box3_right"></div>
  42. 							</div>
  43. 						</div>
  44. 					</div>
  45. 					<div class="box4 m-20">
  46. 						<div class="title">国内外设备分布占比</div>
  47. 						<div class="box4_con" id="box4"></div>
  48. 					</div>
  49. 				</div>
  50. 				<div class="col-lg-3 box5">
  51. 					<div class="title">设备增长率</div>
  52. 					<div class="box5_con">
  53. 						<div class="box5_con_top" id="box5"></div>
  54. 						<div class="title m-20">最新消息</div>
  55. 						<div class="box5_con_bot">
  56. 							<ul>
  57. 								<li>1、列表类信息标题测试列表类信息标题测试列表类信息标题测试</li>
  58. 								<li>2、列表类信息标题测试列表类信息标题测试列表闻标题测试</li>
  59. 								<li>3、列表类信息标题测试列表类信息标题测试信息标题测试</li>
  60. 								<li>4、列表类信息标题测试标题测试列表类信息标题测试</li>
  61. 								<li>5、列表类信息标题测试列表类信息标题测列表类信息标题测试</li>
  62. 								<li>6、列表类信息标题测试列表类信息标题测试列表测试</li>
  63. 								<li>7、列表类信息标题测试列表类信息标题测试列表类信息标题测试</li>
  64. 								<li>8、列表类信息标题测试列表类信息标题测试列表类标题测试</li>
  65. 							</ul>
  66. 						</div>
  67. 					</div>
  68. 				</div>
  69. 			</div>
  70. 		</div>
  71. 		<script type="text/javascript" src="js/echarts.min.js"></script>
  72. 		<script type="text/javascript" src="js/box1.js"></script>
  73. 		<script type="text/javascript" src="js/box2.js"></script>
  74. 		<script type="text/javascript" src="js/box3_left.js"></script>
  75. 		<script type="text/javascript" src="js/box3_right.js"></script>
  76. 		<script type="text/javascript" src="js/box4.js"></script>
  77. 		<script type="text/javascript" src="js/box5.js"></script>
  78. 		<script type="text/javascript" >
  79. 			function async_data(){
  80. 				async_chart_box1();
  81. 				async_chart_box2();
  82. 				async_chart_box3_left();
  83. 				async_chart_box3_right();
  84. 				async_chart_common();
  85. 				async_chart_box4();
  86. 				async_chart_box5();
  87. 			}
  88. 			async_data();
  89. 		</script>
  90. 	</body>
  91. </html>

2、前端JS代码 - 各个echarts图表

  1.  var dom = document.getElementById("box1");
  2. var myChart = echarts.init(dom);
  3. var app = {};
  4. option = null;
  5. var labelRight = {
  6.     normal: {
  7.         position: 'right'
  8.     }
  9. };
  10. option = {
  11.     tooltip : {
  12.         trigger: 'axis',
  13.         axisPointer : {            // 坐标轴指示器，坐标轴触发有效
  14.             type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
  15.         }
  16.     },
  17.     grid: {
  18.     	left:10,
  19.         top: 20,
  20.         bottom: 30
  21.     },
  22.     xAxis: {
  23.         type : 'value',
  24.         position: 'top',
  25.         splitLine: {lineStyle:{type:'dashed'}},
  26.     },
  27.     textStyle:{//图例文字的样式
  28.                 color:'#fff',
  29.                 fontSize:12
  30.             },
  31.     yAxis: {
  32.         type : 'category',
  33.         axisLine: {show: false},
  34.         axisLabel: {show: false},
  35.         axisTick: {show: false},
  36.         splitLine: {show: false},
  37.         data : ['seven', 'six', 'five', 'four', 'three', 'two', 'one']
  38.     },
  39.     series : [
  40.         {
  41.             name:'增长率',
  42.             type:'bar',
  43.             stack: '总量',
  44.             label: {
  45.                 normal: {
  46.                     show: true,
  47.                     formatter: '{b}'
  48.                 }
  49.             },
  50.             data:[
  51.                 {value: -0.07, label: labelRight},
  52.                 {value: -0.23, label: labelRight},
  53.                 0.08,
  54.                 {value: -0.17, label: labelRight},
  55.                 0.47,
  56.                 {value: -0.36, label: labelRight},
  57.                 0.18
  58.             ]
  59.         }
  60.     ]
  61. };
  62.  
  63.  
  64. if (option && typeof option === "object") {
  65.     myChart.setOption(option, true);
  66. }
  67. console.log(JSON.stringify(option.yAxis.data));
  68. console.log(JSON.stringify(option.series[0].data));
  69.  
  70.  
  71. function async_chart_box1() {
  72.     var box1Id = "box1"
  73.     var box1JsonFileName = "json/" + box1Id + ".json"
  74.  
  75.     // 异步加载数据
  76.     $.getJSON(box1JsonFileName).done(function (data) {
  77.         var element = document.getElementById(box1Id);
  78.         var myChart = echarts.init(element);
  79.         console.log(data)
  80.         myChart.setOption({
  81.             series: [{
  82.                 data: data
  83.             }]
  84.         });
  85.     });//end $.getJSON
  86. }
  87.

3、后端Java代码

  1. @RestController
  2. @RequestMapping("/json")
  3. public class Process {
  4.  
  5.     @RequestMapping("/{filename}")
  6.     public String json(@PathVariable("filename") String filename) throws Exception {
  7.         System.out.println(filename);
  8.         ChangeJSON(filename);
  9.  
  10.         String jsonStr = readJSON(filename);
  11.         System.out.println(jsonStr);
  12.         return jsonStr;
  13.     }

4、数据通信 JSON

 [{"data": [{"value": [13, -5, 5, 30, -43], "name": "中国"}, {"value": [86, -90, -91, 83, -7], "name": "美洲"}]}, {"data": [{"value": [-98, 100, 96, -31, 3], "name": "欧洲"}, {"value": [81, -49, 15, 63, -79], "name": "东南亚"}]}]

四、开发配置&代码结构说明

​数据可视化：基于 Echarts +Java SpringBoot 实现的动态实时大屏【Java开发环境搭建】

五、更多案例 


YYDatav的数据可视化大屏《精彩案例汇总》（Python&Echarts源码）_YYDataV的博客-CSDN博客

《工厂订单出入库信息管理系统》完整案例详解（含演示网址账号）（Go&Vue源码）_YYDataV的博客-CSDN博客

本次分享结束，欢迎讨论！QQ微信同号： 6550523

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号