feat(dashboard): 添加特码热力图功能
在控制台增加特码热力图可视化功能: - 新增 getSpecialHeatmap() 方法生成热力图数据 - 热力图展示近N期特码号码分布(X轴期号,Y轴号码1-49) - 使用号码波色作为单元格颜色,直观展示开奖规律
This commit is contained in:
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user