毕设项目分享 基于大数据的医院医疗数据可视化

# 0 前言

Hi，大家好，今天给大家介绍一个大数据可视化项目，大家可以用于自己的课设或毕设，可以灵活耦合任意数据，为自己的项目添加灵活的可视化动态效果！

今天要分享的是：基于大数据的医院医疗数据可视化

包含内容：

1. 完整可视化实现源码
2. html一键入口(双击直接启动)

项目获取：https://gitee.com/sinonfin/system-sharing

1 介绍

大数据大屏可视化系列：基于大数据的医院医疗数据可视化
可搭载任意自己想用的数据，动态效果不错

2 实现效果

整体实现效果如下，可以看到CSS优化相对漂亮的，而且动态效果也很好，适合搭载各种数据。

3 部分代码展示

<header class="header left">
    <div class="left nav">
        <ul>
            <li class="nav_active"><i class="nav_1"></i><a href="index.html">采集概况</a> </li>
            <li><i class="nav_2"></i><a href="quota.html">指标分析</a> </li>
            <li><i class="nav_3"></i><a href="trend.html">趋势分析</a> </li>
            <li><i class="nav_4"></i><a href="chronic.html">慢病病人列表</a> </li>
            </ul>
    </div>
    <div class="header_center left" style="position:relative">
        
        <h2><strong>医院大数据展示</strong></h2>

    </div>
    <div class="right nav text_right">
        <ul>

        </ul>
    </div>

</header>
<!--内容部分-->
<div class="con left">
    <!--数据总概-->
    <div class="con_div">
        <div class="con_div_text left">
            <div class="con_div_text01 left">
                <img src="../images/info_1.png" class="left text01_img"/>
                <div class="left text01_div">
                    <p>总采集数据量(G)</p>
                    <p>1235</p>
                </div>
            </div>
            <div class="con_div_text01 right">
                <img src="../images/info_2.png" class="left text01_img"/>
                <div class="left text01_div">
                    <p>当月采集数据量(G)</p>
                    <p>235</p>
                </div>
            </div>
        </div>
        <div class="con_div_text left">
            <div class="con_div_text01 left">
                <img src="../images/info_3.png" class="left text01_img"/>
                <div class="left text01_div">
                    <p>总门诊数(人)</p>
                    <p class="sky">12356</p>
                </div>
            </div>
            <div class="con_div_text01 right">
                <img src="../images/info_4.png" class="left text01_img"/>
                <div class="left text01_div">
                    <p>当月门诊数(人)</p>
                    <p class="sky">12356</p>
                </div>
            </div>
        </div>
        <div class="con_div_text left">

            <div class="con_div_text01 left">
                <img src="../images/info_5.png" class="left text01_img"/>
                <div class="left text01_div">
                    <p>总住院数(人)</p>
                    <p class="org">12356</p>
                </div>
            </div>
            <div class="con_div_text01 right">
                <img src="../images/info_6.png" class="left text01_img"/>
                <div class="left text01_div">
                    <p>当月住院数(人)</p>
                    <p class="org">12356</p>
                </div>
            </div>
        </div>
    </div>
    <!--统计分析图-->
    <div class="div_any">
        <div class="left div_any01">
            <div class="div_any_child">
                <div class="div_any_title"><img src="../images/title_1.png">各医院采集数据量</div>
                <p id="pieChart1" class="p_chart"></p>
            </div>
            <div class="div_any_child">
                <div class="div_any_title"><img src="../images/title_2.png">各医院门诊住院费用</div>
                <p id="histogramChart" class="p_chart"></p>
            </div>
        </div>
        <div class="div_any02 left ">
            <div class="div_any_child div_height">
                <div class="div_any_title any_title_width"><img src="../images/title_0.png">厦门市地图 </div>
                <div id="mapChart" style="width:97.5%;height:95%;display: inline-block;padding-left: 1.25%;padding-top:2.2%"></div>
            </div>
        </div>
        <div class="right div_any01">
            <div class="div_any_child">
                <div class="div_any_title"><img src="../images/title_3.png">数据采集条数(当日)</div>
                <p id="lineChart" class="p_chart"></p>
            </div>
            <div class="div_any_child">
                <div class="div_any_title"><img src="../images/title_4.png">就诊人数(当日)</div>
                <p id="lineChart2" class="p_chart"></p>
            </div>
        </div>
    </div>

    <div id="el-dialog" class="">
        <div class="xc_layer"></div>
        <div class="popBox" id="printView">
            <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>
            <div class="txtBox" id="el-dialog_body">
             <div style="height:100%;width: 98%;margin-left: 1%;">
               <div class="left div_any01" style="width: 64%;">
                   <div class="div_any_child">
                       <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>
                       <p id="lineChart3" class="p_chart"></p>
                   </div>
                   <div class="div_any_child">
                       <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>
                       <p id="lineChart4" class="p_chart"></p>
                   </div>
               </div>
               <div class="left div_any01"  style="width: 32%;">
                   <div class="div_any_child">
                       <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>
                       <p id="pieChart2" class="p_chart"></p>
                   </div>
                   <div class="div_any_child">
                       <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>
                       <p id="pieChart3" class="p_chart"></p>
                   </div>
               </div>

             </div>
            </div>
        </div>
    </div>

</div>
</body>

4 最后

项目获取：https://gitee.com/sinonfin/system-sharing