feat: replace ratio cards with ECharts pie charts for color wave, odd/even, big/small

public/assets/js/backend/dashboard.js

@@ -52,22 +52,9 @@ define(['jquery'], function ($) {
                 html += '</div></div></div></div>';
 
                 html += '<div class="dash-section"><h4>📊 比例分析</h4><div class="row">';
-                html += '<div class="col-sm-4"><div class="dash-card"><div style="font-weight:bold;margin-bottom:8px;">🎨 波色</div>';
+                html += '<div class="col-sm-4"><div class="dash-card"><div id="colorwave-chart" style="width:100%;height:200px;"></div></div></div>';
-                html += '<div style="display:flex;justify-content:space-around;">';
+                html += '<div class="col-sm-4"><div class="dash-card"><div id="oddeven-chart" style="width:100%;height:200px;"></div></div></div>';
-                html += '<div><div style="font-size:24px;font-weight:bold;color:#e74c3c;">' + cw.red + '</div><div class="label-text">红波 ' + cw.red_pct + '%</div></div>';
+                html += '<div class="col-sm-4"><div class="dash-card"><div id="bigsmall-chart" style="width:100%;height:200px;"></div></div></div>';
-                html += '<div><div style="font-size:24px;font-weight:bold;color:#3498db;">' + cw.blue + '</div><div class="label-text">蓝波 ' + cw.blue_pct + '%</div></div>';
-                html += '<div><div style="font-size:24px;font-weight:bold;color:#2ecc71;">' + cw.green + '</div><div class="label-text">绿波 ' + cw.green_pct + '%</div></div>';
-                html += '</div></div></div>';
-                html += '<div class="col-sm-4"><div class="dash-card"><div style="font-weight:bold;margin-bottom:8px;">⚖️ 奇偶</div>';
-                html += '<div style="display:flex;justify-content:space-around;">';
-                html += '<div><div style="font-size:24px;font-weight:bold;color:#e74c3c;">' + oe.odd + '</div><div class="label-text">奇数 ' + oe.odd_pct + '%</div></div>';
-                html += '<div><div style="font-size:24px;font-weight:bold;color:#3498db;">' + oe.even + '</div><div class="label-text">偶数 ' + oe.even_pct + '%</div></div>';
-                html += '</div></div></div>';
-                html += '<div class="col-sm-4"><div class="dash-card"><div style="font-weight:bold;margin-bottom:8px;">📏 大小</div>';
-                html += '<div style="display:flex;justify-content:space-around;">';
-                html += '<div><div style="font-size:24px;font-weight:bold;color:#f39c12;">' + bs.big + '</div><div class="label-text">大数 ' + bs.big_pct + '%</div></div>';
-                html += '<div><div style="font-size:24px;font-weight:bold;color:#2ecc71;">' + bs.small + '</div><div class="label-text">小数 ' + bs.small_pct + '%</div></div>';
-                html += '</div></div></div>';
                 html += '</div></div>';
 
                 html += '<div class="dash-section"><h4>⭐ 生肖排名</h4><div id="zodiac-chart" style="width:100%;height:250px;"></div></div>';
@@ -78,6 +65,69 @@ define(['jquery'], function ($) {
 
                 $('#dash-content').html(html);
 
+                // 波色饼图
+                if (typeof echarts !== 'undefined') {
+                    var cwDom = document.getElementById('colorwave-chart');
+                    if (cwDom) {
+                        var cwChart = echarts.init(cwDom);
+                        cwChart.setOption({
+                            tooltip: {trigger: 'item', formatter: '{b}: {c} ({d}%)'},
+                            series: [{
+                                type: 'pie', radius: '60%',
+                                data: [
+                                    {value: cw.red, name: '红波', itemStyle: {color: '#e74c3c'}},
+                                    {value: cw.blue, name: '蓝波', itemStyle: {color: '#3498db'}},
+                                    {value: cw.green, name: '绿波', itemStyle: {color: '#2ecc71'}}
+                                ],
+                                label: {show: true, formatter: '{b}\n{d}%'},
+                                emphasis: {itemStyle: {shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0,0,0,0.5)'}}
+                            }],
+                            grid: {top: 0, bottom: 0}
+                        });
+                        $(window).on('resize', function(){ cwChart.resize(); });
+                    }
+
+                    // 奇偶饼图
+                    var oeDom = document.getElementById('oddeven-chart');
+                    if (oeDom) {
+                        var oeChart = echarts.init(oeDom);
+                        oeChart.setOption({
+                            tooltip: {trigger: 'item', formatter: '{b}: {c} ({d}%)'},
+                            series: [{
+                                type: 'pie', radius: '60%',
+                                data: [
+                                    {value: oe.odd, name: '奇数', itemStyle: {color: '#e74c3c'}},
+                                    {value: oe.even, name: '偶数', itemStyle: {color: '#3498db'}}
+                                ],
+                                label: {show: true, formatter: '{b}\n{d}%'},
+                                emphasis: {itemStyle: {shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0,0,0,0.5)'}}
+                            }],
+                            grid: {top: 0, bottom: 0}
+                        });
+                        $(window).on('resize', function(){ oeChart.resize(); });
+                    }
+
+                    // 大小饼图
+                    var bsDom = document.getElementById('bigsmall-chart');
+                    if (bsDom) {
+                        var bsChart = echarts.init(bsDom);
+                        bsChart.setOption({
+                            tooltip: {trigger: 'item', formatter: '{b}: {c} ({d}%)'},
+                            series: [{
+                                type: 'pie', radius: '60%',
+                                data: [
+                                    {value: bs.big, name: '大数', itemStyle: {color: '#f39c12'}},
+                                    {value: bs.small, name: '小数', itemStyle: {color: '#2ecc71'}}
+                                ],
+                                label: {show: true, formatter: '{b}\n{d}%'},
+                                emphasis: {itemStyle: {shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0,0,0,0.5)'}}
+                            }],
+                            grid: {top: 0, bottom: 0}
+                        });
+                        $(window).on('resize', function(){ bsChart.resize(); });
+                    }
+                }
+
                 // 生肖柱状图
                 if (typeof echarts !== 'undefined' && zo.list && zo.list.length > 0) {
                     var zDom = document.getElementById('zodiac-chart');
@@ -87,8 +137,8 @@ define(['jquery'], function ($) {
                             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'},
+                            yAxis: {type: 'value', splitNumber: 3},
-                            series: [{type: 'bar', data: zo.list.map(function(z){return z.count;}), itemStyle: {color: '#626c91'}}]
+                            series: [{type: 'bar', data: zo.list.map(function(z){return z.count;}), itemStyle: {color: '#626c91'}, label: {show: true, position: 'top', fontSize: 12, color: '#333'}}]
                         });
                         $(window).on('resize', function(){ zChart.resize(); });
                     }
@@ -129,8 +179,8 @@ define(['jquery'], function ($) {
                             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'},
+                            yAxis: {type: 'value', splitNumber: 3},
-                            series: [{type: 'bar', data: sorted.map(function(t){return t.count;}), itemStyle: {color: '#23b7e5'}}]
+                            series: [{type: 'bar', data: sorted.map(function(t){return t.count;}), itemStyle: {color: '#23b7e5'}, label: {show: true, position: 'top', fontSize: 12, color: '#333'}}]
                         });
                         $(window).on('resize', function(){ tChart.resize(); });
                     }