devbox
运维做开发
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

2【源码】数据可视化：基于 Echarts + Java SpringBoot 实现的动态实时大屏范例-物流大数据_物流大数据可视化大屏 java

作者：运维做开发 | 2024-08-13 10:32:41

赞

踩

物流大数据可视化大屏 java

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

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

传送门

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

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

效果展示

一、 确定需求方案

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

1920px*1080px，15: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代码

  1.  
  2. <div class="loading">
  3.     <div class="loadbox"><img src="picture/loading.gif"> 页面加载中...</div>
  4. </div>
  5. <div class="head">
  6.     <h1>案例 - 物流大数据服务平台</h1>
  7.     <div class="weather"><!--<img src="picture/weather.png"><span>多云转小雨</span>--><span id="showTime"></span></div>
  8.     <script>
  9.  
  10.         var t = null;
  11.         t = setTimeout(time, 1000);//开始运行
  12.         function time() {
  13.             clearTimeout(t);//清除定时器
  14.             dt = new Date();
  15.             var y = dt.getFullYear();
  16.             var mt = dt.getMonth() + 1;
  17.             var day = dt.getDate();
  18.             var h = dt.getHours();//获取时
  19.             var m = dt.getMinutes();//获取分
  20.             var s = dt.getSeconds();//获取秒
  21.             document.getElementById("showTime").innerHTML = y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
  22.             //async_data();
  23.             t = setTimeout(time, 1000); //设定定时器，循环运行
  24.         }
  25.  
  26.     </script>
  27. </div>
  28. <div class="mainbox">
  29.     <ul class="clearfix">
  30.         <li>
  31.             <div class="boxall" style="height: 3.1rem">
  32.                 <div class="main_title"><img alt="" src="img/t_1.png">湖南货物收入</div>
  33.                 <div class="allnav" id="echart_1"></div>
  34.                 <div class="boxfoot"></div>
  35.             </div>
  36.             <div class="boxall" style="height: 3.15rem">
  37.                 <div class="main_title">湖南省地图<img alt="" src="img/t_2.png"></div>
  38.                 <div class="allnav" id="echart_2"></div>
  39.                 <div class="boxfoot"></div>
  40.             </div>
  41.             <div class="boxall" style="height: 3.1rem" >
  42.  
  43.                 <div class="main_title">
  44.                     <img alt="" src="img/t_7.png">
  45.                     湖南省交通
  46.                 </div>
  47.                 <div class="main_table t_btn8">
  48.                     <table id="table_1">
  49.                         <thead>
  50.                         <tr>
  51.                             <th>运营数(辆)</th>
  52.                             <th>线路总长度(公里)</th>
  53.                             <th>客运总量(万人次)</th>
  54.                             <th>日期</th>
  55.                         </tr>
  56.                         </thead>
  57.                         <tbody>
  58.                         <tr>
  59.                             <td>21059</td>
  60.                             <td>26497</td>
  61.                             <td>184448</td>
  62.                             <td>2018年</td>
  63.                         </tr>
  64.                         <tr>
  65.                             <td>18777</td>
  66.                             <td>21140</td>
  67.                             <td>188808</td>
  68.                             <td>2017年</td>
  69.                         </tr>
  70.                         <tr>
  71.                             <td>15757</td>
  72.                             <td>20225</td>
  73.                             <td>201143</td>
  74.                             <td>2016年</td>
  75.                         </tr>
  76.                         <tr>
  77.                             <td>17458</td>
  78.                             <td>19567</td>
  79.                             <td>202446</td>
  80.                             <td>2015年</td>
  81.                         </tr>
  82.                         <tr>
  83.                             <td>11323</td>
  84.                             <td>14562</td>
  85.                             <td>279854</td>
  86.                             <td>2014年</td>
  87.                         </tr>
  88.                         </tbody>
  89.                     </table>
  90.                 </div>
  91.                 <div class="boxfoot"></div>
  92.             </div>
  93.         </li>
  94.         <li>
  95.             <div  class="boxall"  style="height: 6.5rem">
  96.                 <div class="main_title">全国地图<img alt="" src="img/t_map.png"></div>
  97.                 <div class="map4" id="echart_map" ></div>
  98.                 <div class="boxfoot"></div>
  99.             </div>
  100.             <div class="boxall"  style="height: 3.1rem" >
  101.  
  102.                 <div class="main_title" >
  103.                     <img alt="" src="img/t_7.png">
  104.                     湖南省业务量
  105.                 </div>
  106.                 <div class="main_table t_btn8">
  107.                     <table id="table_2">
  108.                         <thead>
  109.                         <tr>
  110.                             <th>运营数(辆)</th>
  111.                             <th>线路总长度(公里)</th>
  112.                             <th>客运总量(万人次)</th>
  113.                             <th>日期</th>
  114.                         </tr>
  115.                         </thead>
  116.                         <tbody>
  117.                         <tr>
  118.                             <td>21059</td>
  119.                             <td>26497</td>
  120.                             <td>184448</td>
  121.                             <td>2018年</td>
  122.                         </tr>
  123.                         <tr>
  124.                             <td>18777</td>
  125.                             <td>21140</td>
  126.                             <td>188808</td>
  127.                             <td>2017年</td>
  128.                         </tr>
  129.                         <tr>
  130.                             <td>15757</td>
  131.                             <td>20225</td>
  132.                             <td>201143</td>
  133.                             <td>2016年</td>
  134.                         </tr>
  135.                         <tr>
  136.                             <td>17458</td>
  137.                             <td>19567</td>
  138.                             <td>202446</td>
  139.                             <td>2015年</td>
  140.                         </tr>
  141.                         <tr>
  142.                             <td>11323</td>
  143.                             <td>14562</td>
  144.                             <td>279854</td>
  145.                             <td>2014年</td>
  146.                         </tr>
  147.                         </tbody>
  148.                     </table>
  149.                 </div>
  150.                 <div class="boxfoot"></div>
  151.             </div>
  152.         </li>
  153.         <li>
  154.             <div class="boxall" style="height:3.1rem">
  155.                 <div class="main_title"><img alt="" src="img/t_4.png">货物周转量</div>
  156.                 <div class="allnav" id="echart_3"></div>
  157.                 <div class="boxfoot"></div>
  158.             </div>
  159.             <div class="boxall" style="height: 3.15rem">
  160.                 <div class="main_title"> <img alt="" src="img/t_5.png">湖南高速公路</div>
  161.                 <div class="allnav" id="echart_4"></div>
  162.                 <div class="boxfoot"></div>
  163.             </div>
  164.             <div class="boxall" style="height: 3.1rem">
  165.                 <div class="main_title"><img alt="" src="img/t_6.png">湖南省飞机场</div>
  166.                 <div class="allnav" id="echart_5"></div>
  167.                 <div class="boxfoot"></div>
  168.             </div>
  169.         </li>
  170.     </ul>
  171. </div>
  172. <div class="back"></div>
  173.  
  174.

