echart实现睡眠前台代码

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="sleep.aspx.cs" Inherits="sleep" %>

<%@ Register Src="UC/UCAlert.ascx" TagName="UCAlert" TagPrefix="UCAlert" %>
<%@ Register Src="~/UC/UCFoot.ascx" TagName="UCFoot" TagPrefix="UCFoot" %>
<%@ Register Src="~/UC/UCScroll.ascx" TagName="UCScroll" TagPrefix="UCScroll" %>
<%@ Register Src="UC/UCCheck.ascx" TagName="UCCheck" TagPrefix="UCCheck" %>
<%@ Register Src="~/UC/UCVoice.ascx" TagName="UCVoice" TagPrefix="UCVoice" %>
<%@ Register Src="~/UC/UCVoiceButton.ascx" TagName="UCVoiceButton" TagPrefix="UCVoiceButton" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>睡眠</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/weui.css">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/alert.css">
<script src="js/adaptive.js"></script>
<script src="js/jquery-1.8.3.js"></script>
<script src="js/jquery-weui.min.js"></script>
<script src="js/date.js"></script>
<script src="js/alert.js"></script>
<script src="js/main.js"></script>
<script src="js/dropload.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript"></script>
<script type="text/javascript" src="js/WXInterfaceHelper.js"></script>
</head>
<input type="hidden" id="vRole" value="<%=voiceRole %>" />
<input type="hidden" id="tRole" value="<%=TextRole %>" />
<input type="hidden" id="pRole" value="<%=PicRole %>" />
<script src="js/InitVoiceMsg.js" type="text/javascript"></script>
<body>
<form id="Form2" runat="server">
<UCAlert:UCAlert ID="UCAlert" runat="server" />
<UCCheck:UCCheck ID="UCCheck" runat="server" />
</form>
<div class="wrapper01">
<div class="m-date03">
<ul class="m-date-tab">
<li class="on" onclick="daystatic(1)">日</li>
<li onclick="daystatic(2)">周</li>
</ul>
</div>
<div class="m-center05">
<div class="m-chart01">
<div class="chart-con01">
<div class="m-date04">
<a href="javascript:;" class="today" onclick="today()">今天</a>
<input id="date" class="date01 date02" type="button">
<label for="date" class="date_icon">
</label>
<input type="hidden" id="device" value="<%=Request["deviceID"] %>" />
<input type="hidden" id="VoiceOneSecond" value="<%=VoiceOneSecond %>" />
<input type="hidden" id="Secs" value="<%=Secs %>" />
<input type="hidden" id="dType" value="6" />
<input type="hidden" id="timeslot" onclick="subDate()" value="<%=ProUtil.getTimeSlot(DateTime.Now.Hour/5) %>" />
</div>
<ul class="m-legend">
<li class="legend-con"><span class="legend-color01"></span>深睡 </li>
<li class="legend-con"><span class="legend-color02"></span>浅睡 </li>
<li class="legend-con"><span class="legend-color03"></span>清醒 </li>
</ul>
<div class="chart03" id="sleep-day">
</div>
<div class="m-report01">
<span class="report_tit01">运动检查报告单 </span>
<div class="report_txt_con">
<div class="report_txt">
<span id="span_deepTime">深睡： 0小时 </span>
</div>
<div class="report_txt">
<span id="span_ligthTime">浅睡： 0小时 </span><span id="span_wakeTime">清醒： 0小时 </span>
</div>
</div>
</div>
</div>
<div class="chart-con01">
<div class="m-date04">
<div class="date_slide02" id="slide_box02">
<input type="hidden" id="HBeginTime" value="<%=DateTime.Now.AddDays(-6).ToString("yyyy-MM-dd") %>" />
<input type="hidden" id="HEndTime" value="<%=DateTime.Now.ToString("yyyy-MM-dd") %>" />
<a href="javascript:Addday('prev');" class="prev">
<img src="images/prev_01.png">
</a>
<div class="m-scroll_list">
<ul>
<li id="li_time">
<%=DateTime.Now.AddDays(-6).ToString("yyyy-MM-dd") %>
~
<%=DateTime.Now.ToString("yyyy-MM-dd") %>
</li>
</ul>
</div>
<a href="javascript:Addday('next');" class="next">
<img src="images/next_01.png">
</a>
</div>
<script type="text/javascript">
function Addday(tag) {
var HBeginTime = $("#HBeginTime").val();
var HEndTime = $("#HEndTime").val();
var begintime1;
var endtime1;
if (tag == "prev") {
begintime1 = getAfterDate(HBeginTime, -6); //6天前的日期
endtime1 = getAfterDate(HEndTime, -6); //6天前的日期
}
else if (tag == "next") {
begintime1 = getAfterDate(HBeginTime, 6); //6天后的日期
endtime1 = getAfterDate(HEndTime, 6); //6天后的日期

}
$("#li_time").html("");
$("#li_time").html(begintime1 + "~" + endtime1);
$("#HBeginTime").val(begintime1);
$("#HEndTime").val(endtime1);
loadWeekData(begintime1, endtime1);
}
//计算N天后的时间
function getAfterDate(d, n) {
var test = ConvertgetDate(d);
var year = test.getFullYear();
var mon = test.getMonth() + 1;
var day = test.getDate();
if (day <= n) {
if (mon > 1) {
mon = mon - 1;
}
else {
year = year - 1;
mon = 12;
}
}
test.setDate(test.getDate() + n);
year = test.getFullYear();
mon = test.getMonth() + 1;
day = test.getDate();
s = year + "-" + (mon < 10 ? ('0' + mon) : mon) + "-" + (day < 10 ? ('0' + day) : day);
return s;
}
function ConvertgetDate(strDate) {
var date = eval('new Date(' + strDate.replace(/d+(?=-[^-]+$)/,
function (a) { return parseInt(a, 10) - 1; }).match(/d+/g) + ')');
return date;
}
</script>
</div>
<ul class="m-legend">
<li class="legend-con"><span class="legend-color01"></span>深睡 </li>
<li class="legend-con"><span class="legend-color02"></span>浅睡 </li>
<li class="legend-con"><span class="legend-color03"></span>清醒 </li>
</ul>
<div class="chart03" id="sleep-week">
</div>
</div>
</div>

