refactor(phase-2): replace grid trend with ECharts line chart
This commit is contained in:
@@ -57,17 +57,11 @@ class History extends Model
|
||||
foreach ($history as $row) {
|
||||
$expects[] = (string)$row['expect'];
|
||||
if ($type === 'special') {
|
||||
$num = (int)$row['num7'];
|
||||
$data[] = [
|
||||
'num7' => $num,
|
||||
'num7_color' => isset($colorMap[$num]) ? $colorMap[$num] : '—'
|
||||
];
|
||||
$data[] = ['num7' => (int)$row['num7']];
|
||||
} else {
|
||||
$row_data = [];
|
||||
for ($i = 1; $i <= 7; $i++) {
|
||||
$num = (int)$row['num' . $i];
|
||||
$row_data['num' . $i] = $num;
|
||||
$row_data['num' . $i . '_color'] = isset($colorMap[$num]) ? $colorMap[$num] : '—';
|
||||
$row_data['num' . $i] = (int)$row['num' . $i];
|
||||
}
|
||||
$data[] = $row_data;
|
||||
}
|
||||
|
||||
@@ -22,3 +22,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ECharts CDN for trend chart -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
|
||||
|
||||
@@ -217,7 +217,7 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
|
||||
},
|
||||
|
||||
/**
|
||||
* 渲染走势图（网格形式）
|
||||
* 渲染走势图（ECharts 折线图）
|
||||
*/
|
||||
renderTrend: function (data, type, layero) {
|
||||
var expects = data.expects;
|
||||
@@ -238,35 +238,81 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
|
||||
return '#95a5a6';
|
||||
};
|
||||
|
||||
var html = '<table class="table table-bordered table-condensed" style="font-size:12px;white-space:nowrap;">';
|
||||
html += '<thead><tr><th>期号</th>';
|
||||
$('#trend-result', layero).html('<div id="trend-chart" style="width:100%;height:500px;"></div>');
|
||||
|
||||
var chartDom = document.getElementById('trend-chart');
|
||||
var myChart = echarts.init(chartDom);
|
||||
|
||||
var series = [];
|
||||
if (type === 'special') {
|
||||
html += '<th style="text-align:center;">特码</th>';
|
||||
} else {
|
||||
for (var c = 1; c <= 7; c++) {
|
||||
html += '<th style="text-align:center;">' + c + '</th>';
|
||||
}
|
||||
}
|
||||
html += '</tr></thead><tbody>';
|
||||
|
||||
for (var i = 0; i < expects.length; i++) {
|
||||
html += '<tr><td>' + expects[i] + '</td>';
|
||||
if (type === 'special') {
|
||||
var num = rows[i].num7;
|
||||
var color = getColor(num);
|
||||
html += '<td style="text-align:center;"><span style="display:inline-block;width:28px;height:28px;line-height:28px;text-align:center;border-radius:50%;color:#fff;background-color:' + color + ';font-weight:bold;">' + num + '</span></td>';
|
||||
} else {
|
||||
for (var j = 1; j <= 7; j++) {
|
||||
var val = rows[i]['num' + j];
|
||||
var c = getColor(val);
|
||||
html += '<td style="text-align:center;"><span style="display:inline-block;width:28px;height:28px;line-height:28px;text-align:center;border-radius:50%;color:#fff;background-color:' + c + ';font-weight:bold;">' + val + '</span></td>';
|
||||
series = [{
|
||||
name: '特码',
|
||||
type: 'line',
|
||||
data: rows.map(function (r) { return r.num7; }),
|
||||
smooth: false,
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
lineStyle: { width: 2 },
|
||||
itemStyle: {
|
||||
color: function (params) {
|
||||
var num = params.data;
|
||||
return getColor(num);
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
fontSize: 11,
|
||||
color: '#333'
|
||||
}
|
||||
}];
|
||||
} else {
|
||||
var numFields = [];
|
||||
for (var c = 1; c <= 7; c++) {
|
||||
numFields.push('num' + c);
|
||||
}
|
||||
var colors = ['#e74c3c', '#3498db', '#2ecc71', '#f39c12', '#9b59b6', '#1abc9c', '#e67e22'];
|
||||
for (var f = 0; f < numFields.length; f++) {
|
||||
(function (idx) {
|
||||
series.push({
|
||||
name: '第' + (idx + 1) + '码',
|
||||
type: 'line',
|
||||
data: rows.map(function (r) { return r[numFields[idx]]; }),
|
||||
smooth: false,
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
lineStyle: { width: 2 },
|
||||
itemStyle: { color: colors[idx] },
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
fontSize: 10,
|
||||
color: '#333'
|
||||
}
|
||||
});
|
||||
})(f);
|
||||
}
|
||||
html += '</tr>';
|
||||
}
|
||||
html += '</tbody></table>';
|
||||
|
||||
$('#trend-result', layero).html(html);
|
||||
var option = {
|
||||
title: { text: type === 'special' ? '特码走势' : '全部号码走势', left: 'center', textStyle: { fontSize: 14 } },
|
||||
tooltip: { trigger: 'axis', formatter: function (params) {
|
||||
var tip = '期号: ' + params[0].axisValueLabel + '<br/>';
|
||||
for (var i = 0; i < params.length; i++) {
|
||||
tip += params[i].seriesName + ': <b>' + params[i].data + '</b><br/>';
|
||||
}
|
||||
return tip;
|
||||
}},
|
||||
legend: { bottom: 10, data: series.map(function (s) { return s.name; }) },
|
||||
grid: { left: 40, right: 20, bottom: 50, top: 40 },
|
||||
xAxis: { type: 'category', data: expects, axisLabel: { rotate: 45, fontSize: 10 } },
|
||||
yAxis: { type: 'value', min: 0, max: 50, splitLine: { show: true, lineStyle: { type: 'dashed' } } },
|
||||
dataZoom: [{ type: 'slider', bottom: 30, height: 20, start: 0, end: 100 }],
|
||||
series: series
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
window.addEventListener('resize', function () { myChart.resize(); });
|
||||
},
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user