refactor(phase-2): replace grid trend with ECharts line chart

2026-04-21 23:36:57 +08:00
parent 616239392a
commit 7e4b6a3443
3 changed files with 76 additions and 33 deletions
@@ -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(); });
            },

            /**