<div class="m-sleep-tip">
<span class="report_tit01">睡眠小贴士 </span>
<div class="report_txt_con">
<div class="sleep-tip_txt">
<p>
1、睡眠不要太晚</p>
<p>
2、早睡有益身心健康</p>
<p>
3、睡前不要剧烈运动，营造良好睡眠环境</p>
</div>
</div>
</div>

<div class="m-message" id="message">
<ul class="lists">
</ul>
</div>
</div>

<%--update/2021/1/11--%>
<UCVoice:UCVoice ID="UCVoice" runat="server" />

<UCFoot:UCFoot ID="UCFoot" runat="server" />

<UCVoiceButton:UCVoiceButton ID="UCVoiceButton" runat="server" />

</div>
<script src="js/echarts-all.js"></script>
<script src="js/macarons.js"></script>
</body>
</html>
<script type="text/javascript">
//查找数组元素位置
Array.prototype.contains = function (obj) {
var i = this.length;
while (i--) {
if (this[i] === obj) {
return i;
}
}
return -1;
}
var myChart = echarts.init(document.getElementById('sleep-day'), e_macarons)
var option = {
tooltip: { trigger: 'axis'
},
toolbox: {
show: false
},
grid: {
left: '5%',
right: '5%'
},
calculable: false,
xAxis: {
type: 'category',
boundaryGap: true,
axisLabel: {
fontSize: 20,
interval: 0
}
},
yAxis: [{
type: 'value',
show: false
}]
};
$(document).on("click", ".picker-calendar-day", function () {
var date = $("#date").val();
subDate(date);
});
//提交睡眠请求
var subDate = function (currentTime) {
var id = $("#device").val();
// var date = $("#date").val();
var beginTime = currentTime ;
var endTime = currentTime;
var xaxis = new Array("23:00","00:00","01:00","02:00","03:00","04:00","05:00","06:00","07:00");

$.ajax({
type: "post",
dataType: 'json',
url: "/Handler/DeviceHandler.ashx",
data: { otype: "chart", chart: "sleep",sleepType:"day","device": id, "begintime": beginTime, "endtime": endTime },
success: function (result) {
if (result.statusCode == 10000) {
var res = JSON.parse(result.Data);
if (res.Return) {
var datas = new Array();
var legends = new Array();
for (var i = 0; i < res.Data.length; i++) {
var data = {
name: res.Data[i].name,
type: res.Data[i].type,
smooth: true,
data: res.Data[i].sleepdata,//睡眠数据
};
datas[i] = data;
};
xaxis=res.sleeptimes;
myChart.setOption(option);
myChart.setOption({ series: datas, xAxis: {data:xaxis} });
$("#span_deepTime").text("深睡： "+res.sleepDeep+"小时");
$("#span_ligthTime").text("浅睡： "+res.sleepLight+"小时");
$("#span_wakeTime").text("清醒： " + res.sleepWake+"小时");
} else {
$("#span_deepTime").text(" 深睡： 0 ");
$("#span_ligthTime").text("浅睡： 0");
$("#span_wakeTime").text("清醒：0");
myChart.setOption(option);
myChart.setOption({ series: [{
name: '睡眠质量',
type: 'bar',
barCategoryGap: "0%",
data: []
}], xAxis: {data:xaxis},
yAxis: [{
type: 'value',
// name: '心率(BMP)',
min: 0,
max: 8,
splitNumber: 10,
axisLabel: {
interval: 0
}
}]
});

}
}
else {
showTip(result.Message, 2000, function () { window.location.href ="index.aspx"});
}
}
});
}
var HEndTime=$("#HEndTime").val();
subDate(HEndTime);
</script>
<script type="text/javascript">
var option2 = {
xAxis: {
type: 'category',

axisLabel: {
fontSize: 20,
interval: 0
}
},
yAxis: {
type: 'value',
min: 0,
max: 12,
axisLabel: {
fontSize: 20,
formatter: '{value} h'
}
},
grid: {
left: '9%',
right: '5%'
}
};

var myChart2 = echarts.init(document.getElementById('sleep-week'), e_macarons)
var id = $("#device").val();

function daystatic(tagid) {
if (tagid == 2) {
loadWeekData($("#HBeginTime").val(), $("#HEndTime").val());
}
}

}
}
else {
showTip(result.Message, 2000, function () { window.location.href = "index.aspx" });
}
}
});

}

</script>
<script type="text/javascript">
$(function () {
InitVoiceMessage("yundong", '<%=deviceID %>'); //传2个参数:留言类型和设备ID
});
//公众号图片上传
var ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) != 'micromessenger') {
//H5浏览器';
//showTip("只能在微信中上传留言图片", 3000);
} else {
//是微信浏览器
$('#chat-tuxiang').attr('onclick', "avatarUpload('txtImg','yundong')");
}
</script>