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

10【源码】数据可视化：基于 Echarts +Java SpringBoot 实现的动态实时大屏范例 - 运动健康_dv-decoration-5 dur got string with value

作者：运维做开发 | 2024-08-13 10:37:23

赞

踩

dv-decoration-5 dur got string with value

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

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

传送门

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

10【源码】数据可视化：基于Echarts+JavaSpringBoot实现的动态实时大屏范例-运动健康.zip-Java文档类资源-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.  
  2. <body style="background-color:rgba(10, 2, 39, 0.796)">
  3.     <div class="container_fluid">
  4.         <div class="row_fluid" id="vue_app">
  5.             <div class="col-xs-12 col-md-12" style="padding:0 0;">
  6.                 <h3 style="color:rgba(11, 240, 125, 0.796); text-align: center" id="container_0">
  7.                       <strong></strong>
  8.                 </h3>
  9.                 <dv-decoration-5 style="width=100%;height:4%;">
  10.                 </dv-decoration-5>
  11.             </div>
  12.  
  13.             <div class="col-xs-12 col-md-3" style="padding:0 0;">
  14.  
  15.                 <div style="height:15%; padding:0%;">
  16.                     <dv-border-box-7>
  17.                         <p style='padding:2%; color:rgba(11, 240, 125, 0.796); font-size: 12; font-weight: bolder;'>实时步数
  18.                             <img src="myimg/1.png" style="height: 25%; ">
  19.                         </p>
  20.  
  21.                         <p id="container_1"
  22.                             style='padding:0%; color:rgba(255,255,255,.5); font-size: 28; font-weight: bolder; text-align: center;'>
  23.                             112222</p>
  24.                     </dv-border-box-7>
  25.                 </div>
  26.             </div>
  27.  
  28.             <div class="col-xs-12 col-md-3" style="padding:0 0;">
  29.  
  30.                 <div style="height:15%; padding:1%;">
  31.                     <dv-border-box-7>
  32.                         <p style='padding:2%; color:rgba(11, 240, 125, 0.796); font-size: 12; font-weight: bolder;'>心率
  33.                             <img src="myimg/2.png" style="height: 25%; ">
  34.                         </p>
  35.                         <p id="container_2"
  36.                             style='padding:0%; color:rgba(255,255,255,.5); font-size: 28; font-weight: bolder; text-align: center;'>
  37.                             112222</p>
  38.                     </dv-border-box-7>
  39.                 </div>
  40.             </div>
  41.  
  42.             <div class="col-xs-12 col-md-3" style="padding:0 0;">
  43.  
  44.                 <div style="height:15%; padding:1%;">
  45.                     <dv-border-box-7>
  46.                         <p style='padding:2%; color:rgba(11, 240, 125, 0.796); font-size: 12; font-weight: bolder;'>
  47.                             血氧饱和度
  48.                             <img src="myimg/3.png" style="height: 25%; ">
  49.                         </p>
  50.                         <p id="container_3"
  51.                             style='padding:0%; color:rgba(255,255,255,.5); font-size: 28; font-weight: bolder; text-align: center;'>
  52.                             112222</p>
  53.  
  54.                     </dv-border-box-7>
  55.                 </div>
  56.             </div>
  57.  
  58.             <div class="col-xs-12 col-md-3" style="padding:0 0;">
  59.  
  60.                 <div style="height:15%; padding:1%;">
  61.                     <dv-border-box-7>
  62.                         <p style='padding:2%; color:rgba(11, 240, 125, 0.796); font-size: 12; font-weight: bolder;'>压力
  63.                             <img src="myimg/4.png" style="height: 25%; ">
  64.                         </p>
  65.                         <p id="container_4"
  66.                             style='padding:0%; color:rgba(255,255,255,.5); font-size: 28; font-weight: bolder; text-align: center;'>
  67.                             112222</p>
  68.                     </dv-border-box-7>
  69.                 </div>
  70.             </div>
  71.  
  72.             <div class="col-xs-12 col-md-5" style="padding:0 0;">
  73.                 <div style="height:75%;" id="container_5"></div>
  74.             </div>
  75.  
  76.             <div class="col-xs-12 col-md-4" style="padding:0 0.3%;height:25%;">
  77.                 <dv-border-box-6>
  78.                     <div style="padding:3%; height:100%" id="container_6">
  79.                     </div>
  80.                 </dv-border-box-6>
  81.             </div>
  82.  
  83.             <div class="col-xs-12 col-md-3" style="padding:0 0.3%;height:25%;">
  84.                 <dv-border-box-6>
  85.                     <div style="padding:3%; height:100%" id="container_7">
  86.                     </div>
  87.                 </dv-border-box-6>
  88.             </div>
  89.  
  90.             <div class="col-xs-12 col-md-4" style="padding:0 0.3%;height:25%;">
  91.                 <dv-border-box-6>
  92.                     <div style="padding:3%; height:100%" id="container_8">
  93.                     </div>
  94.                 </dv-border-box-6>
  95.             </div>
  96.  
  97.             <div class="col-xs-12 col-md-3" style="padding:0 0.3%;height:25%;">
  98.                 <dv-border-box-6>
  99.                     <div style="padding:3%; height:100%" id="container_9">
  100.  
  101.                     </div>
  102.                 </dv-border-box-6>
  103.             </div>
  104.  
  105.             <div class="col-xs-12 col-md-4" style="padding:0 0.3%;height:25%;">
  106.                 <dv-border-box-6>
  107.                     <div style="padding:3%; height:100%" id="container_10">
  108.  
  109.                     </div>
  110.                 </dv-border-box-6>
  111.             </div>
  112.  
  113.             <div class="col-xs-12 col-md-3" style="padding:0 0.3%;height:25%;">
  114.                 <dv-border-box-6>
  115.                     <div style="padding:3%; height:100%" id="container_11">
  116.  
  117.                     </div>
  118.                 </dv-border-box-6>
  119.             </div>
  120.  
  121.         </div>
  122.     </div>
  123. </body>

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

  1.  var idContainer_5 = "container_5";
  2. var chartDom = document.getElementById(idContainer_5);
  3. var myChart = echarts.init(chartDom, gTheme);
  4.  
  5. option = {
  6.   title: {
  7.     text: "运动卡路里等级",
  8.     left: "left",
  9.     textStyle: {
  10.       color: "rgba(11, 240, 125, 0.796)",
  11.       fontSize: "12",
  12.     },
  13.   },
  14.   series: {
  15.     type: "sunburst",
  16.     data: [],
  17.     radius: [3, "90%"],
  18.     itemStyle: {
  19.       borderRadius: 15,
  20.       borderWidth: 1,
  21.       borderColor: "rgba(255,255,255,.1)",
  22.     },
  23.  
  24.     label: {
  25.       textStyle:{
  26.         color: "rgba(0,0,0,.8)",
  27.       }
  28.     },
  29.   },
  30. };
  31.  
  32. // 使用刚指定的配置项和数据显示图表。
  33. myChart.setOption(option);
  34. window.addEventListener("resize", function () {
  35.   myChart.resize();
  36. });
  37.  
  38. function asyncData_5() {
  39.   $.getJSON("json/sunburst.json").done(function (data) {
  40.     var myChart = echarts.init(document.getElementById(idContainer_5));
  41.     myChart.setOption({
  42.       series: [{ data: data }],
  43.     });
  44.   }); //end $.getJSON
  45. }
  46.  
  47. asyncData_5();

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

 [{"name": "有氧", "children": [{"name": "球类", "children": [{"name": "羽毛球", "value": 32}, {"name": "乒乓球", "value": 39}, {"name": "篮球", "value": 40}, {"name": "足球", "value": 48}, {"name": "网球", "value": 42}, {"name": "排球", "value": 46}, {"name": "冰球", "value": 24}, {"name": "棒球", "value": 33}, {"name": "橄榄球", "value": 12}, {"name": "板球", "value": 34}]}, {"name": "田径类", "children": [{"name": "马拉松", "value": 43}, {"name": "竞走", "value": 12}, {"name": "快跑", "value": 31}]}]}, {"name": "无氧", "children": [{"name": "竞技类", "children": [{"name": "赛跑", "value": 14}, {"name": "跳远", "value": 47}]}, {"name": "其他", "children": [{"name": "深蹲", "value": 29}, {"name": "举重", "value": 46}, {"name": "平板支撑", "value": 23}, {"name": "拔河", "value": 11}, {"name": "投掷", "value": 35}]}]}]

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

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

五、更多案例 


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

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

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

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

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

  

闽ICP备14008679号