-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathblood_data.html
205 lines (193 loc) · 5.45 KB
/
blood_data.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECahrt 示例</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">
<!--标准mui.css-->
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<link href="css/mui.min.css" rel="stylesheet"/>
<script src="js/mui.min.js"></script>
<link href="css/blood/bs_main.css" rel="stylesheet"/>
<!-- <link rel="stylesheet" type="text/css" href="../css/app.css" /> -->
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<style>
.chart {
height: 200px;
margin: 0px;
padding: 0px;
}
h5 {
margin-top: 30px;
font-weight: bold;
}
h5:first-child {
margin-top: 15px;
}
</style>
<script>
if(window.localStorage){
var un = localStorage.getItem("username");
var pas = localStorage.getItem("password");
//alert(un+pas);
}else{alert("浏览不支持localStorage")}
</script>
<script>
$.ajax({
url:"http://203.195.148.111:8080/index/index/chartforp",
withCredentials:true,
data:{pna:un},
success: function(data){
var arr = data.split("|");
window.localStorage["a1"]=arr[0];
window.localStorage["a2"]=arr[1];
window.localStorage["a3"]=arr[2];
window.localStorage["a4"]=arr[3];
window.localStorage["a5"]=arr[4];
window.localStorage["a6"]=arr[5];
window.localStorage["a7"]=arr[6];
window.localStorage["b1"]=arr[7];
window.localStorage["b2"]=arr[8];
window.localStorage["b3"]=arr[9];
window.localStorage["b4"]=arr[10];
window.localStorage["b5"]=arr[11];
window.localStorage["b6"]=arr[12];
window.localStorage["b7"]=arr[13];
}
});
var a1 = localStorage.getItem("a1");
var a2 = localStorage.getItem("a2");
var a3 = localStorage.getItem("a3");
var a4 = localStorage.getItem("a4");
var a5 = localStorage.getItem("a5");
var a6 = localStorage.getItem("a6");
var a7 = localStorage.getItem("a7");
var b1 = localStorage.getItem("b1");
var b2 = localStorage.getItem("b2");
var b3 = localStorage.getItem("b3");
var b4 = localStorage.getItem("b4");
var b5 = localStorage.getItem("b5");
var b6 = localStorage.getItem("b6");
var b7 = localStorage.getItem("b7");
</script>
<script src="../js/mui.min.js"></script>
</head>
<body>
<header class="mui-bar mui-bar-nav" style=" background: lightskyblue;
height: 60px;">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #FFFFFF;
margin-top: 10px;"></a>
<h1 class="mui-title" style="font-size: x-large;
font-family:verdana;
top: 10px;">血糖统计</h1>
</header>
<br>
<div class="mui-content">
<div class="mui-content-padded">
</div>
<div class="mui-content-padded">
<h5>7天血糖和糖化血红蛋白值</h5>
<div class="chart" id="lineChart"></div>
<h5>血糖高低分布天数</h5>
<div class="chart" id="pieChart"></div>
</div>
</div>
<script src="js/echarts.min.js"></script>
<script>
var getOption = function(chartType) {
//利用三目判断根据图形的样式选取不同类型的数据，bar和line的数据格式相同，pie格式与前两者不同
var chartOption = chartType == 'pie' ? {
calculable: false,
series: [{
name: '访问来源',
type: 'pie',
radius: '70%',//管理图形大小占比的
center: ['50%', '50%'],//管理图形水平位置的
data: [{
value: 335,
name: '血糖正常'
}, {
value: 310,
name: '血糖偏低'
}, {
value: 234,
name: '血糖偏高'
}]
}]
} : {
legend: {//标题
data: ['糖化血红蛋白', '血糖值']
},
grid: {
x: 30,
x2: 30,
y: 30,
y2: 30
},
toolbox: {//工具箱
show: false,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
calculable: false,
//横纵轴刻度
xAxis: [{
type: 'category',
data: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
}],
yAxis: [{
name:'mmoll/L',
type: 'value',
},
{
name: '%',
type:'value'
}],
//显示数据 此处数据名的名称还要与标题的名称相对应，否则无法显示
series: [{
name: '糖化血红蛋白',
type: chartType,
yAxisIndex:1,
data: [2.0, 4.9, 7.0, 2.2, 2, 7, 13]
}, {
name: '血糖值',
type: chartType,
yAxisIndex:0,
data: [b1, b2, b3,b4, b5, b6, b7]
}]
};
return chartOption;
};
var byId = function(id) {
return document.getElementById(id);
};
var lineChart = echarts.init(byId('lineChart'));
lineChart.setOption(getOption('line'));
var pieChart = echarts.init(byId('pieChart'));
pieChart.setOption(getOption('pie'));
byId("echarts").addEventListener('tap',function(){
var url = this.getAttribute('data-url');
plus.runtime.openURL(url);
},false);
</script>
</body>
</html>