feat(dashboard): 添加特码热力图功能

在控制台增加特码热力图可视化功能:
- 新增 getSpecialHeatmap() 方法生成热力图数据
- 热力图展示近N期特码号码分布(X轴期号,Y轴号码1-49)
- 使用号码波色作为单元格颜色,直观展示开奖规律
This commit is contained in:
2026-04-22 22:41:02 +08:00
parent 54dd2fe5ad
commit f4c67bd102
6 changed files with 245 additions and 3 deletions
+76
View File
@@ -63,6 +63,10 @@ define(['jquery'], function ($) {
html += '<div class="dash-section"><h4>🔢 尾数频率</h4><div id="tail-chart" style="width:100%;height:220px;"></div></div>';
// 热力图部分
var hm = data.heatmap;
html += '<div class="dash-section"><h4>🎨 特码热力图</h4><div style="font-size:12px;color:#999;margin-bottom:8px;">X轴:期号(从左往右,从远到近) | Y轴:号码1-49 | 颜色:号码波色</div><div id="heatmap-chart" style="width:100%;height:500px;"></div></div>';
$('#dash-content').html(html);
// 波色饼图
@@ -185,6 +189,78 @@ define(['jquery'], function ($) {
$(window).on('resize', function(){ tChart.resize(); });
}
}
// 特码热力图
if (typeof echarts !== 'undefined' && hm && hm.expects && hm.expects.length > 0) {
var hmDom = document.getElementById('heatmap-chart');
if (hmDom) {
var hmChart = echarts.init(hmDom);
// 构建完整的热力图数据矩阵(每期每号码)
var hmData = [];
for (var x = 0; x < hm.expects.length; x++) {
for (var y = 0; y < 49; y++) {
// 检查该期是否有该号码作为特码
var found = false;
for (var i = 0; i < hm.heatmap.length; i++) {
if (hm.heatmap[i][0] === x && hm.heatmap[i][1] === y) {
found = true;
break;
}
}
hmData.push([x, y, found ? 1 : 0]);
}
}
hmChart.setOption({
tooltip: {
position: 'top',
formatter: function(p) {
var periodIdx = p.data[0];
var num = p.data[1] + 1;
var val = p.data[2];
return '期号: ' + hm.expects[periodIdx] + '<br/>号码: ' + num + '<br/>状态: ' + (val === 1 ? '已开出' : '未开出');
}
},
grid: {left: 80, right: 30, bottom: 60, top: 30},
xAxis: {
type: 'category',
data: hm.expects,
axisLabel: {rotate: 45, fontSize: 10, interval: 0},
splitArea: {show: true}
},
yAxis: {
type: 'category',
data: hm.nums,
axisLabel: {fontSize: 10},
splitArea: {show: true}
},
visualMap: {
min: 0,
max: 1,
show: false,
inRange: {
color: ['#f0f0f0', '#e74c3c']
}
},
series: [{
type: 'heatmap',
data: hmData,
label: {show: false},
itemStyle: {
color: function(p) {
// 未开出显示浅灰,开出显示该号码的波色
if (p.data[2] === 0) return '#f5f5f5';
var numIdx = p.data[1];
return hm.colors[numIdx] || '#95a5a6';
}
},
emphasis: {
itemStyle: {shadowBlur: 10, shadowColor: 'rgba(0,0,0,0.5)'}
}
}]
});
$(window).on('resize', function(){ hmChart.resize(); });
}
}
}
$('#btn-dash-refresh').on('click', loadData);