基于html5、css3、JQuery、Echarts、百度地图API的医疗大数据可视化面板，我们需要引入JQuery和echarts，以及相关图片，如有需要可以私信我，纯原创版，如有不足希望大家指出！！！
下面是代码（使用Vscode）
第一部分：采集概况.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>采集概况</title>
<script src="echarts.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1b9Mngw5RZCyNdkJD9EwmWjNZYhIulGW"></script>
<style>
* {
box-sizing: border-box;
}
body {
background-color:#02067f ;
}
/* 导航 */
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #020763;
color: white;
text-align: center;
font-size: large;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: blue;
}
/* .active {
background-color: blue;
} */
h4 {
display: flex;
color: white;
}
/* 数据栏 */
/* 总数据栏 */
.data-container {
display: flex;
flex-wrap: nowrap;
}
/* 三个分类数据 */
.data-container .data {
background-color: rgb(2, 2, 88);
width: 33.33%;
margin: 10px;
text-align: center;
}
.data-container .data::after {
content: "";
clear: both;
display: table;
}
/* 分类数据里的两个数据（总、月） */
.datademo {
float: left;
width: 50%;
/* padding: 10px; */
/* padding: 5px; */
}
.p1 {
color: white;
/* margin-left: 10px; */
/* margin-top: 20px; */
}
/* 图表 */
.chartcontainer {
display: flex;
flex-wrap: nowrap;
}
.chartleft {
width: 400px;
height: auto;
}
.chartright {
width: 400px;
height: auto;
/* float: right; */
/* display: inline-flexbox; */
right: 0;
}
</style>
</head>
<body>
<!-- 导航 -->
<header>
<nav>
<ul>大数据展示
<li><a href="采集概况.html">采集概况</a></li>
<li><a href="指标分析.html">指标分析</a></li>
<li><a href="慢病病人列表.html">慢病病人列表</a></li>
</ul>
</nav>
</header>
<!-- 数据量 -->
<div class="data-container">
<!-- 1采集量 -->
<div class="data">
<div class="datademo"><p class="p1"><img src="./img/info_1.png" alt="" style="margin-left: 30px;width: 15%;float: left;">总采集数据量(G)</p><br><p style="color: yellow;margin-top: 10px;font-size: 20px;">1235</p></div>
<div class="datademo"><p class="p1"><img src="./img/info_2.png" alt="" style="margin-left: 30px;width: 15%;float: left;">当月采集数据量(G)</p><br><p style="color: yellow;margin-top: 10px;font-size: 20px;">235</p></div>
</div>
<!-- 2门诊量 -->
<div class="data">
<div class="datademo"><p class="p1"><img src="./img/info_3.png" alt="" style="margin-left: 30px;width: 15%;float: left;">总门诊数(人)</p><br><p style="color: aqua;margin-top: 10px;font-size: 20px;">12356</p></div>
<div class="datademo"><p class="p1"><img src="./img/info_4.png" alt="" style="margin-left: 30px;width: 15%;float: left;">当月门诊数(人)</p><br><p style="color: aqua;margin-top: 10px;font-size: 20px;">12356</p></div>
</div>
<!-- 3住院量 -->
<div class="data">
<div class="datademo"><p class="p1"><img src="./img/info_5.png" alt="" style="margin-left: 30px;width: 15%;float: left;">总住院数(人)</p><br><p style="color: red;margin-top: 10px;font-size: 20px;">1235</p></div>
<div class="datademo"><p class="p1"><img src="./img/info_6.png" alt="" style="margin-left: 30px;width: 15%;float: left;">当月住院数(人)</p><br><p style="color: red;margin-top: 10px;font-size: 20px;">235</p></div>
</div>
</div>
<!-- 图表 -->
<div class="chartcontainer">
<div class="chartleft">
<div id="chart1" style="width: 400px;height:350px;border: 10px solid blue;"></div>
<div id="chart2" style="width: 400px;height:350px;border: 10px solid blue;"></div>
</div>
<!-- 地图容器 -->
<div class="chartcenter">
<div id="map" style="width: 890px;height: 700px;border: 10px solid blue;"></div>
</div>
<div class="chartright">
<div id="chart4" style="width: 400px;height:350px;border: 10px solid blue;"></div>
<div id="chart5" style="width: 400px;height:350px;border: 10px solid blue;"></div>
</div>
</div>
<!-- 图表的JS -->
<script type="text/javascript">
var chartDom = document.getElementById('chart1');
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text: '各医院采集数据量',
left:'center',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'item'
},
legend: {
top: '85%',
left: 'center',
textStyle: {
color: '#fff'
}
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 800, name: '厦门第一医院' },
{ value: 735, name: '厦门中山医院' },
{ value: 580, name: '厦门中医院' },
{ value: 300, name: '其他' }
]
}
]
};
option && myChart.setOption(option);
</script>
<script type="text/javascript">
var chartDom = document.getElementById('chart2');
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text: '各医院门诊住院费用',
left:'center',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
// Use axis to trigger tooltip
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
}
},
legend: {
top: '85%',
left: 'center',
textStyle: {
color: '#fff'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '15%',
containLabel: true
},
xAxis: {
type: 'value',
axisLabel: {
color:'#fff'
}
},
yAxis: {
type: 'category',
axisLabel: {
color:'#fff'
},
data: ['门诊人数(人)', '住院人次(人)', '人均费用(元)'],
},
series: [
{
name: '厦门第一医院',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [320,302,301]
},
{
name: '厦门中山医院',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [120,132,101]
},
{
name: '厦门中医院',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [220,182,191]
},
{
name: '厦门第五医院',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [150,212,201]
}
]
};
option && myChart.setOption(option);
</script>
<script type="text/javascript">
var chartDom = document.getElementById('chart4');
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text: '数据采集条数(当日)',
left:'center',
textStyle: {
co
最低0.47元/天 解锁文章
扫一扫
3307
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
