python项目分享 - 基于大数据的医疗与疾病监控大数据可视化

# 0 前言

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

今天要分享的是:基于大数据的医疗与疾病监控大数据可视化

包含内容:

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

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

1 介绍

大数据大屏可视化系列:基于大数据的医疗与疾病监控大数据可视化
可搭载任意自己想用的数据,动态效果不错

2 实现效果

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

在这里插入图片描述

3 部分代码展示

</script>
	</div>
	<div class="mainbox">
	
	<ul class="clearfix nav1">
		<li style="width: 26%">
		<div class="box">
			<div class="tit"><span>当日情况</span><p></p></div>
			<div class="boxnav" style="height: 320px;">
				<ul class="drqk clearfix">
				<li>
					<div class="icon"><img src="images/icona.png"></div>
					<div><span>今日就诊人数</span>
					<p><em>1358</em><i></i></p></div>
					</li>
				<li><div class="icon"><img src="images/iconb.png"></div>
					<div><span>今日就诊人数</span>
					<p><em>1983</em><i></i></p></div></li>
				<li><div class="icon"><img src="images/iconc.png"></div>
					<div><span>今日就诊人数</span>
					<p><em>930</em><i></i></p></div></li>
				<li><div class="icon"><img src="images/icond.png"></div>
					<div><span>今日就诊人数</span>
					<p><em>371</em><i></i></p></div></li>
				<li><div class="icon"><img src="images/icone.png"></div>
					<div><span>今日就诊人数</span>
					<p><em>1683</em><i></i></p></div></li>
				<li><div class="icon"><img src="images/iconf.png"></div>
					<div><span>今日就诊人数</span>
					<p><em>1091</em><i></i></p></div></li>
				</ul>
			</div>
			</div>
			<div class="box">
			<div class="tit"><span>法定传染病监测 </span><p></p></div>
			<div class="boxnav" style="height:140px;">
			<table class="table1" width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>                                             
      <th>发病统计</th>
      <th>甲类</th>
      <th>乙类</th>
      <th>丙类</th>
    </tr>
    <tr>
      <td>发病数(万)</td>
      <td>0.03<span class="text-b">0.01%</span></td>
      <td>163.00<span class="text-d">4.01%</span></td>
      <td>163.00<span class="text-d">4.01%</span></td>
    </tr>
      <tr>
      <td>发病率(%</td>
      <td>0.3<span class="text-b">0.01%</span></td>
      <td>100%<span class="text-d">4.01</span></td>
      <td>81.92%<span class="text-d">4.01</span></td>
    </tr>

      
  </tbody>
</table>
			</div>
			</div>
			
			<div class="box">
			<div class="tit"><span>医疗服务</span><p></p></div>
			<div class="boxnav" style="height: 250px;">
				<ul class="ylfw">
				<li><div class="ylfwbox fora">
					<p>医师日均报卡量</p>
					<ol><span>12.5</span><em></em><i class="text-d">4.01%</i></ol>
					<div class="forb"></div>
					</div></li>
				<li><div class="ylfwbox fora">
					<p>平均报卡时间</p>
					<ol><span>1234</span><em></em><i class="text-s">4.01%</i></ol>
					<div class="forb"></div></div></li>
				
				<li><div class="ylfwbox fora">
					<p>医生最高报卡量</p>
					<ol><span>2.3</span><em>小时</em><i class="text-s">4.01%</i></ol>
					<div class="forb"></div>
					</div></li>
				<li><div class="ylfwbox fora">
					<p>最低报卡时间</p> 
					<ol><span>0012</span><em></em><i class="text-s">4.01%</i></ol>
					<div class="forb"></div></div></li>
					<li><div class="ylfwbox fora">
					<p>医生排除比例</p>
					<ol><span>10.00%</span><em></em><i class="text-s">4.01%</i></ol>
					<div class="forb"></div></div></li>
				<li><div class="ylfwbox fora">
					<p>迟报漏报卡数</p> 

					<ol><span>0013</span><em></em><i class="text-s">4.01%</i></ol>
					<div class="forb"></div></div></li>
					
				</ul>
			</div>
			</div>
			
		</li>
		<li style="width:48%">
		
		<div class="box" style="position: relative">
			<div class="map">
        <div class="map1"><img src="images/lbx.png"></div>
        <div class="map2"><img src="images/jt.png"></div>
        <div class="map3"><img src="images/map.png"></div>
        
      </div>

			<div class="" id="map" style="height: 557px; position: relative; z-index: 100"></div>

		<!--		<script>
    // 百度地图API功能
    var map = new BMap.Map("map");    // 创建Map实例
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
    map.addControl(new BMap.MapTypeControl({
        mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]}));
    var mapStyle={
        style:"midnight"
    };
    map.setMapStyle(mapStyle);
    map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true);
