diff --git a/public/assets/js/backend/dashboard.js b/public/assets/js/backend/dashboard.js index b451ad2..68b725b 100644 --- a/public/assets/js/backend/dashboard.js +++ b/public/assets/js/backend/dashboard.js @@ -52,22 +52,9 @@ define(['jquery'], function ($) { html += ''; html += '

📊 比例分析

'; - html += '
🎨 波色
'; - html += '
'; - html += '
' + cw.red + '
红波 ' + cw.red_pct + '%
'; - html += '
' + cw.blue + '
蓝波 ' + cw.blue_pct + '%
'; - html += '
' + cw.green + '
绿波 ' + cw.green_pct + '%
'; - html += '
'; - html += '
⚖️ 奇偶
'; - html += '
'; - html += '
' + oe.odd + '
奇数 ' + oe.odd_pct + '%
'; - html += '
' + oe.even + '
偶数 ' + oe.even_pct + '%
'; - html += '
'; - html += '
📏 大小
'; - html += '
'; - html += '
' + bs.big + '
大数 ' + bs.big_pct + '%
'; - html += '
' + bs.small + '
小数 ' + bs.small_pct + '%
'; - html += '
'; + html += '
'; + html += '
'; + html += '
'; html += '
'; html += '

⭐ 生肖排名

'; @@ -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'}, - series: [{type: 'bar', data: zo.list.map(function(z){return z.count;}), itemStyle: {color: '#626c91'}}] + yAxis: {type: 'value', splitNumber: 3}, + 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'}, - series: [{type: 'bar', data: sorted.map(function(t){return t.count;}), itemStyle: {color: '#23b7e5'}}] + yAxis: {type: 'value', splitNumber: 3}, + 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(); }); }