<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<title>结果趋势表格</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/echarts.min.js"></script>
<style type="text/css">
.w5 {
width: 50px;
}
.w10 {
width: 80px;
}
.t-r {
text-align: right;
}
.t-d {
padding-bottom: 5px;
}
.m-b {
margin-left: 10px;
}
.chart-m {
width: 360px;
height: 260px;
float: left;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="bg-info">
<form method="post" id="formLuck" action="#" style="padding: 30px 10px;">
<div class="t-d">
<label class="w10 t-r">最近期数：</label>
<select id="period" class="w10">
<option value="100">100</option>
<option value="50">50</option>
<option value="30">30</option>
<option value="10">10</option>
</select>
</div>
<div class="t-d">
<label class="w10 t-r">号码个数：</label>
<select id="limit" class="w10">
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7" selected>7</option>
<option value="8">8</option>
</select>
</div>
<div class="t-d">
<label class="w10 t-r">命中位置：</label>
<label class="w5"><input type="checkbox" id="p1" checked> A </label>
<label class="w5"><input type="checkbox" id="p2"> B </label>
<label class="w5"><input type="checkbox" id="p3" checked> C </label>
<label class="w5"><input type="checkbox" id="p4"> D </label>
</div>
<a href="javascript:start()" class="btn btn-danger block full-width m-b">提交</a>
</form>
</div>
<div style="width: 100%;">
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="mainA" class="chart-m"></div>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="mainB" class="chart-m"></div>
</div>
<div style="width: 100%;">
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="mainC" class="chart-m"></div>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="mainD" class="chart-m"></div>
</div>
<div class="zhong">
<table class="table table-hover">
<caption class="z-nums">命中列表</caption>
<thead>
<tr>
<th>序号</th>
<th>期数</th>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
</tr>
</thead>
<tbody class="t-body">
</tbody>
</table>
</div>
</div>
<script>
$(document).ready(function () {
start()
})
// 基于准备好的dom，初始化echarts实例
var chartA = echarts.init(document.getElementById('mainA'));
var chartB = echarts.init(document.getElementById('mainB'));
var chartC = echarts.init(document.getElementById('mainC'));
var chartD = echarts.init(document.getElementById('mainD'));
function start() {
if ($('#period').val() == '') {
alert('期数不能为空')
return
} else if ($('#limit').val() == '') {
alert('长度不能为空')
return
} else if (!$('#p1').is(':checked') && !$('#p2').is(':checked') && !$('#p3').is(':checked') && !$('#p4').is(':checked')) {
alert('选择位置')
return
}
var period = $('#period').val()
var limit = $('#limit').val()
var p1 = $('#p1').is(':checked')
var p2 = $('#p2').is(':checked')
var p3 = $('#p3').is(':checked')
var p4 = $('#p4').is(':checked')
$.ajax({
type: "post",
url: "/queryHistoryList",
dataType: "json",
data: {
'period': period,
'limit': limit,
'p1': p1,
'p2': p2,
'p3': p3,
'p4': p4
},
success: function (data) {
console.log(data)
refresh(data)
},
error: function (err) {
console.log(err)
}
});
}
function refresh(data) {
var dA = []
var nA = []
for (var i = 0; i < data['a'].length; i++) {
dA.push(data['a'][i]['a']);
nA.push(data['a'][i]['num']);
}
// 指定图表的配置项和数据
var optionA = {
title: {
text: 'A位'
},
tooltip: {},
legend: {
data: ['AAAA']
},
xAxis: {
data: dA
},
yAxis: {},
series: [{
name: 'A位',
type: 'bar',
data: nA
}]
};
// 使用刚指定的配置项和数据显示图表。
chartA.setOption(optionA);
var dB = []
var nB = []
for (var i = 0; i < data['b'].length; i++) {
dB.push(data['b'][i]['b']);
nB.push(data['b'][i]['num']);
}
// 指定图表的配置项和数据
var optionB = {
title: {
text: 'B位'
},
tooltip: {},
legend: {
data: ['BBBB']
},
xAxis: {
data: dB
},
yAxis: {},
series: [{
name: 'B位',
type: 'bar',
data: nB
}]
};
// 使用刚指定的配置项和数据显示图表。
chartB.setOption(optionB);
var dC = []
var nC = []
for (var i = 0; i < data['c'].length; i++) {
dC.push(data['c'][i]['c']);
nC.push(data['c'][i]['num']);
}
// 指定图表的配置项和数据
var optionC = {
title: {
text: 'C位'
},
tooltip: {},
legend: {
data: ['CCCC']
},
xAxis: {
data: dC
},
yAxis: {},
series: [{
name: 'C位',
type: 'bar',
data: nC
}]
};
// 使用刚指定的配置项和数据显示图表。
chartC.setOption(optionC);
var dD = []
var nD = []
for (var i = 0; i < data['d'].length; i++) {
dD.push(data['d'][i]['d']);
nD.push(data['d'][i]['num']);
}
// 指定图表的配置项和数据
var optionD = {
title: {
text: 'D位'
},
tooltip: {},
legend: {
data: ['DDDD']
},
xAxis: {
data: dD
},
yAxis: {},
series: [{
name: 'D位',
type: 'bar',
data: nD
}]
};
// 使用刚指定的配置项和数据显示图表。
chartD.setOption(optionD);
var zhongHtml = '';
for (var i = 0; i < data['zhong'].length; i++) {
var z = data['zhong'][i]
zhongHtml += '<tr>';
zhongHtml += '<td>';
zhongHtml += i + 1;
zhongHtml += '</td>';
zhongHtml += '<td>';
zhongHtml += z['peroid'];
zhongHtml += '</td>';
zhongHtml += '<td>';
zhongHtml += z['a'];
zhongHtml += '</td>';
zhongHtml += '<td>';
zhongHtml += z['b'];
zhongHtml += '</td>';
zhongHtml += '<td>';
zhongHtml += z['c'];
zhongHtml += '</td>';
zhongHtml += '<td>';
zhongHtml += z['d'];
zhongHtml += '</td>';
zhongHtml += '<td>';
zhongHtml += z['e'];
zhongHtml += '</td>';
zhongHtml += '</tr>';
}
$('.t-body').html(zhongHtml)
$('.z-nums').html('命中列表（<span class="text-danger">' + data['zhong'].length + '</span>）')
}
</script>
</body>
</html>
