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(); });
}