devbox
菜鸟追梦旅行
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

4【源码】数据可视化：基于 Echarts +Java SpringBoot 实现的动态实时大屏范例-厦门市某医院_如何java搭建大屏展示demo

作者：菜鸟追梦旅行 | 2024-05-20 22:00:34

赞

踩

如何java搭建大屏展示demo

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

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

传送门

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

4【源码】数据可视化：基于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. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>数据可视化demo</title>
  6.     <link href="../styles/common.css" rel="stylesheet">
  7.     <script src="../scripts/Plugin/jquery-3.3.1.min.js"></script>
  8.     <script src="../scripts/Plugin/echarts.min.js"></script>
  9.     <script src="../scripts/Plugin/bmap.min.js"></script>
  10.     <script src="http://api.map.baidu.com/api?v=2.0&ak=AgasQmKK2z6YZjy4w5dFPY93c6uPw7RI"></script>
  11.     <script src="../scripts/common.js"></script>
  12.     <script src="../scripts/index.js"></script>
  13.     <script src="../scripts/Plugin/laydate/laydate.js"></script>
  14. </head>
  15. <body>
  16. <!--顶部-->
  17. <header class="header left">
  18.     <div class="left nav">
  19.         <ul>
  20.             <li class="nav_active"><i class="nav_1"></i><a href="index.html">采集概况</a> </li>
  21.             <li><i class="nav_2"></i><a href="quota.html">指标分析</a> </li>
  22.             <li><i class="nav_3"></i><a href="trend.html">趋势分析</a> </li>
  23.             <li><i class="nav_4"></i><a href="chronic.html">慢病病人列表</a> </li>
  24.             </ul>
  25.     </div>
  26.     <div class="header_center left" style="position:relative">
  27.         
  28.         <h2><strong>厦门市某医院大数据展示案例</strong></h2>
  29.  
  30.     </div>
  31.     <div class="right nav text_right">
  32.         <ul>
  33.  
  34.         </ul>
  35.     </div>
  36.  
  37. </header>
  38. <!--内容部分-->
  39. <div class="con left">
  40.     <!--数据总概-->
  41.     <div class="con_div">
  42.         <div class="con_div_text left">
  43.             <div class="con_div_text01 left">
  44.                 <img src="../images/info_1.png" class="left text01_img"/>
  45.                 <div class="left text01_div">
  46.                     <p>总采集数据量(G)</p>
  47.                     <p id="t0">1235</p>
  48.                 </div>
  49.             </div>
  50.             <div class="con_div_text01 right">
  51.                 <img src="../images/info_2.png" class="left text01_img"/>
  52.                 <div class="left text01_div">
  53.                     <p>当月采集数据量(G)</p>
  54.                     <p id="t1">235</p>
  55.                 </div>
  56.             </div>
  57.         </div>
  58.         <div class="con_div_text left">
  59.             <div class="con_div_text01 left">
  60.                 <img src="../images/info_3.png" class="left text01_img"/>
  61.                 <div class="left text01_div">
  62.                     <p>总门诊数(人)</p>
  63.                     <p id="t2" class="sky">12356</p>
  64.                 </div>
  65.             </div>
  66.             <div class="con_div_text01 right">
  67.                 <img src="../images/info_4.png" class="left text01_img"/>
  68.                 <div class="left text01_div">
  69.                     <p>当月门诊数(人)</p>
  70.                     <p id="t3" class="sky">12356</p>
  71.                 </div>
  72.             </div>
  73.         </div>
  74.         <div class="con_div_text left">
  75.  
  76.             <div class="con_div_text01 left">
  77.                 <img src="../images/info_5.png" class="left text01_img"/>
  78.                 <div class="left text01_div">
  79.                     <p>总住院数(人)</p>
  80.                     <p id="t4"  class="org">12356</p>
  81.                 </div>
  82.             </div>
  83.             <div class="con_div_text01 right">
  84.                 <img src="../images/info_6.png" class="left text01_img"/>
  85.                 <div class="left text01_div">
  86.                     <p>当月住院数(人)</p>
  87.                     <p id="t5" class="org">12356</p>
  88.                 </div>
  89.             </div>
  90.         </div>
  91.     </div>
  92.     <!--统计分析图-->
  93.     <div class="div_any">
  94.         <div class="left div_any01">
  95.             <div class="div_any_child">
  96.                 <div class="div_any_title"><img src="../images/title_1.png">各医院采集数据量</div>
  97.                 <p id="pieChart1" class="p_chart"></p>
  98.             </div>
  99.             <div class="div_any_child">
  100.                 <div class="div_any_title"><img src="../images/title_2.png">各医院门诊住院费用</div>
  101.                 <p id="histogramChart" class="p_chart"></p>
  102.             </div>
  103.         </div>
  104.         <div class="div_any02 left ">
  105.             <div class="div_any_child div_height">
  106.                 <div class="div_any_title any_title_width"><img src="../images/title_0.png">厦门市地图 </div>
  107.                 <div id="mapChart" style="width:97.5%;height:95%;display: inline-block;padding-left: 1.25%;padding-top:2.2%"></div>
  108.             </div>
  109.         </div>
  110.         <div class="right div_any01">
  111.             <div class="div_any_child">
  112.                 <div class="div_any_title"><img src="../images/title_3.png">数据采集条数(当日)</div>
  113.                 <p id="lineChart" class="p_chart"></p>
  114.             </div>
  115.             <div class="div_any_child">
  116.                 <div class="div_any_title"><img src="../images/title_4.png">就诊人数(当日)</div>
  117.                 <p id="lineChart2" class="p_chart"></p>
  118.             </div>
  119.         </div>
  120.     </div>
  121.  
  122.     <div id="el-dialog" class="">
  123.         <div class="xc_layer"></div>
  124.         <div class="popBox" id="printView">
  125.             <div class="ttBox"><span class="tt" id="reportTitle">第一医院</span><img src="../images/close.png" style="width: 30px;float: right;cursor: pointer;" title="关闭弹窗" class="close"/></div>
  126.             <div class="txtBox" id="el-dialog_body">
  127.              <div style="height:100%;width: 98%;margin-left: 1%;">
  128.                <div class="left div_any01" style="width: 64%;">
  129.                    <div class="div_any_child">
  130.                        <div class="div_any_title"><div type="text" class="demo-input" id="date1" style="display: inline-block;cursor: pointer;margin-right: 16px;"></div><img src="../images/title_4.png">门诊住院人次</div>
  131.                        <p id="lineChart3" class="p_chart"></p>
  132.                    </div>
  133.                    <div class="div_any_child">
  134.                        <div class="div_any_title"><div type="text" class="demo-input" id="date2" style="display: inline-block;cursor: pointer;margin-right: 16px;"></div><img src="../images/title_7.png">医疗费用</div>
  135.                        <p id="lineChart4" class="p_chart"></p>
  136.                    </div>
  137.                </div>
  138.                <div class="left div_any01"  style="width: 32%;">
  139.                    <div class="div_any_child">
  140.                        <div class="div_any_title"><div type="text" class="demo-input" id="date3" style="display: inline-block;cursor: pointer;margin-right: 16px;"></div><img src="../images/title_18.png">病人年龄段分布</div>
  141.                        <p id="pieChart2" class="p_chart"></p>
  142.                    </div>
  143.                    <div class="div_any_child">
  144.                        <div class="div_any_title"><div type="text" class="demo-input" id="date4" style="display: inline-block;cursor: pointer;margin-right: 16px;"></div><img src="../images/title_20.png">医疗费用组成</div>
  145.                        <p id="pieChart3" class="p_chart"></p>
  146.                    </div>
  147.                </div>
  148.  
  149.              </div>
  150.             </div>
  151.         </div>
  152.     </div>
  153.  
  154. </div>
  155. <script>
  156.     function async_data() {
  157.         async_map_data();
  158.         // async_chart_1();
  159.         // async_chart_2();
  160.         // async_chart_3();
  161.         // async_chart_4();
  162.         // async_chart_5();
  163.         // async_chart_6();
  164.  
  165.     }
  166.     async_data() ;
  167. </script>
  168. </body>
  169. </html>

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

  1. var symptomName = last_month_day();
  2.  
  3. $(function(){
  4.  
  5.  
  6.   init();
  7.   init2();
  8.     $("#el-dialog").addClass("hide");
  9.   $(".close").click(function(event) {
  10.     $("#el-dialog").addClass("hide");
  11.   });
  12.  
  13.   var date = new Date();
  14.      var numble = date.getDate();
  15.      var today = getFormatMonth(new Date());
  16.      $("#date1").html(today);
  17.      $("#date2").html(today);
  18.      $("#date3").html(today);
  19.      $("#date4").html(today);
  20.  
  21.  
  22.   lay('.demo-input').each(function(){
  23.      laydate.render({
  24.         type: 'month',
  25.          elem: this,
  26.          trigger: 'click',
  27.          theme: '#95d7fb',
  28.          calendar: true,
  29.          showBottom: true,
  30.          done: function () {
  31.             console.log( $("#startDate").val())
  32.  
  33.          }
  34.      })
  35.  });
  36.  
  37. })
  38. function init(){
  39.   //地图
  40.   var mapChart = echarts.init(document.getElementById('mapChart'));
  41.   mapChart.setOption({
  42.       bmap: {
  43.           center: [118.104103,24.477761],
  44.           zoom: 15,
  45.           roam: true,
  46.  
  47.       },
  48.       tooltip : {
  49.           trigger: 'item',
  50.           formatter:function(params, ticket, callback){
  51.               console.log(params)
  52.               return params.value[2] + ":<br>" + params.value[3]
  53.           }
  54.       },
  55.       series: [{
  56.           type: 'scatter',
  57.           coordinateSystem: 'bmap',
  58.           symbolSize: 20,
  59.           data: [
  60.             [118.096435, 24.485408, '厦门市'] ,
  61.             [118.094564, 24.457358, '厦门第一医院'] ,
  62.             [118.104103, 24.477761, '厦门中山医院'],
  63.             [118.14748, 24.506295, '厦门中医院'],
  64.             [118.254841, 24.665349, '厦门第五医院'],
  65.            ]
  66.       }]
  67.   });
  68.   mapChart.on('click', function (params) {
  69.       $("#el-dialog").removeClass('hide');
  70.       $("#reportTitle").html(params.value[2]);
  71.   });
  72.  
  73.   var bmap = mapChart.getModel().getComponent('bmap').getBMap()
  74.   bmap.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP ]}));
  75.   bmap.setMapStyle({style:'midnight'})
  76.  
  77.  
  78.   var pieChart1 = echarts.init(document.getElementById('pieChart1'));
  79.   pieChart1.setOption({
  80.  
  81.     color:["#87cefa","#ff7f50","#32cd32","#da70d6",],
  82.  
  83.     legend: {
  84.         y : '260',
  85.         x : 'center',
  86.         textStyle : {
  87.             color : '#ffffff',
  88.  
  89.         },
  90.          data : ['厦门第一医院','厦门中山医院','厦门中医院','厦门第五医院',],
  91.     },
  92.     tooltip : {
  93.         trigger: 'item',
  94.         formatter: "{a}<br/>{b}<br/>{c}G ({d}%)"
  95.     },
  96.     calculable : false,
  97.     series : [
  98.         {
  99.             name:'采集数据量',
  100.             type:'pie',
  101.             radius : ['40%', '70%'],
  102.             center : ['50%', '45%'],
  103.             itemStyle : {
  104.                 normal : {
  105.                     label : {
  106.                         show : false
  107.                     },
  108.                     labelLine : {
  109.                         show : false
  110.                     }
  111.                 },
  112.                 emphasis : {
  113.                     label : {
  114.                         show : true,
  115.                         position : 'center',
  116.                         textStyle : {
  117.                             fontSize : '20',
  118.                             fontWeight : 'bold'
  119.                         }
  120.                     }
  121.                 }
  122.             },
  123.             data:[
  124.                 {value:335, name:'厦门第一医院'},
  125.                 {value:310, name:'厦门中山医院'},
  126.                 {value:234, name:'厦门中医院'},
  127.                 {value:135, name:'厦门第五医院'}
  128.  
  129.             ]
  130.         }
  131.     ]
  132.     });
  133.  
  134.  
  135.     var lineChart = echarts.init(document.getElementById('lineChart'));
  136.     lineChart.setOption({
  137.  
  138.       color:["#87cefa","#ff7f50","#32cd32","#da70d6",],
  139.       legend: {
  140.           y : '260',
  141.           x : 'center',
  142.           textStyle : {
  143.               color : '#ffffff',
  144.  
  145.           },
  146.            data : ['厦门第一医院','厦门中山医院','厦门中医院','厦门第五医院',],
  147.       },
  148.       calculable : false,
  149.       tooltip : {
  150.           trigger: 'item',
  151.           formatter: "{a}<br/>{b}<br/>{c}条"
  152.       },
  153.       yAxis: [
  154.             {
  155.                 type: 'value',
  156.                 axisLine : {onZero: false},
  157.                 axisLine:{
  158.                     lineStyle:{
  159.                         color: '#034c6a'
  160.                     },
  161.                 },
  162.  
  163.                 axisLabel: {
  164.                     textStyle: {
  165.                         color: '#fff'
  166.                     },
  167.                     formatter: function (value) {
  168.                         return value + "k条"
  169.                     },
  170.                 },
  171.                 splitLine:{
  172.                     lineStyle:{
  173.                         width:0,
  174.                         type:'solid'
  175.                     }
  176.                 }
  177.             }
  178.         ],
  179.         xAxis: [
  180.             {
  181.                 type: 'category',
  182.                 data : ['8:00','10:00','12:00','14:00','16:00','18:00','20:00','22:00'],
  183.                 axisLine:{
  184.                     lineStyle:{
  185.                         color: '#034c6a'
  186.                     },
  187.                 },
  188.                 splitLine: {
  189.                     "show": false
  190.                 },
  191.                 axisLabel: {
  192.                     textStyle: {
  193.                         color: '#fff'
  194.                     },
  195.                     formatter: function (value) {
  196.                         return value + ""
  197.                     },
  198.                 },
  199.                 splitLine:{
  200.                     lineStyle:{
  201.                         width:0,
  202.                         type:'solid'
  203.                     }
  204.                 },
  205.             }
  206.         ],
  207.         grid:{
  208.                 left: '5%',
  209.                 right: '5%',
  210.                 bottom: '20%',
  211.                 containLabel: true
  212.         },
  213.         series : [
  214.           {
  215.               name:'厦门第一医院',
  216.               type:'line',
  217.               smooth:true,
  218.               itemStyle: {
  219.                   normal: {
  220.                       lineStyle: {
  221.                           shadowColor : 'rgba(0,0,0,0.4)'
  222.                       }
  223.                   }
  224.               },
  225.               data:[15, 0, 20, 45, 22.1, 25, 70, 55, 76]
  226.           },
  227.           {
  228.               name:'厦门中山医院',
  229.               type:'line',
  230.               smooth:true,
  231.               itemStyle: {
  232.                   normal: {
  233.                       lineStyle: {
  234.                           shadowColor : 'rgba(0,0,0,0.4)'
  235.                       }
  236.                   }
  237.               },
  238.               data:[25, 10, 30, 55, 32.1, 35, 80, 65, 76]
  239.           },
  240.           {
  241.               name:'厦门中医院',
  242.               type:'line',
  243.               smooth:true,
  244.               itemStyle: {
  245.                   normal: {
  246.                       lineStyle: {
  247.                           shadowColor : 'rgba(0,0,0,0.4)'
  248.                       }
  249.                   }
  250.               },
  251.               data:[35, 20, 40, 65, 42.1, 45, 90, 75, 96]
  252.           },
  253.           {
  254.               name:'厦门第五医院',
  255.               type:'line',
  256.               smooth:true,
  257.               itemStyle: {
  258.                   normal: {
  259.                       lineStyle: {
  260.                           shadowColor : 'rgba(0,0,0,0.4)'
  261.                       }
  262.                   }
  263.               },
  264.               data:[45, 30, 50, 75, 52.1, 55, 100, 85, 106]
  265.           }
  266.       ]
  267.     });
  268.  
  269.     var histogramChart = echarts.init(document.getElementById('histogramChart'));
  270.     histogramChart.setOption({
  271.  
  272.       color:["#87cefa","#ff7f50","#32cd32","#da70d6",],
  273.       legend: {
  274.           y : '250',
  275.           x : 'center',
  276.           data:['厦门第一医院', '厦门中山医院','厦门中医院','厦门第五医院'],
  277.           textStyle : {
  278.               color : '#ffffff',
  279.  
  280.           }
  281.       },
  282.  
  283.       calculable :false,
  284.  
  285.  
  286.       grid:{
  287.               left: '5%',
  288.               right: '5%',
  289.               bottom: '20%',
  290.               containLabel: true
  291.       },
  292.  
  293.       tooltip : {
  294.           trigger: 'axis',
  295.           axisPointer : {
  296.               type : 'shadow'
  297.           }
  298.       },
  299.  
  300.       xAxis : [
  301.           {
  302.               type : 'value',
  303.               axisLabel: {
  304.                   show: true,
  305.                   textStyle: {
  306.                       color: '#fff'
  307.                   }
  308.               },
  309.               splitLine:{
  310.                   lineStyle:{
  311.                       color:['#f2f2f2'],
  312.                       width:0,
  313.                       type:'solid'
  314.                   }
  315.               }
  316.  
  317.           }
  318.       ],
  319.  
  320.       yAxis : [
  321.           {
  322.               type : 'category',
  323.               data:['门诊人数(人)', '住院人次(人)','人均费用(元)'],
  324.               axisLabel: {
  325.                   show: true,
  326.                   textStyle: {
  327.                       color: '#fff'
  328.                   }
  329.               },
  330.               splitLine:{
  331.                   lineStyle:{
  332.                       width:0,
  333.                       type:'solid'
  334.                   }
  335.               }
  336.           }
  337.       ],
  338.  
  339.       series : [
  340.           {
  341.               name:'厦门第一医院',
  342.               type:'bar',
  343.               stack: '总量',
  344.               itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
  345.               data:[320, 302, 301]
  346.           },
  347.           {
  348.               name:'厦门中山医院',
  349.               type:'bar',
  350.               stack: '总量',
  351.               itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
  352.               data:[120, 132, 101]
  353.           },
  354.           {
  355.               name:'厦门中医院',
  356.               type:'bar',
  357.               stack: '总量',
  358.               itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
  359.               data:[220, 182, 191]
  360.           },
  361.           {
  362.               name:'厦门第五医院',
  363.               type:'bar',
  364.               stack: '总量',
  365.               itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
  366.               data:[150, 212, 201]
  367.           }
  368.  
  369.       ]
  370.    });
  371.  
  372.    var lineChart2 = echarts.init(document.getElementById('lineChart2'));
  373.    lineChart2.setOption({
  374.  
  375.      color:["#87cefa","#ff7f50","#32cd32","#da70d6",],
  376.      legend: {
  377.          y : '260',
  378.          x : 'center',
  379.          textStyle : {
  380.              color : '#ffffff',
  381.  
  382.          },
  383.           data : ['厦门第一医院','厦门中山医院','厦门中医院','厦门第五医院',],
  384.      },
  385.      calculable : false,
  386.      tooltip : {
  387.          trigger: 'item',
  388.          formatter: "{a}<br/>{b}<br/>{c}条"
  389.      },
  390.      yAxis: [
  391.            {
  392.                type: 'value',
  393.                axisLine : {onZero: false},
  394.                axisLine:{
  395.                    lineStyle:{
  396.                        color: '#034c6a'
  397.                    },
  398.                },
  399.  
  400.                axisLabel: {
  401.                    textStyle: {
  402.                        color: '#fff'
  403.                    },
  404.                    formatter: function (value) {
  405.                        return value + "k条"
  406.                    },
  407.                },
  408.                splitLine:{
  409.                    lineStyle:{
  410.                        width:0,
  411.                        type:'solid'
  412.                    }
  413.                }
  414.            }
  415.        ],
  416.        xAxis: [
  417.            {
  418.                type: 'category',
  419.                data : ['8:00','10:00','12:00','14:00','16:00','18:00'],
  420.                axisLine:{
  421.                    lineStyle:{
  422.                        color: '#034c6a'
  423.                    },
  424.                },
  425.                splitLine: {
  426.                    "show": false
  427.                },
  428.                axisLabel: {
  429.                    textStyle: {
  430.                        color: '#fff'
  431.                    },
  432.                    formatter: function (value) {
  433.                        return value + ""
  434.                    },
  435.                },
  436.                splitLine:{
  437.                    lineStyle:{
  438.                        width:0,
  439.                        type:'solid'
  440.                    }
  441.                },
  442.            }
  443.        ],
  444.        grid:{
  445.                left: '5%',
  446.                right: '5%',
  447.                bottom: '20%',
  448.                containLabel: true
  449.        },
  450.        series : [
  451.          {
  452.              name:'厦门第一医院',
  453.              type:'line',
  454.              smooth:true,
  455.              itemStyle: {
  456.                  normal: {
  457.                      lineStyle: {
  458.                          shadowColor : 'rgba(0,0,0,0.4)'
  459.                      }
  460.                  }
  461.              },
  462.              data:[15, 0, 20, 45, 22.1, 25,].reverse()
  463.          },
  464.          {
  465.              name:'厦门中山医院',
  466.              type:'line',
  467.              smooth:true,
  468.              itemStyle: {
  469.                  normal: {
  470.                      lineStyle: {
  471.                          shadowColor : 'rgba(0,0,0,0.4)'
  472.                      }
  473.                  }
  474.              },
  475.              data:[25, 10, 30, 55, 32.1, 35, ].reverse()
  476.          },
  477.          {
  478.              name:'厦门中医院',
  479.              type:'line',
  480.              smooth:true,
  481.              itemStyle: {
  482.                  normal: {
  483.                      lineStyle: {
  484.                          shadowColor : 'rgba(0,0,0,0.4)'
  485.                      }
  486.                  }
  487.              },
  488.              data:[35, 20, 40, 65, 42.1, 45, ].reverse()
  489.          },
  490.          {
  491.              name:'厦门第五医院',
  492.              type:'line',
  493.              smooth:true,
  494.              itemStyle: {
  495.                  normal: {
  496.                      lineStyle: {
  497.                          shadowColor : 'rgba(0,0,0,0.4)'
  498.                      }
  499.                  }
  500.              },
  501.              data:[45, 30, 50, 75, 52.1, 55, 6].reverse()
  502.          }
  503.      ]
  504.    });
  505.  
  506.  
  507.  
  508. }
  509.  
  510. function init2(){
  511.   var lineChart3 = echarts.init(document.getElementById('lineChart3'));
  512.   lineChart3.setOption({
  513.  
  514.     color:["#87cefa","#ff7f50",],
  515.     legend: {
  516.         y : 'top',
  517.         x : 'center',
  518.         textStyle : {
  519.             color : '#ffffff',
  520.  
  521.         },
  522.          data : ['门诊人次','住院人次'],
  523.     },
  524.     calculable : false,
  525.     tooltip : {
  526.         trigger: 'item',
  527.         formatter: "{a}<br/>{b}<br/>{c}人"
  528.     },
  529.     dataZoom: {
  530.          show: true,
  531.          realtime : true,
  532.          start: 0,
  533.          end: 18,
  534.          height: 20,
  535.          backgroundColor: '#f8f8f8',
  536.          dataBackgroundColor: '#e4e4e4',
  537.          fillerColor: '#87cefa',
  538.          handleColor: '#87cefa',
  539.      },
  540.     yAxis: [
  541.           {
  542.               type: 'value',
  543.               axisLine : {onZero: false},
  544.               axisLine:{
  545.                   lineStyle:{
  546.                       color: '#034c6a'
  547.                   },
  548.               },
  549.  
  550.               axisLabel: {
  551.                   textStyle: {
  552.                       color: '#fff'
  553.                   },
  554.                   formatter: function (value) {
  555.                       return value + "人"
  556.                   },
  557.               },
  558.               splitLine:{
  559.                   lineStyle:{
  560.                       width:0,
  561.                       type:'solid'
  562.                   }
  563.               }
  564.           }
  565.       ],
  566.       xAxis: [
  567.           {
  568.               type: 'category',
  569.               data : symptomName,
  570.               boundaryGap : false,
  571.               axisLine:{
  572.                   lineStyle:{
  573.                       color: '#034c6a'
  574.                   },
  575.               },
  576.               splitLine: {
  577.                   "show": false
  578.               },
  579.               axisLabel: {
  580.                   textStyle: {
  581.                       color: '#fff'
  582.                   },
  583.                   formatter: function (value) {
  584.                       return value + ""
  585.                   },
  586.               },
  587.               splitLine:{
  588.                   lineStyle:{
  589.                       width:0,
  590.                       type:'solid'
  591.                   }
  592.               },
  593.           }
  594.       ],
  595.       grid:{
  596.               left: '5%',
  597.               right: '5%',
  598.               bottom: '20%',
  599.               containLabel: true
  600.       },
  601.       series : [
  602.         {
  603.             name:'门诊费用',
  604.             type:'line',
  605.             smooth:true,
  606.             itemStyle: {
  607.                 normal: {
  608.                     lineStyle: {
  609.                         shadowColor : 'rgba(0,0,0,0.4)'
  610.                     }
  611.                 }
  612.             },
  613.             data:[1150, 180, 2100, 2415, 1212.1, 3125,1510, 810, 2100, 2415, 1122.1, 3215,1510, 801, 2001, 2245, 1232.1, 3245,1520, 830, 2200, 2145, 1223.1, 3225,150, 80, 200, 245, 122.1, 325]
  614.         },
  615.         {
  616.             name:'住院费用',
  617.             type:'line',
  618.             smooth:true,
  619.             itemStyle: {
  620.                 normal: {
  621.                     lineStyle: {
  622.                         shadowColor : 'rgba(0,0,0,0.4)'
  623.                     }
  624.                 }
  625.             },
  626.             data:[2500, 1000, 3000, 5005, 3200.1, 3005, 2500, 1000, 3000, 5005, 3200.1, 3005,2500, 1000, 3000, 5005, 3200.1, 3005,2500, 1000, 3000, 5005, 3200.1, 3005, 2500, 1000, 3000, 5005, 3200.1, 3005,2500, 1000, 3000, 5005, 3200.1, 3005,]
  627.         },
  628.     ]
  629.   });
  630.  
  631.  
  632.   var lineChart4 = echarts.init(document.getElementById('lineChart4'));
  633.   lineChart4.setOption({
  634.  
  635.     color:["#87cefa","#ff7f50",],
  636.     calculable : false,
  637.     tooltip : {
  638.         trigger: 'item',
  639.         formatter: "{a}<br/>{b}<br/>{c}元"
  640.     },
  641.     dataZoom: {
  642.          show: true,
  643.          realtime : true,
  644.          start: 0,
  645.          end: 18,
  646.          height: 20,
  647.          backgroundColor: '#f8f8f8',
  648.          dataBackgroundColor: '#e4e4e4',
  649.          fillerColor: '#87cefa',
  650.          handleColor: '#87cefa',
  651.      },
  652.     yAxis: [
  653.           {
  654.               type: 'value',
  655.               axisLine : {onZero: false},
  656.               axisLine:{
  657.                   lineStyle:{
  658.                       color: '#034c6a'
  659.                   },
  660.               },
  661.  
  662.               axisLabel: {
  663.                   textStyle: {
  664.                       color: '#fff'
  665.                   },
  666.                   formatter: function (value) {
  667.                       return value + "元"
  668.                   },
  669.               },
  670.               splitLine:{
  671.                   lineStyle:{
  672.                       width:0,
  673.                       type:'solid'
  674.                   }
  675.               }
  676.           }
  677.       ],
  678.       xAxis: [
  679.           {
  680.               type: 'category',
  681.               data : symptomName,
  682.               boundaryGap : false,
  683.               axisLine:{
  684.                   lineStyle:{
  685.                       color: '#034c6a'
  686.                   },
  687.               },
  688.               splitLine: {
  689.                   "show": false
  690.               },
  691.               axisLabel: {
  692.                   textStyle: {
  693.                       color: '#fff'
  694.                   },
  695.                   formatter: function (value) {
  696.                       return value + ""
  697.                   },
  698.               },
  699.               splitLine:{
  700.                   lineStyle:{
  701.                       width:0,
  702.                       type:'solid'
  703.                   }
  704.               },
  705.           }
  706.       ],
  707.       grid:{
  708.               left: '5%',
  709.               right: '5%',
  710.               bottom: '20%',
  711.               containLabel: true
  712.       },
  713.       series : [
  714.         {
  715.             name:'医疗费用',
  716.             type:'line',
  717.             smooth:true,
  718.             itemStyle: {
  719.                 normal: {
  720.                     lineStyle: {
  721.                         shadowColor : 'rgba(0,0,0,0.4)'
  722.                     }
  723.                 }
  724.             },
  725.             data:[1500, 800, 1200, 2450, 1122.1, 1325,1150, 180, 1200, 1245, 1122.1, 1325,150, 180, 1200, 2145, 1212.1, 3215,1510, 180, 2100, 2415, 122.1, 325,150, 80, 200, 245, 122.1, 325].reverse()
  726.         },
  727.     ]
  728.   });
  729.  
  730.   //年龄分布
  731.   var pieChart2 = echarts.init(document.getElementById('pieChart2'));
  732.   pieChart2.setOption({
  733.     color:["#32cd32","#ff7f50","#87cefa","#FD6C88","#4b5cc4","#faff72"],
  734.     tooltip : {
  735.      trigger: 'item',
  736.      formatter: "{a}<br/>{b}<br/>{c}人"
  737.     },
  738.     calculable : true,
  739.     series : [
  740.         {
  741.             name:'发病人数',
  742.             type:'pie',
  743.             radius : [30, 110],
  744.             center : ['50%', '50%'],
  745.             roseType : 'area',
  746.             x: '50%',
  747.  
  748.  
  749.  
  750.             sort : 'ascending',
  751.             data:[
  752.                 {value:10, name:'婴儿(1-3岁)'},
  753.                 {value:5, name:'少儿(4-10岁)'},
  754.                 {value:15, name:'少年(10-18岁)'},
  755.                 {value:25, name:'青年(18-45岁)'},
  756.                 {value:125, name:'中年(45-60岁)'},
  757.                 {value:175, name:'老年(60岁以上)'},
  758.             ]
  759.         }
  760.     ]
  761.   })
  762.  
  763.   //医疗费用组成
  764.   var pieChart3 = echarts.init(document.getElementById('pieChart3'));
  765.   pieChart3.setOption({
  766.     color:["#32cd32","#ff7f50","#87cefa","#FD6C88","#4b5cc4","#faff72"],
  767.     tooltip : {
  768.      trigger: 'item',
  769.      formatter: "{a}<br/>{b}<br/>{c}元"
  770.     },
  771.     calculable : true,
  772.     series : [
  773.         {
  774.             name:'发病人数',
  775.             type:'pie',
  776.             radius : [30, 110],
  777.             center : ['50%', '50%'],
  778.             roseType : 'area',
  779.             x: '50%',
  780.  
  781.  
  782.  
  783.             sort : 'ascending',
  784.             data:[
  785.                 {value:10, name:'诊察费用'},
  786.                 {value:500, name:'检查费用'},
  787.                 {value:150, name:'检验费用'},
  788.                 {value:250, name:'西药费用'},
  789.                 {value:125, name:'中药费用'},
  790.                 {value:1750, name:'手术费用'},
  791.             ]
  792.         }
  793.     ]
  794.   })
  795. }
  796.  
  797.  
  798. var chartMapElementId = 'mapChart';
  799. // var chartMapElement = document.getElementById(chartMapElementId); 这种有问题，不显示图
  800. //相对路径，页面的当前目录
  801. // var jsonFileName = 'json/map.json';
  802.  
  803. //绝对路径，根目录
  804. var jsonFileName = '/json/map.json';
  805. var jsonFileNamechart_1 = '/json/chart_1.json';
  806. var jsonFileNamechart_2 = '/json/chart_2.json';
  807.  
  808. function get_legend(data) {
  809.     var listLegend = new Array();
  810.  
  811.     for (i=0; i<data.length; i++) {
  812.         n = data[i]["name"];
  813.         listLegend.push(n);
  814.     }
  815.     console.log("get_legend", listLegend);
  816.     return listLegend
  817. }
  818.  
  819. function get_value(data) {
  820.     var listLegend = new Array();
  821.     var listValue = new Array();
  822.     for (i=0; i<data.length; i++) {
  823.         n = data[i][2];
  824.         v = data[i][3];
  825.         tmp = {"name": n, "value": v};
  826.         listLegend.push(n);
  827.         listValue.push(tmp);
  828.     }
  829.     console.log("get_value", listLegend, listValue);
  830.     return [listLegend, listValue]
  831. }
  832.  
  833. function get_value2(data) {
  834.     var listLegend = new Array();
  835.     var listValue = new Array();
  836.     for (i=0; i<data.length; i++) {
  837.         n = data[i][2];
  838.         v = [data[i][3], data[i][4], data[i][5]];
  839.         tmp = {"name": n, "data": v};
  840.         listLegend.push(n);
  841.         listValue.push(tmp);
  842.     }
  843.     console.log("get_value2", listLegend, listValue);
  844.     return [listLegend, listValue]
  845. }
  846.  
  847.  
  848. function get_value3(data) {
  849.     var listLegend = new Array();
  850.     var listValue = new Array();
  851.     for (i=0; i<data.length; i++) {
  852.         n = data[i][2];
  853.         v = [data[i][3], data[i][4], data[i][5], data[i][3], data[i][4], data[i][5], data[i][3], data[i][4], data[i][5]];
  854.         tmp = {"name": n, "data": v};
  855.         listLegend.push(n);
  856.         listValue.push(tmp);
  857.     }
  858.     console.log("get_value3", listLegend, listValue);
  859.     return [listLegend, listValue]
  860. }
  861.  
  862.  
  863. function async_map_data() {
  864.  
  865.     // 异步加载数据
  866.     $.getJSON(jsonFileName).done(function (data) {
  867.         // 1
  868.         var chartMapElement = document.getElementById(chartMapElementId);
  869.         console.log(chartMapElementId, "async_data")
  870.         var myChart = echarts.init(chartMapElement);
  871.         console.log(data)
  872.         myChart.setOption({
  873.             series: [{
  874.                 data: data
  875.             }]
  876.         });
  877.  
  878.         // 2
  879.         var pieChart1Element = document.getElementById("pieChart1");
  880.         var pieChart1 = echarts.init(pieChart1Element);
  881.         rs = get_value(data);
  882.         console.log(rs);
  883.         pieChart1.setOption({
  884.             legend: {
  885.                 data: rs[0]
  886.             },
  887.             series: [{
  888.                 data: rs[1]
  889.             }]
  890.         })
  891.  
  892.         //3
  893.         var histogramChartElement = document.getElementById('histogramChart');
  894.         var histogramChart = echarts.init(histogramChartElement);
  895.         rs = get_value2(data);
  896.         console.log(rs);
  897.         histogramChart.setOption({
  898.             legend: {
  899.                 data: rs[0]
  900.             },
  901.             series: rs[1]
  902.         })
  903.         // 4
  904.         var lineChart = echarts.init(document.getElementById('lineChart'));
  905.         rs = get_value3(data);
  906.         lineChart.setOption({
  907.             legend: {
  908.                 data: rs[0]
  909.             },
  910.             series: rs[1]
  911.         })
  912.  
  913.         // end
  914.     });//end $.getJSON
  915.  
  916.     // 异步加载数据
  917.     $.getJSON(jsonFileNamechart_1).done(function (data) {
  918.         console.log(data);
  919.  
  920.         var lineChart2 = echarts.init(document.getElementById('lineChart2'));
  921.         lineChart2.setOption({
  922.             legend: {
  923.                 data: get_legend(data)
  924.             },
  925.             series: data
  926.         })
  927.     });//end $.getJSON
  928.  
  929.     $.getJSON(jsonFileNamechart_2).done(function (data) {
  930.         t0 = document.getElementById('t0');
  931.         t0.innerText = data[0];
  932.  
  933.         t1 = document.getElementById('t1');
  934.         t1.innerText = data[1];
  935.  
  936.         t2 = document.getElementById('t2');
  937.         t2.innerText = data[2];
  938.  
  939.         t3 = document.getElementById('t3');
  940.         t3.innerText = data[3];
  941.  
  942.         t4 = document.getElementById('t4');
  943.         t4.innerText = data[4];
  944.  
  945.         t5 = document.getElementById('t5');
  946.         t5.innerText = data[5];
  947.     });//end $.getJSON
  948.  
  949. }

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": "厦门医学院附属第二医院", "data": [235, 215, 275, 260, 115, 262, 72, 47, 121, 253, 254, 107, 30, 165, 259, 84, 290, 130, 75, 13, 248, 40, 17, 176, 288, 20, 236]}, {"name": "厦门第一医院", "data": [235, 215, 275, 260, 115, 262, 72, 47, 121, 253, 254, 107, 30, 165, 259, 84, 290, 130, 75, 13, 248, 40, 17, 176, 288, 20, 236]}, {"name": "厦门大学附属第一医院", "data": [235, 215, 275, 260, 115, 262, 72, 47, 121, 253, 254, 107, 30, 165, 259, 84, 290, 130, 75, 13, 248, 40, 17, 176, 288, 20, 236]}]

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

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

五、更多案例 


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

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

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

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

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

  

闽ICP备14008679号