基于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: {
color: '#fff'
}
},
tooltip: {
trigger: 'axis'
},
legend: {
bottom:'0%',
textStyle: {
color: '#fff'
},
data: ['厦门第一医院', '厦门中山医院', '厦门中医院']
},
grid: {
left: '3%',
right: '4%',
bottom: '10%',
containLabel: true
},
// toolbox: {
// feature: {
// saveAsImage: {}
// }
// },
xAxis: {
type: 'category',
axisLabel: {
color:'#fff'
},
data: ['8:00', ' ', '12:00', ' ', '16:00', ' ', '20:00',' ']
},
yAxis: {
type: 'value',
axisLabel: {
color:'#fff',
formatter:"{value}k条"
},
data:[0,20,40,60,80,100,120]
},
series: [
{
name: '厦门第一医院',
type: 'line',
data: [18, 0, 20, 40, 22, 23, 60, 50],
smooth:true
},
{
name: '厦门中山医院',
type: 'line',
data: [28, 10, 30, 50, 32, 33, 70, 60],
smooth:true
},
{
name: '厦门中医院',
type: 'line',
data: [38, 20, 40, 60, 42, 43, 80, 70],
smooth:true
},
{
name: ' ',
type: 'line',
data: [48, 30, 50, 70, 52, 53, 90, 80],
smooth:true
}
]
};
option && myChart.setOption(option);
</script>
</script>
<script type="text/javascript">
var chartDom = document.getElementById('chart5');
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text: '就诊人数(当日)',
left:'center',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'axis'
},
legend: {
bottom:'0%',
textStyle: {
color: '#fff'
},
data: ['厦门第一医院', '厦门中山医院', '厦门中医院']
},
grid: {
left: '3%',
right: '4%',
bottom: '10%',
containLabel: true
},
// toolbox: {
// feature: {
// saveAsImage: {}
// }
// },
xAxis: {
type: 'category',
axisLabel: {
color:'#fff'
},
data: ['8:00', '10:00', '12:00', '14:00', '16:00', '18:00']
},
yAxis: {
type: 'value',
axisLabel: {
color:'#fff',
formatter:"{value}k条"
},
data:[0,20,40,60,80]
},
series: [
{
name: '厦门第一医院',
type: 'line',
data: [25, 23, 45, 20, 0, 17],
smooth:true
},
{
name: '厦门中山医院',
type: 'line',
data: [35, 33, 55, 30, 10, 27],
smooth:true
},
{
name: '厦门中医院',
type: 'line',
data: [45,43,65,40,20,37],
smooth:true
},
{
name: ' ',
type: 'line',
data: [5,55,52,75,50,32],
smooth:true
}
]
};
option && myChart.setOption(option);
</script>
</script>
<!-- </script> -->
</body>
</html>
<script type="text/javascript">
//新建三个地图上点
var points = [
{"lng":118.099355,"lat":24.471346,"url":"http://www.baidu.com","id":1,"name":"厦门中山医院"},
{"lng":118.088017,"lat":24.451038,"url":"http://www.mi.com","id":2,"name":"厦门第一医院"},
{"lng":118.140631,"lat":24.500477,"url":"http://www.csdn.com","id":3,"name":"厦门中医院"}
];
//创建标注点并添加到地图中
function addMarker(points) {
//循环建立标注点
for(var i=0, pointsLen = points.length; i<pointsLen; i++) {
var point = new BMap.Point(points[i].lng, points[i].lat); //将标注点转化成地图上的点
var marker = new BMap.Marker(point); //将点转化成标注点
map.addOverlay(marker); //将标注点添加到地图上
//添加监听事件
(function() {
var thePoint = points[i];
marker.addEventListener("click",
function() {
showInfo(this,thePoint);
});
})();
}
}
function showInfo(thisMarker,point) {
//获取点的信息
var sContent =
'<ul style="margin:0 0 5px 0;padding:0.2em 0">'
+'<li style="line-height: 26px;font-size: 15px;">'
+'<span style="width: 50px;display: inline-block;">id：</span>' + point.id + '</li>'
+'<li style="line-height: 26px;font-size: 15px;">'
+'<span style="width: 50px;display: inline-block;">名称：</span>' + point.name + '</li>'
+'<li style="line-height: 26px;font-size: 15px;"><span style="width: 50px;display: inline-block;">查看：</span><a href="'+point.url+'">详情</a></li>'
+'</ul>';
var infoWindow = new BMap.InfoWindow(sContent); //创建信息窗口对象
thisMarker.openInfoWindow(infoWindow); //图片加载完后重绘infoWindow
}
//创建地图
var map = new BMap.Map("map");
map.centerAndZoom(new BMap.Point(118.1,24.5),15); // 设置中心点
map.centerAndZoom( "厦门");
map.setCurrentCity("厦门"); //设置为厦门
map.addControl(new BMap.MapTypeControl());
map.enableScrollWheelZoom(true);
addMarker(points);
</script>
第二部分：指标分析.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>
<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: 5px; */
}
.p1 {
color: white;
}
/* 图表 */
.chartcontainer {
display: flex;
flex-wrap: nowrap;
}
.chartleft1 {
margin-left: 30px;
width: 25%;
height: auto;
}
.chartleft2 {
margin-left: 30px;
width: 25%;
height: auto;
}
.chartright1 {
margin-left: 30px;
width: 25%;
height: auto;
/* float: right; */
/* display: inline-flexbox; */
right: 0;
}
.chartright2 {
margin-left: 30px;
width: 25%;
height: auto;
}
</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_7.png" alt="" style="margin-left: 30px;width: 15%;float: left;">全年医疗费用(万元)</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_8.png" alt="" style="margin-left: 30px;width: 15%;float: left;">当月医疗费用(万元)</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_9.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_10.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_11.png" alt="" style="margin-left: 30px;width: 15%;float: left;">西药占比</p><br><p style="color: red;margin-top: 10px;font-size: 20px;">92%</p></div>
<div class="datademo"><p class="p1"><img src="./img/info_12.png" alt="" style="margin-left: 30px;width: 15%;float: left;">中药占比</p><br><p style="color: red;margin-top: 10px;font-size: 20px;">8%</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="chartleft1">
<div id="chart3" style="width: 400px;height:350px;border: 10px solid blue;"></div>
<div id="chart4" style="width: 400px;height:350px;border: 10px solid blue;"></div>
</div>
<div class="chartright1">
<div id="chart5" style="width: 400px;height:350px;border: 10px solid blue;"></div>
<div id="chart6" style="width: 400px;height:350px;border: 10px solid blue;"></div>
</div>
<div class="chartright2">
<div id="chart7" style="width: 400px;height:350px;border: 10px solid blue;"></div>
<div id="chart8" 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;
var lineColor=["#3689e4","#f07673","#65cfe0","#fbe0ae"];
option = {
title: {
text: '各医院门诊人次(人)',
left:'center',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'item',
axisPointer: {
type: 'line'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '10%',
containLabel: true
},
xAxis: {
type: 'value',
splitLine:{//坐标轴在grid区域的分割线
show:false
},
axisLabel:{
show:false
},
axisLine:{
show:false
}
},
yAxis: [
{
type: 'category',
// y轴坐标白色
axisLabel: {
color:'#fff'
},
data:['厦门第一医院','厦门中山医院','厦门中医院','厦门第五医院'],
inverse:true,
axisTick:{
alignWithLabel:true,
show:false
},
axisLine:{
show:false
},
axisLabel:{
align:'right',
textStyle:{
fontSize:12,
color:"#fff"
},
//配置序号背景
rich:{
a1:{
backgroundColor:"#399523",
color:"white",
borderRadius:50,//圆形背景
width:18,
height:18,
align:'center'
},
a2:{
backgroundColor:"#399523",
color:"white",
borderRadius:50,
width:18,
height:18,
align:'center'
},
a3:{
backgroundColor:"#399523",
color:"white",
borderRadius:50,
width:18,
height:18,
align:'center'
},
a4:{
backgroundColor:"#399523",
color:"white",
borderRadius:50,
width:18,
height:18,
align:'center'
},
},
formatter:function(params,index){
var leftIndex=index+1;
if(leftIndex<5){
return ["{a" + leftIndex + "|" + leftIndex + "}" + " "+params].join(
"\n"
);
}
}
}
},
// y轴右侧
{
type: 'category',
axisLabel: {
color:'#fff'
},
data: [4000, 3000, 2000, 1000],
inverse:true,//数组翻转显示
axisTick: {
alignWithLabel: true,
show:false
},
axisLine:{
show:false//不显示y轴的线
},
},
],
series: [
{
name:'各门诊人数',
type:'bar',
yAxisIndex:0,
data:[4000,3000,2000,1000],
barWidth:'20%',
label:{
show:true,
formatter:function(params){
return params.data/100+'%';
}
},
itemStyle:{
borderRadius:5,
color:function(params){
return lineColor[params.dataIndex]
}
},
},
{
name:'',
type:'bar',
yAxisIndex:1,//使两个柱状图重合
barWidth:'30%',
data:[10000,10000,10000,10000],
label:{
show:false
},
itemStyle:{
color:"none",
borderColor:"#31c1dc",
borderWidth:2,
borderRadius:5,
},
}
]
};
option && myChart.setOption(option);
</script>
<script type="text/javascript">
var chartDom = document.getElementById('chart2');
var myChart = echarts.init(chartDom);
var option;
var lineColor=["#3689e4","#f07673","#65cfe0","#fbe0ae"];
option = {
title: {
text: '各医院住院人次(人)',
left:'center',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'item',
axisPointer: {
type: 'line'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '10%',
containLabel: true
},
xAxis: {
type: 'value',
splitLine:{//坐标轴在grid区域的分割线
show:false
},
axisLabel:{
show:false
},
axisLine:{
show:false
}
},
yAxis: [
{
type: 'category',
// y轴坐标白色
axisLabel: {
color:'#fff'
},
data:['厦门第一医院','厦门中山医院','厦门中医院','厦门第五医院'],
inverse:true,
axisTick:{
alignWithLabel:true,
show:false
},
axisLine:{
show:false
},
axisLabel:{
align:'right',
textStyle:{
fontSize:12,
color:"#fff"
},
//配置序号背景
rich:{
a1:{
backgroundColor:"#399523",
color:"white",
borderRadius:50,//圆形背景
width:18,
height:18,
align:'center'
},
a2:{
backgroundColor:"#399523",
color:"white",
borderRadius:50,
width:18,
height:18,
align:'center'
},
a3:{
backgroundColor:"#399523",
color:"white",
borderRadius:50,
width:18,
height:18,
align:'center'
},
a4:{
backgroundColor:"#399523",
color:"white",
borderRadius:50,
width:18,
height:18,
align:'center'
},
},
formatter:function(params,index){
var leftIndex=index+1;
if(leftIndex<5){
return ["{a" + leftIndex + "|" + leftIndex + "}" + " "+params].join(
"\n"
);
}
}
}
},
// y轴右侧
{
type: 'category',
axisLabel: {
color:'#fff'
},
data: [2200, 2400, 2600, 2800],
inverse:true,//数组翻转显示
axisTick: {
alignWithLabel: true,
show:false
},
axisLine:{
show:false//不显示y轴的线
},
},
],
series: [
{
name:'各门诊人数',
type:'bar',
yAxisIndex:0,
data:[2200, 2400, 2600, 2800],
barWidth:'20%',
label:{
show:true,
formatter:function(params){
return params.data/100+'%';
}
},
itemStyle:{
borderRadius:5,
color:function(params){
return lineColor[params.dataIndex]
}
},
},
{
name:'',
type:'bar',
yAxisIndex:1,//使两个柱状图重合
barWidth:'30%',
data:[10000,10000,10000,10000],
label:{
show:false
},
itemStyle:{
color:"none",
borderColor:"#31c1dc",
borderWidth:2,
borderRadius:5,
},
}
]
};
option && myChart.setOption(option);
</script>
<script type="text/javascript">
var chartDom = document.getElementById('chart3');
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text: '各医院医疗费用(元)',
left:'center',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
textStyle: {
color: '#fff'
},
data: ['厦门第一医院', '厦门中山医院', '厦门中医院', '厦门第五医院'],
bottom:'0%'
},
grid: {
left: '3%',
right: '4%',
bottom: '15%',
containLabel: true
},
xAxis: [
{
type: 'category',
axisLabel: {
rotate: 35,//横坐标文字倾斜度数
color:'#fff'
},
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
yAxis: [
{
splitLine:false,//取消横线
type: 'value',
axisLabel: {
formatter:"{value}元",
color:'#fff'
},
data:[0,300,600,900,1200,1500]
}
],
series: [
{
name: '厦门第一医院',
type: 'line',
// stack: 'Total',
areaStyle: {},//面积阴影
emphasis: {
focus: 'series'
},
smooth:true,
data: [0, 1, 5, 10, 200, 800, 700]
},
{
name: '厦门中山医院',
type: 'line',
// stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
smooth:true,
data: [0, 200, 450, 750, 400, 30, 0]
},
{
name: '厦门中医院',
type: 'line',
// stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
smooth:true,
data: [1300,1100,600,200,100,90,2]
},
{
name: '厦门第五医院',
type: 'line',
// stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
smooth:true,
data: [310,180,10,9,2,1,0]
},
]
};
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: {
color: '#fff'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
textStyle: {
color: '#fff'
},
data: ['厦门第一医院', '厦门中山医院', '厦门中医院', '厦门第五医院'],
bottom:'0%'
},
grid: {
left: '3%',
right: '4%',
bottom: '15%',
containLabel: true
},
xAxis: [
{
type: 'category',
axisLabel: {
rotate: 35,//横坐标文字倾斜度数
color:'#fff'
},
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
yAxis: [
{
splitLine:false,//取消横线
type: 'value',
axisLabel: {
formatter:"{value}元",
color:'#fff'
},
data:[0,100,200,300,400,500,600,700]
}
],
series: [
{
name: '厦门第一医院',
type: 'line',
// stack: 'Total',
areaStyle: {},//面积阴影
emphasis: {
focus: 'series'
},
smooth:true,
data: [120,125,220,500,450,500,600]
},
{
name: '厦门中山医院',
type: 'line',
// stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
smooth:true,
data: [140,680,520,680,480,140,110]
},
{
name: '厦门中医院',
type: 'line',
// stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
smooth:true,
data: [320,130,150,120,100,200,120
]
},
{
name: '厦门第五医院',
type: 'line',
// stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
smooth:true,
data: [320,120,450,50,200,100,250]
},
]
};
option && myChart.setOption(option);
var chartDom = document.getElementById('chart6');
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text:'平均住院天数(天)',//标题
left:'center',//居中
show:true,
textStyle: {
color: '#fff',
},
},
xAxis: {
type: 'category',
axisLabel: {
rotate: 35,//横坐标文字倾斜度数
color:'#fff'
},
data: ['厦门第一医院', '厦门中山医院', '厦门中医院', '厦门第五医院']
},
yAxis: {
splitLine:false,//取消横线
type: 'value',
axisLabel: {
formatter:"{value}天",
color:'#fff'
},
data:[0,2,4,6,8]
},
series: [
{
data: [6,8,7,5],
itemStyle:{
color:'#8ecefa'
},
type: 'bar'
}
]
};
option && myChart.setOption(option);
option && myChart.setOption(option);
var chartDom = document.getElementById('chart5');
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text:'占药比(%)',//标题
left:'center',//居中
show:true,
textStyle: {
color: '#fff',
},
},
xAxis: {
type: 'category',
axisLabel: {
rotate: 35,//横坐标文字倾斜度数
color:'#fff'
},
data: ['厦门第一医院', '厦门中山医院', '厦门中医院', '厦门第五医院']
},
yAxis: {
splitLine:false,//取消横线
type: 'value',
axisLabel: {
formatter:"{value}%",
color:'#fff'
},
data:[0,20,40,60,80]
},
series: [
{
data: [60,80,75,50],
itemStyle:{
color:'#8ecefa'
},
type: 'bar'
}
]
};
option && myChart.setOption(option);
var chartDom = document.getElementById('chart7');
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text:'手术工作量(台)',//标题
left:'center',//居中
show:true,
textStyle: {
color: '#fff',
},
},
//文字颜色跟随
label:{
color:'inherit'
},
series: [
{
name: 'Nightingale Chart',
type: 'pie',
radius: [25, 100],
center: ['50%', '50%'],
roseType: 'area',
itemStyle: {
borderRadius: 1
},
color:['#8ecefa','#fc804d','#39cd32','#d972d6'],
data: [
{ value: 15, name: '厦门第一医院' },
{ value: 8, name: '厦门中山医院' },
{ value: 20, name: '厦门中医院' },
{ value: 30, name: '厦门第五医院' }
]
}
]
};
option && myChart.setOption(option);
option && myChart.setOption(option);
var chartDom = document.getElementById('chart8');
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text:'床位数量分布(床)',//标题
left:'center',//居中
show:true,
textStyle: {
color: '#fff',
},
},
//文字颜色跟随
label:{
color:'inherit'
},
series: [
{
name: 'Nightingale Chart',
type: 'pie',
radius: [25, 100],
center: ['50%', '50%'],
roseType: 'area',
itemStyle: {
borderRadius: 1
},
color:['#8ecefa','#fc804d','#39cd32','#d972d6'],
data: [
{ value: 30, name: '厦门第一医院' },
{ value: 20, name: '厦门中山医院' },
{ value: 8, name: '厦门中医院' },
{ value: 15, name: '厦门第五医院' }
]
}
]
};
option && myChart.setOption(option);
</script>
</body>
</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="jquery.js"></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;
}
table{
height: 100%;
width: 100%;
}
th{
color: #fff;
}
td{
text-align: center;
color: #fff;
}
.pagination{
bottom: 0%;
text-align: center;
}
tr{
line-height: 70px;
}
.data{
width: 100%;
height: 90%;
border: 5px,solid,#0680f9;
}
/* .trdh{
background-color: rgb(3, 97, 190);
}
.oushu{
background-color: rgb(3, 97, 190);
} */
tr:nth-child(odd) {
background-color: blue;
}
tr:nth-child(even) {
background-color: #02067f;
}
</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>
<search>
<!-- <form action="./search/"> -->
<!-- <label for="movie">查找电影</label> -->
<input type="search" id="movie" name="q" />
<button type="submit">搜索</button>
<!-- </form> -->
</search>
</header>
<table id="dataTable">
<thead>
<tr
class="trdh">
<th>序号</th>
<th>姓名</th>
<th>慢病</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 这里可以用动态数据填充表格行 -->
<tr class="jishu">
<td>数据 1</td>
<td>数据 2</td>
<td>数据 3</td>
<td><button>查看</button></td>
</tr>
<tr class="oushu">
<td>数据 4</td>
<td>数据 5</td>
<td>数据 6</td>
<td><button>查看</button></td>
</tr>
<!-- 根据实际情况添加更多行 -->
</tbody>
</table>
<div class="pagination">
<button id="firstPageButton" disabled>首页</button>
<button id="prevPageButton">上一页</button>
<!-- 这里添加页码按钮的容器 -->
<div id="pageButtonsContainer"></div>
<button id="nextPageButton">下一页</button>
<button id="lastPageButton">尾页</button>
</div>
<script>
// 模拟数据总量
const totalDataCount = 54;
// 每页显示的数据条数
const pageSize = 9;
// 当前页码
let currentPage = 1;
// 总页数
const totalPages = Math.ceil(totalDataCount / pageSize);
// 更新表格数据
function updateTableData() {
const tableBody = document.getElementById('dataTable').getElementsByTagName('tbody')[0];
tableBody.innerHTML = '';
const startIndex = (currentPage - 1) * pageSize;
const endIndex = Math.min(startIndex + pageSize, totalDataCount);
for (let i = startIndex; i < endIndex; i++) {
const row = tableBody.insertRow();
for (let j = 1; j <= 3; j++) {
const cell = row.insertCell(j - 1);
// cell.textContent = `数据 ${i + 1}-${j}`;
cell.textContent = `${i,j}`;
}
const buttonCell = row.insertCell(3);
const button = document.createElement('button');
button.textContent = '查看';
buttonCell.appendChild(button);
}
// 应用行颜色交替样式
const rows = tableBody.getElementsByTagName('tr');
for (let j = 0; j < rows.length; j++) {
rows[j].classList.toggle('even-row', j % 2 === 0);
rows[j].classList.toggle('odd-row', j % 2 === 1);
}
}
// 更新分页按钮状态
function updatePaginationButtons() {
const firstPageButton = document.getElementById('firstPageButton');
const prevPageButton = document.getElementById('prevPageButton');
const nextPageButton = document.getElementById('nextPageButton');
const lastPageButton = document.getElementById('lastPageButton');
firstPageButton.disabled = currentPage === 1;
prevPageButton.disabled = currentPage === 1;
nextPageButton.disabled = currentPage === totalPages;
lastPageButton.disabled = currentPage === totalPages;
// 隐藏首页按钮
if (currentPage === 1) {
firstPageButton.style.display = 'none';
} else {
firstPageButton.style.display = 'inline-block';
}
// 隐藏尾页按钮
if (currentPage === totalPages) {
lastPageButton.style.display = 'none';
} else {
lastPageButton.style.display = 'inline-block';
}
// 更新页码按钮
const pageButtonsContainer = document.getElementById('pageButtonsContainer');
pageButtonsContainer.innerHTML = '';
for (let i = 1; i <= totalPages; i++) {
const pageButton = document.createElement('button');
pageButton.textContent = i;
if (i === currentPage) {
pageButton.classList.add('active');
}
pageButton.addEventListener('click', () => {
currentPage = i;
updateTableData();
updatePaginationButtons();
});
pageButtonsContainer.appendChild(pageButton);
}
}
// 首页按钮点击事件
document.getElementById('firstPageButton').addEventListener('click', () => {
currentPage = 1;
updateTableData();
updatePaginationButtons();
});
// 上一页按钮点击事件
document.getElementById('prevPageButton').addEventListener('click', () => {
if (currentPage > 1) {
currentPage--;
updateTableData();
updatePaginationButtons();
}
});
// 下一页按钮点击事件
document.getElementById('nextPageButton').addEventListener('click', () => {
if (currentPage < totalPages) {
currentPage++;
updateTableData();
updatePaginationButtons();
}
});
// 尾页按钮点击事件
document.getElementById('lastPageButton').addEventListener('click', () => {
currentPage = totalPages;
updateTableData();
updatePaginationButtons();
});
// 初始加载数据和按钮状态
updateTableData();
updatePaginationButtons();
</script>
</body>
</html>
版本 Profiler 工具变动 "Android Studio 2024.1.1(Koloa)版本 Profiler 工具变动")
