916117771/amlhc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: replace sum analysis with special trend line chart, zodiac/tail numbers use bar charts

Browse Source
This commit is contained in:
leon
2026-04-22 00:13:09 +08:00
parent 074aa4d677
commit 79f1a1dc80
3 changed files with 70 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/js/backend/dashboard.js
+53 -24
View File
@@ -39,7 +39,7 @@ define(['jquery'], function ($) {
function render(data) {
var hc = data.hotcold, cw = data.colorwave, zo = data.zodiac;
var oe = data.oddeven, bs = data.bigsmall, sm = data.sum, tn = data.tailnumbers;
var oe = data.oddeven, bs = data.bigsmall, sp = data.special, tn = data.tailnumbers;
var html = '';
@@ -70,42 +70,71 @@ define(['jquery'], function ($) {
html += '</div></div></div>';
html += '</div></div>';
html += '<div class="dash-section"><h4>⭐ 生肖排名</h4><div style="display:flex;flex-wrap:wrap;">';
for (var i = 0; i < Math.min(zo.list.length, 12); i++) {
var z = zo.list[i];
html += '<div class="mini-card"><div class="name">' + z.animal + '</div><div class="val">' + z.count + ' (' + z.percent + '%)</div></div>';
}
html += '</div></div>';
html += '<div class="dash-section"><h4>⭐ 生肖排名</h4><div id="zodiac-chart" style="width:100%;height:250px;"></div></div>';
html += '<div class="dash-section"><h4>📈 和值统计</h4><div class="row">';
html += '<div class="col-sm-4"><div class="dash-card"><div class="big-num">' + sm.avg + '</div><div class="label-text">平均和值</div></div></div>';
html += '<div class="col-sm-4"><div class="dash-card"><div class="big-num" style="color:#e74c3c;">' + sm.max + '</div><div class="label-text">最大和值</div></div></div>';
html += '<div class="col-sm-4"><div class="dash-card"><div class="big-num" style="color:#3498db;">' + sm.min + '</div><div class="label-text">最小和值</div></div></div>';
html += '</div><div id="dash-chart" style="margin-top:15px;"></div></div>';
html += '<div class="dash-section"><h4>📈 特码走势</h4><div id="special-chart" style="width:100%;height:280px;"></div></div>';
html += '<div class="dash-section"><h4>🔢 尾数频率</h4><div style="display:flex;flex-wrap:wrap;">';
for (var i = 0; i < tn.all.length; i++) {
var t = tn.all[i];
html += '<div class="mini-card"><div class="name">' + t.tail + '</div><div class="val">' + t.count + ' (' + t.percent + '%)</div></div>';
}
html += '</div></div>';
html += '<div class="dash-section"><h4>🔢 尾数频率</h4><div id="tail-chart" style="width:100%;height:220px;"></div></div>';
$('#dash-content').html(html);
if (typeof echarts !== 'undefined' && sm.expects && sm.expects.length > 0) {
var chartDom = document.getElementById('dash-chart');
// 生肖柱状图
if (typeof echarts !== 'undefined' && zo.list && zo.list.length > 0) {
var zDom = document.getElementById('zodiac-chart');
if (zDom) {
var zChart = echarts.init(zDom);
zChart.setOption({
tooltip: {trigger: 'axis', axisPointer: {type: 'shadow'}},
grid: {left: 50, right: 20, bottom: 30, top: 10},
xAxis: {type: 'category', data: zo.list.map(function(z){return z.animal;})},
yAxis: {type: 'value'},
series: [{type: 'bar', data: zo.list.map(function(z){return z.count;}), itemStyle: {color: '#626c91'}}]
});
$(window).on('resize', function(){ zChart.resize(); });
}
}
// 特码走势
if (typeof echarts !== 'undefined' && sp.expects && sp.expects.length > 0) {
var chartDom = document.getElementById('special-chart');
if (chartDom) {
var chart = echarts.init(chartDom);
var colorMap = {'红': '#e74c3c', '蓝': '#3498db', '绿': '#2ecc71'};
var itemColors = sp.colors.map(function(c) {
if (c.indexOf('红') !== -1) return colorMap['红'];
if (c.indexOf('蓝') !== -1) return colorMap['蓝'];
if (c.indexOf('绿') !== -1) return colorMap['绿'];
return '#95a5a6';
});
chart.setOption({
tooltip: {trigger: 'axis'},
xAxis: {type: 'category', data: sm.expects, axisLabel: {rotate: 45, fontSize: 10}},
yAxis: {type: 'value'},
series: [{type: 'line', data: sm.sums, smooth: true, itemStyle: {color: '#3498db'}, areaStyle: {color: 'rgba(52,152,219,0.1)'}}],
tooltip: {trigger: 'axis', formatter: function(p) {
return '期号: ' + p[0].axisValue + '<br/>特码: <b style="color:' + itemColors[p[0].dataIndex] + '">' + p[0].data + '</b>';
}},
xAxis: {type: 'category', data: sp.expects, axisLabel: {rotate: 45, fontSize: 10}},
yAxis: {type: 'value', min: 0, max: 50},
series: [{type: 'line', data: sp.specials, smooth: true, symbolSize: 8, itemStyle: {color: function(p) { return itemColors[p.dataIndex]; }}, areaStyle: {color: 'rgba(52,152,219,0.05)'}}],
grid: {left: 50, right: 20, bottom: 50, top: 20}
});
$(window).on('resize', function () { chart.resize(); });
}
}
// 尾数柱状图
if (typeof echarts !== 'undefined' && tn.all && tn.all.length > 0) {
var tDom = document.getElementById('tail-chart');
if (tDom) {
var tChart = echarts.init(tDom);
var sorted = tn.all.slice().sort(function(a,b){return a.tail - b.tail;});
tChart.setOption({
tooltip: {trigger: 'axis', axisPointer: {type: 'shadow'}},
grid: {left: 50, right: 20, bottom: 30, top: 10},
xAxis: {type: 'category', data: sorted.map(function(t){return t.tail;})},
yAxis: {type: 'value'},
series: [{type: 'bar', data: sorted.map(function(t){return t.count;}), itemStyle: {color: '#23b7e5'}}]
});
$(window).on('resize', function(){ tChart.resize(); });
}
}
}
$('#btn-dash-refresh').on('click', loadData);