<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>患者群组</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- js引用 -->
<script src="../../js/config.js"></script>
<script src="../../js/h5toapp.js"></script>
<script src="../../js/h5to.js"></script>
<!-- 组件js引用 -->
<script src="../../js/mui.min.js"></script>
<!-- ç»„ä»¶æ ‡å‡†css引用 -->
<link rel="stylesheet" href="../../css/mui.min.css">
<!-- css引用 -->
<link href="../../css/currency.css" rel="stylesheet">
<link href="../../css/spinkit.css" rel="stylesheet">
<link href="../../css/icon/iconfont.css" rel="stylesheet">
<!-- ç•Œé¢æœ¬èº«css引用 -->
<link href="./hzqzfb.css" rel="stylesheet">
<style type="text/css">
</style>
</head>
<body>
<div style="background-color: #F9FAFC; height: 100vh; width: 100%; margin: 0; overflow: auto;">
<div id="loading" class="example">
<div class="sk-plane loading_location"></div>
</div>
<div class="mui-content">
<div style="padding: 24px 16px 8px 16px;">
<div class="head_bar">
<div id="sex_bar" class="head_bar_sel" onclick="click_headBar(this)" >性别</div>
<div id="age_bar" class="head_bar_txt" onclick="click_headBar(this)" >年龄</div>
<div id="province_bar" class="head_bar_txt" onclick="click_headBar(this)" >çœä»½</div>
</div>
</div>
<div id="item1" style="display: block;">
<div style="margin: 16px; box-sizing: border-box;">
<div class="mui-card" style="border-radius: 24px;">
<div id="sex_percentage" style="height:240px;margin: 8px 16px 8px 16px;border-radius: 8px;"></div>
</div>
</div>
</div>
<div id="item2" style="display: none;">
<div style="margin: 16px; box-sizing: border-box;">
<div class="mui-card" style="border-radius: 24px;">
<div id="main" style="height:240px;margin: 8px 16px 8px 16px;border-radius: 8px;"></div>
</div>
</div>
<div style="margin: 16px; box-sizing: border-box;">
<div class="mui-card" style="border-radius: 24px;">
<div id="main1" style="height:355px;margin: 8px 16px 8px 16px;border-radius: 8px;"></div>
</div>
</div>
</div>
<div id="item3" style="display: none;">
<div style="margin: 16px; box-sizing: border-box;">
<div class="mui-card" style="border-radius: 24px;">
<div id="map" style="height:240px;margin: 8px 16px;border-radius: 8px;"></div>
</div>
</div>
<div style="margin: 16px; box-sizing: border-box;">
<div class="mui-card" style="border-radius: 24px;">
<div id="province" style="height:355px;margin: 8px 16px 8px 16px;border-radius: 8px;"></div>
</div>
</div>
</div>
</div>
</div>
<script src="../../js/echarts.min.js"></script>
<script src="../../js/china.js"></script>
<script type="text/javascript">
mui.init({
swipeBack: true //å¯ç”¨å³æ»‘å…³é—功能
});
//1. data
var personInfo = {
};
window.dataList = [{
name: '安徽',
value: 5498
}, {
name: '澳门',
value: 0
}, {
name: '北京',
value: 0
}, {
name: 'ç¦å»º',
value: 4111
}, {
name: '甘肃',
value: 59
}, {
name: '广东',
value: 1928
}, {
name: '广西',
value: 4
}, {
name: '贵州',
value: 52
}, {
name: 'æµ·å—',
value: 1284
}, {
name: '河北',
value: 3151
}, {
name: 'æ²³å—',
value: 3814
}, {
name: '黑龙江',
value: 316
}, {
name: '湖北',
value: 1724
}, {
name: 'æ¹–å—',
value: 33378
}, {
name: 'å‰æž—',
value: 520
}, {
name: '江è‹',
value: 113
}, {
name: '江西',
value: 961
}, {
name: 'è¾½å®',
value: 139
}, {
name: '内蒙å¤',
value: 0
}, {
name: 'å®å¤',
value: 60
}, {
name: 'é’æµ·',
value: 0
}, {
name: '山东',
value: 106
}, {
name: '山西',
value: 0
}, {
name: '陕西',
value: 114
}, {
name: '上海',
value: 1321
}, {
name: 'å››å·',
value: 7867
}, {
name: 'å°æ¹¾',
value: 0
}, {
name: '天津',
value: 1157
}, {
name: '西è—',
value: 14
}, {
name: '香港',
value: 0
}, {
name: 'æ–°ç–†',
value: 115
}, {
name: '云å—',
value: 3811
}, {
name: '浙江',
value: 0
}, {
name: 'é‡åº†',
value: 886
}];
var myChart3 = echarts.init(document.getElementById('sex_percentage'));
var option3 = {
tooltip: {
formatter: '{a} <br/>{b} : {c}%'
},
series: [
{
type: 'gauge',
id: 'sex1',
name: 'ç”·',
startAngle: 210,
endAngle: -30,
min: 0,
max: 100,
radius: '50%',
center: ['25%', '50%'],
splitNumber: 10,
progress: {
show: true,
roundCap: true,
width: 8,
itemStyle: {
borderColor: '#fe9870',
color: '#fe9870',
}
},
pointer: {
show: false,
icon: 'iconjian',
z:10,
length: '10%',
width: 50,
offsetCenter: [0, '-90%'],
itemStyle: {
color: '#aaa',
borderWidth: 2,
borderColor: '#fff'
}
},
axisLine: {
roundCap: true,
lineStyle: {
width: 8
}
},
axisTick: {
distance: 2,
length: 2,
splitNumber: 10,
lineStyle: {
width: 1,
color: '#999'
}
},
splitLine: {
distance: 2,
length: 4,
lineStyle: {
width: 2,
color: '#999'
}
},
axisLabel: {
show: false,
distance: 30,
color: '#999',
fontSize: 20
},
title: {
show: true,
fontSize: 12,
fontWeight: 100,
fontFamily: "Arial",
color: '#9393aa',
offsetCenter: [0, '10%']
},
detail: {
width: '60%',
offsetCenter: [0, '-20%'],
valueAnimation: false,
formatter: function (value) {
return '{value|' + value.toFixed(0) + '}{aaa|%}';
},
rich: {
value: {
fontSize: 12,
fontWeight: 'bolder',
color: '#494949'
},
aaa: {
fontSize: 12,
color: '#494949',
padding: [0, 0, 0, 2]
}
}
},
data: [{
value: 40,
name: '男性å 比'
}]
},
{
type: 'gauge',
id: 'sex2',
name: '女',
startAngle: 210,
endAngle: -30,
min: 0,
max: 100,
radius: '50%',
center: ['75%', '50%'],
splitNumber: 10,
progress: {
show: true,
roundCap: true,
width: 8,
itemStyle: {
borderColor: '#21d197',
color: '#21d197',
}
},
pointer: {
show: false,
icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
z:10,
length: '10%',
width: 50,
offsetCenter: [0, '-90%'],
itemStyle: {
color: 'auto'
}
},
axisLine: {
roundCap: true,
lineStyle: {
width: 8
}
},
axisTick: {
distance: 2,
length: 2,
splitNumber: 10,
lineStyle: {
width: 1,
color: '#999'
}
},
splitLine: {
distance: 2,
length: 4,
lineStyle: {
width: 2,
color: '#999'
}
},
axisLabel: {
show: false,
distance: 30,
color: '#999',
fontSize: 20
},
title: {
show: true,
fontSize: 12,
fontWeight: 100,
fontFamily: "Arial",
color: '#9393aa',
offsetCenter: [0, '10%']
},
detail: {
width: '60%',
offsetCenter: [0, '-20%'],
valueAnimation: false,
formatter: function (value) {
return '{value|' + value.toFixed(0) + '}{aaa|%}';
},
rich: {
value: {
fontSize: 12,
fontWeight: 'bolder',
color: '#494949'
},
aaa: {
fontSize: 12,
color: '#494949',
padding: [0, 0, 0, 2]
}
}
},
data: [{
value: 80,
name: '女性å 比'
}]
},
]
};
myChart3.setOption(option3);
setRouteParams({userId: "1285860235186212865",params: {"doctorId": "1285860235186212865","isFriend":true}});
function initPage() {
hideloading('loading');
}
function loadData() {
ajaxGet('doctor/api/query/' + login_data.params.doctorId, function(result) {
if (result) {
console.info(result);
personInfo = result.data
}
doLoadData();
hideloading("loading");
});
}
function click_headBar(e) {
if(e.id == "sex_bar"){
document.getElementById('age_bar').classList.replace('head_bar_sel','head_bar_txt');
document.getElementById('province_bar').classList.replace('head_bar_sel','head_bar_txt');
document.getElementById('sex_bar').classList.replace('head_bar_txt','head_bar_sel');
document.getElementById('item2').style.display = 'none';
document.getElementById('item3').style.display = 'none';
document.getElementById('item1').style.display = 'block';
}else if(e.id == "age_bar"){
document.getElementById('sex_bar').classList.replace('head_bar_sel','head_bar_txt');
document.getElementById('province_bar').classList.replace('head_bar_sel','head_bar_txt');
document.getElementById('age_bar').classList.replace('head_bar_txt','head_bar_sel');
document.getElementById('item1').style.display = 'none';
document.getElementById('item3').style.display = 'none';
document.getElementById('item2').style.display = 'block';
var myChart = echarts.init(document.getElementById('main'));
var option = {
//X轴上的数æ®
xAxis: [{
type: "category",
boundaryGap: false,
data: ["0-10", "11-20", "21-30", "31-40", "41-50", "51-60", "61-70", "71-80", "81-90", "91-100"],
splitLine: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: "rgb(239, 239, 239)",
width: 1
}
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
fontSize: 8,
color: "rgb(142, 144, 145)",
fontWeight: "lighter"
}
}
}],
yAxis: [{
type: "value",
max: 350,
min: 0,
axisLine: {
lineStyle: {
color: "rgb(239, 239, 239)",
width: 1
}
},
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "rgb(122, 143, 172)"
}
},
axisLabel: {
textStyle: {
fontSize: 8,
fontWeight: "lighter",
color: "rgb(142, 144, 145)"
}
}
}],
//é…置项
series: [{
type: "line",
data: [34, 78, 167, 188, 212, 154, 127, 107, 78, 158],
smooth: true,
}],
grid: {
x: 24,
y: 10,
y2: 20,
x2: 13,
borderWidth: 0
},
color: ["rgb(20, 149, 235)", "#87cefa", "#da70d6", "#32cd32", "#6495ed", "#ff69b4", "#ba55d3", "#cd5c5c",
"#ffa500", "#40e0d0", "#1e90ff", "#ff6347", "#7b68ee", "#00fa9a", "#ffd700", "#6699FF", "#ff6666", "#3cb371",
"#b8860b", "#30e0e0", "rgb(20, 149, 235)"
]
};
myChart.setOption(option);
var myChart1 = echarts.init(document.getElementById('main1'));
var option1 = {
//X轴上的数æ®
yAxis: [{
type: "category",
boundaryGap: false,
data: [ "91-100", "81-90", "71-80", "61-70", "51-60", "41-50", "31-40", "21-30", "11-20","0-10"],
splitLine: {
show: false
},
axisLine: {
show: false,
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
fontSize: 13,
color: "rgb(142, 144, 145)",
fontWeight: "lighter"
}
}
}],
xAxis: [{
show: false,
type: "value",
}],
//é…置项
series: [{
type: "bar",
data: [34, 78, 167, 188, 212, 154, 127, 107, 78, 158],
barCategoryGap: 16,
barWidth: 18,
itemStyle: {
normal: {
color: "rgb(33, 209, 151)",
label: {
show: true,
position: "right",
textStyle: {
color: "rgb(54, 63, 77)",
fontSize: 13
}
}
}
}
}],
grid: {
x: 54,
y: 20,
y2: 20,
x2: 13,
borderWidth: 0
},
};
myChart1.setOption(option1);
}else if(e.id == "province_bar") {
document.getElementById('age_bar').classList.replace('head_bar_sel','head_bar_txt');
document.getElementById('sex_bar').classList.replace('head_bar_sel','head_bar_txt');
document.getElementById('province_bar').classList.replace('head_bar_txt','head_bar_sel');
document.getElementById('item1').style.display = 'none';
document.getElementById('item2').style.display = 'none';
document.getElementById('item3').style.display = 'block';
var myChart2 = echarts.init(document.getElementById('province'));
var option2 = {
//X轴上的数æ®
yAxis: [{
type: "category",
boundaryGap: false,
data: [ "91-100", "81-90", "71-80", "61-70", "51-60", "41-50", "31-40", "21-30", "11-20","0-10"],
splitLine: {
show: false
},
axisLine: {
show: false,
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
fontSize: 13,
color: "rgb(142, 144, 145)",
fontWeight: "lighter"
}
}
}],
xAxis: [{
show: false,
type: "value",
}],
//é…置项
series: [{
type: "bar",
id: 'province_chart',
data: [34, 78, 167, 188, 212, 154, 127, 37, 48, 58],
barCategoryGap: 16,
barWidth: 18,
itemStyle: {
normal: {
color: "rgb(33, 209, 151)",
label: {
show: true,
position: "right",
textStyle: {
color: "rgb(54, 63, 77)",
fontSize: 13
}
}
}
}
}],
grid: {
x: 54,
y: 20,
y2: 20,
x2: 13,
borderWidth: 0
},
};
myChart2.setOption(option2);
var myChart4 = echarts.init(document.getElementById('map'));
var option4 = {
tooltip: {
triggerOn: "click",
formatter: function(e, t, n) {
return .5 == e.value ? e.name + "：患者分布" : e.seriesName + "<br />" + e.name + "：" + e.value
}
},
visualMap: {
min: 0,
max: 2000,
left: 26,
bottom: 50,
showLabel: !0,
text: ["高", "低"],
pieces: [{
gt: 10000,
label: "> 10000 件",
color: "#000080"
}, {
gte: 5000,
lte: 10000,
label: "5000 - 10000 件",
color: "#0000FF"
}, {
gte: 1000,
lte: 5000,
label: "1000 - 5000 件",
color: "#4169E1"
}, {
gte: 100,
lt: 1000,
label: "100 - 1000件",
color: "#6495ED"
}, {
gte: 1,
lt: 100,
label: "1 - 100件",
color: "#B0C4DE"
}, {
value: 0,
color: "#C0C0C0"
}],
show: false
},
geo: {
map: "china",
roam: !1,
scaleLimit: {
min: 1,
max: 2
},
zoom: 1.23,
top: 25,
itemStyle: {
normal: {
borderColor: "rgba(0, 0, 0, 0.2)"
},
emphasis: {
areaColor: "#f2d5ad",
shadowOffsetX: 0,
shadowOffsetY: 0,
borderWidth: 0
}
}
},
series: [{
name: "患者分布",
type: "map",
geoIndex: 0,
data: window.dataList
}]
};
myChart4.setOption(option4);
}
}
function click_row(row) {
var pam = {
_id: row._id,
params:{
userId: login_data.userId
}
};
app_click("route", pam, callback);
}
//展示数æ®
function doLoadData(){
// document.getElementById('doctorAvatar').src = personInfo.doctorAvatar;
}
//run
mui.ready(function() {
onInitReady(function() {
initPage();
loadData();
});
});
</script>
</body>
</html>