</script>
				-->
		
			</div>
		<div class="box">
			<div class="tit"><span>监测机构</span><p></p></div>
			<div class="boxnav" style="height: 250px;">
<ul class="jcjg">
				<li><h3>医疗机构</h3>
	<div class="jcnav">
					<img src="images/icon1.png">
		<div class="jcnavp">
		<div class="fora"><ol>私人诊所</ol><span>765</span><i class="text-d">+2.30</i><div class="forb"></div></div>
		<div class="fora"><ol>公立医院</ol><span>765</span><i class="text-d">+2.30</i><div class="forb"></div></div>
		<div class="fora"><ol>民营医院</ol><span>765</span><i class="text-s">-2.30</i><div class="forb"></div></div>
		</div>
					</div>
	</li>
				<li><h3>床位数</h3>
	<div class="jcnav">
					<img src="images/icon2.png">
		<div class="jcnavp">
		<div class="fora"><ol>床位总数</ol><span>765</span><i class="text-s">-2.30</i><div class="forb"></div></div>
		<div class="fora"><ol>空闲床位</ol><span>765</span><i class="text-s">-2.30</i><div class="forb"></div></div>
		<div class="fora"><ol>在用床位</ol><span>765</span><i class="text-d">+2.30</i><div class="forb"></div></div>
		</div>
		
					</div>
	</li>
				<li><h3>医护人员</h3>
	<div class="jcnav jcnav2">
					<img src="images/icon3.png">
		<div class="jcnavp">
		<div class="fora"><ol>总人数</ol><span>765</span><i class="text-d">+2.30</i><div class="forb"></div></div>
		<div class="fora"><ol>执业医生</ol><span>765</span><i class="text-d">+2.30</i><div class="forb"></div></div>
		<div class="fora"><ol>普通医生</ol><span>765</span><i class="text-d">+2.30</i><div class="forb"></div></div>
		<div class="fora"><ol>护士</ol><span>765</span><i class="text-d">+2.30</i><div class="forb"></div></div>
		</div>
					</div>
	</li>
				</ul>
	
			</div>
			</div>
		</li>
		<li style="width: 26%">
		<div class="box">
			<div class="tit"><span>同期对比</span><p></p></div>
			<div class="boxnav" id="" style="height: 280px;">
			<ul class="tqdb">
				<li ><div  id="echart1"></div><h3>就诊人数</h3></li>
				<li ><div  id="echart2"></div><h3>触发次数</h3></li>
				<li ><div  id="echart3"></div><h3>触发卡数</h3></li>
				<li ><div  id="echart4"></div><h3>去重卡数</h3></li>
				<li ><div  id="echart5"></div><h3>报卡时间</h3></li>
				<li ><div  id="echart6"></div><h3>迟报漏报</h3></li>
				
				</ul>
			</div>
			</div>
			<div class="box">
			<div class="tit"><span>就医动态</span><p></p></div>
			<div class="boxnav" style="height: 180px;"   id="echart7">

	
			</div>
			</div>
			
			<div class="box">
			<div class="tit"><span>疾病构成</span><p></p></div>
			<div class="boxnav" style="height: 250px;">
				<ul class="jbgc">
				<li >
				<div class="jztxt">
					<div><h3>1236<i>万元</i></h3>
					<span>私人诊所</span></div>
					<div><h3>1236<i>万元</i></h3>
					<span>私人诊所</span></div>
				<div><h3>1236<i>万元</i></h3>
					<span>私人诊所</span></div>
					</div>
					</li>
				<li style="width:90%" id="echart8"></li>
				</ul>
			</div>
			</div>
		
		</li>
		</ul>
	</div>

4 最后

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

  • 8
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值