2、前端JS代码

  1.     //echart_1湖南货物收入
  2.     function echart_1() {
  3.         
  4.         // 基于准备好的dom，初始化echarts实例
  5.         var myChart = echarts.init(document.getElementById('echart_1'));
  6.         option = {
  7.             //鼠标缩放和平移
  8.             roam: true,
  9.             tooltip: {
  10.                 trigger: 'item',
  11.                 formatter: "{a} <br/>{b} : {c}万元"
  12.             },
  13.             legend: {
  14.                 x: 'center',
  15.                 y: '15%',
  16.                 data: ['张家口', '承德', '衡水', '邢台', '邯郸', '保定', '秦皇岛', '石家庄', '唐山'],
  17.                 icon: 'circle',
  18.                 textStyle: {
  19.                     color: '#fff',
  20.                 }
  21.             },
  22.             calculable: true,
  23.             series: [{
  24.                 name: '',
  25.                 type: 'pie',
  26.                 //起始角度，支持范围[0, 360]
  27.                 startAngle: 0,
  28.                 //饼图的半径，数组的第一项是内半径，第二项是外半径
  29.                 radius: [41, 100.75],
  30.                 //支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度
  31.                 center: ['50%', '40%'],
  32.                 //是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：
  33.                 // 'radius' 面积展现数据的百分比，半径展现数据的大小。
  34.                 //  'area' 所有扇区面积相同，仅通过半径展现数据大小
  35.                 roseType: 'area',
  36.                 //是否启用防止标签重叠策略，默认开启，圆环图这个例子中需要强制所有标签放在中心位置，可以将该值设为 false。
  37.                 avoidLabelOverlap: false,
  38.                 label: {
  39.                     normal: {
  40.                         show: true,
  41.                         formatter: '{c}万元'
  42.                     },
  43.                     emphasis: {
  44.                         show: true
  45.                     }
  46.                 },
  47.                 labelLine: {
  48.                     normal: {
  49.                         show: true,
  50.                         length2: 1,
  51.                     },
  52.                     emphasis: {
  53.                         show: true
  54.                     }
  55.                 },
  56.                 data: chart_1_data
  57.             }]
  58.         };
  59.         // 使用刚指定的配置项和数据显示图表。
  60.         myChart.setOption(option);
  61.         window.addEventListener("resize", function () {
  62.             myChart.resize();
  63.         });
  64.     }
  65.

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

  1. [
  2.     {
  3.         "value": 285,
  4.         "name": "张家口",
  5.         "itemStyle": {
  6.             "normal": {
  7.                 "color": "#f845f1"
  8.             }
  9.         }
  10.     },
  11.     {
  12.         "value": 662,
  13.         "name": "承德",
  14.         "itemStyle": {
  15.             "normal": {
  16.                 "color": "#ad46f3"
  17.             }
  18.         }
  19.     },
  20.     {
  21.         "value": 2826,
  22.         "name": "衡水",
  23.         "itemStyle": {
  24.             "normal": {
  25.                 "color": "#5045f6"
  26.             }
  27.         }
  28.     },
  29.     {
  30.         "value": 599,
  31.         "name": "邢台",
  32.         "itemStyle": {
  33.             "normal": {
  34.                 "color": "#4777f5"
  35.             }
  36.         }
  37.     },
  38.     {
  39.         "value": 2502,
  40.         "name": "邯郸",
  41.         "itemStyle": {
  42.             "normal": {
  43.                 "color": "#44aff0"
  44.             }
  45.         }
  46.     },
  47.     {
  48.         "value": 984,
  49.         "name": "保定",
  50.         "itemStyle": {
  51.             "normal": {
  52.                 "color": "#45dbf7"
  53.             }
  54.         }
  55.     },
  56.     {
  57.         "value": 582,
  58.         "name": "秦皇岛",
  59.         "itemStyle": {
  60.             "normal": {
  61.                 "color": "#f6d54a"
  62.             }
  63.         }
  64.     },
  65.     {
  66.         "value": 2324,
  67.         "name": "石家庄",
  68.         "itemStyle": {
  69.             "normal": {
  70.                 "color": "#f69846"
  71.             }
  72.         }
  73.     },
  74.     {
  75.         "value": 2060,
  76.         "name": "唐山",
  77.         "itemStyle": {
  78.             "normal": {
  79.                 "color": "#ff4343"
  80.             }
  81.         }
  82.     },
  83.     {
  84.         "value": 893,
  85.         "name": "",
  86.         "itemStyle": {
  87.             "normal": {
  88.                 "color": "transparent"
  89.             }
  90.         },
  91.         "label": {
  92.             "show": false
  93.         },
  94.         "labelLine": {
  95.             "show": false
  96.         }
  97.     }
  98. ]

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

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

五、更多资源 


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

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

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/运维做开发/article/detail/974389
推荐阅读
相关标签

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

  

闽ICP备14008679号