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) {
|
foreach ($history as $row) {
|
||||||
$expects[] = (string)$row['expect'];
|
$expects[] = (string)$row['expect'];
|
||||||
if ($type === 'special') {
|
if ($type === 'special') {
|
||||||
$num = (int)$row['num7'];
|
$data[] = ['num7' => (int)$row['num7']];
|
||||||
$data[] = [
|
|
||||||
'num7' => $num,
|
|
||||||
'num7_color' => isset($colorMap[$num]) ? $colorMap[$num] : '—'
|
|
||||||
];
|
|
||||||
} else {
|
} else {
|
||||||
$row_data = [];
|
$row_data = [];
|
||||||
for ($i = 1; $i <= 7; $i++) {
|
for ($i = 1; $i <= 7; $i++) {
|
||||||
$num = (int)$row['num' . $i];
|
$row_data['num' . $i] = (int)$row['num' . $i];
|
||||||
$row_data['num' . $i] = $num;
|
|
||||||
$row_data['num' . $i . '_color'] = isset($colorMap[$num]) ? $colorMap[$num] : '—';
|
|
||||||
}
|
}
|
||||||
$data[] = $row_data;
|
$data[] = $row_data;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -22,3 +22,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</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) {
|
renderTrend: function (data, type, layero) {
|
||||||
var expects = data.expects;
|
var expects = data.expects;
|
||||||
@@ -238,35 +238,81 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
|
|||||||
return '#95a5a6';
|
return '#95a5a6';
|
||||||
};
|
};
|
||||||
|
|
||||||
var html = '<table class="table table-bordered table-condensed" style="font-size:12px;white-space:nowrap;">';
|
$('#trend-result', layero).html('<div id="trend-chart" style="width:100%;height:500px;"></div>');
|
||||||
html += '<thead><tr><th>期号</th>';
|
|
||||||
|
var chartDom = document.getElementById('trend-chart');
|
||||||
|
var myChart = echarts.init(chartDom);
|
||||||
|
|
||||||
|
var series = [];
|
||||||
if (type === 'special') {
|
if (type === 'special') {
|
||||||
html += '<th style="text-align:center;">特码</th>';
|
series = [{
|
||||||
} else {
|
name: '特码',
|
||||||
for (var c = 1; c <= 7; c++) {
|
type: 'line',
|
||||||
html += '<th style="text-align:center;">' + c + '</th>';
|
data: rows.map(function (r) { return r.num7; }),
|
||||||
}
|
smooth: false,
|
||||||
}
|
symbol: 'circle',
|
||||||
html += '</tr></thead><tbody>';
|
symbolSize: 8,
|
||||||
|
lineStyle: { width: 2 },
|
||||||
for (var i = 0; i < expects.length; i++) {
|
itemStyle: {
|
||||||
html += '<tr><td>' + expects[i] + '</td>';
|
color: function (params) {
|
||||||
if (type === 'special') {
|
var num = params.data;
|
||||||
var num = rows[i].num7;
|
return getColor(num);
|
||||||
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 {
|
label: {
|
||||||
for (var j = 1; j <= 7; j++) {
|
show: true,
|
||||||
var val = rows[i]['num' + j];
|
position: 'top',
|
||||||
var c = getColor(val);
|
fontSize: 11,
|
||||||
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>';
|
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