diff --git a/static/js/modules/dashboard.js b/static/js/modules/dashboard.js
index 74eef9f..d1d9f8e 100644
--- a/static/js/modules/dashboard.js
+++ b/static/js/modules/dashboard.js
@@ -13,12 +13,6 @@ function loadDashboardData() {
// 加载统计卡片数据
updateStatCards();
- // 加载24小时统计数据
- loadHourlyStats();
-
- // 加载请求类型分布
- loadRequestsDistribution();
-
// 加载最常屏蔽的域名
loadTopBlockedDomains();
@@ -213,72 +207,206 @@ function loadHourlyStats() {
});
}
-// 渲染24小时统计图表
+// 渲染24小时统计图表 - 使用ECharts重新设计
function renderHourlyChart(hours, blocked, allowed) {
- const ctx = document.getElementById('hourly-chart');
- if (!ctx) return;
+ const chartContainer = document.getElementById('hourly-chart');
+ if (!chartContainer) return;
- // 销毁现有图表
+ // 销毁现有ECharts实例
if (window.hourlyChart) {
- window.hourlyChart.destroy();
+ window.hourlyChart.dispose();
}
- // 创建新图表
- window.hourlyChart = new Chart(ctx, {
- type: 'line',
- data: {
- labels: hours,
- datasets: [
- {
- label: '屏蔽请求',
- data: blocked,
- borderColor: '#e74c3c',
- backgroundColor: 'rgba(231, 76, 60, 0.1)',
- borderWidth: 2,
- tension: 0.3,
- fill: true
- },
- {
- label: '允许请求',
- data: allowed,
- borderColor: '#2ecc71',
- backgroundColor: 'rgba(46, 204, 113, 0.1)',
- borderWidth: 2,
- tension: 0.3,
- fill: true
- }
- ]
- },
- options: {
- responsive: true,
- maintainAspectRatio: false,
- scales: {
- y: {
- beginAtZero: true,
- title: {
- display: true,
- text: '请求数'
- }
- },
- x: {
- title: {
- display: true,
- text: '时间（小时）'
- }
- }
- },
- plugins: {
- legend: {
- position: 'top',
- },
- tooltip: {
- mode: 'index',
- intersect: false
- }
- },
- animation: {
- duration: 500 // 快速动画，提升实时更新体验
+ // 创建ECharts实例
+ window.hourlyChart = echarts.init(chartContainer);
+
+ // 计算24小时内的最大请求数，为Y轴设置合适的上限
+ const maxRequests = Math.max(...blocked, ...allowed);
+ const yAxisMax = maxRequests > 0 ? Math.ceil(maxRequests * 1.2) : 10;
+
+ // 设置ECharts配置
+ const option = {
+ title: {
+ text: '24小时请求统计',
+ left: 'center',
+ textStyle: {
+ fontSize: 16,
+ fontWeight: 'normal'
}
+ },
+ tooltip: {
+ trigger: 'axis',
+ backgroundColor: 'rgba(255, 255, 255, 0.95)',
+ borderColor: '#ddd',
+ borderWidth: 1,
+ textStyle: {
+ color: '#333'
+ },
+ formatter: function(params) {
+ let result = params[0].name + '
';
+ params.forEach(param => {
+ result += param.marker + param.seriesName + ': ' + param.value + '
';
+ });
+ return result;
+ }
+ },
+ legend: {
+ data: ['屏蔽请求', '允许请求'],
+ top: '10%',
+ textStyle: {
+ color: '#666'
+ }
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '10%',
+ top: '25%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: hours,
+ axisLabel: {
+ color: '#666',
+ interval: 1, // 每隔一个小时显示一个标签，避免拥挤
+ rotate: 30 // 标签旋转30度，提高可读性
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#ddd'
+ }
+ },
+ axisTick: {
+ show: false
+ }
+ },
+ yAxis: {
+ type: 'value',
+ min: 0,
+ max: yAxisMax,
+ axisLabel: {
+ color: '#666',
+ formatter: '{value}'
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#ddd'
+ }
+ },
+ splitLine: {
+ lineStyle: {
+ color: '#f0f0f0',
+ type: 'dashed'
+ }
+ }
+ },
+ series: [
+ {
+ name: '屏蔽请求',
+ type: 'line',
+ smooth: true, // 平滑曲线
+ symbol: 'circle', // 拐点形状
+ symbolSize: 6, // 拐点大小
+ data: blocked,
+ itemStyle: {
+ color: '#e74c3c'
+ },
+ areaStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: 'rgba(231, 76, 60, 0.3)' },
+ { offset: 1, color: 'rgba(231, 76, 60, 0.05)' }
+ ])
+ },
+ emphasis: {
+ focus: 'series',
+ itemStyle: {
+ borderWidth: 2,
+ borderColor: '#fff',
+ shadowBlur: 10,
+ shadowColor: 'rgba(231, 76, 60, 0.5)'
+ }
+ },
+ animationDuration: 800,
+ animationEasing: 'cubicOut'
+ },
+ {
+ name: '允许请求',
+ type: 'line',
+ smooth: true,
+ symbol: 'circle',
+ symbolSize: 6,
+ data: allowed,
+ itemStyle: {
+ color: '#2ecc71'
+ },
+ areaStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: 'rgba(46, 204, 113, 0.3)' },
+ { offset: 1, color: 'rgba(46, 204, 113, 0.05)' }
+ ])
+ },
+ emphasis: {
+ focus: 'series',
+ itemStyle: {
+ borderWidth: 2,
+ borderColor: '#fff',
+ shadowBlur: 10,
+ shadowColor: 'rgba(46, 204, 113, 0.5)'
+ }
+ },
+ animationDuration: 800,
+ animationEasing: 'cubicOut'
+ }
+ ],
+ // 添加数据提示功能
+ toolbox: {
+ feature: {
+ dataZoom: {
+ yAxisIndex: 'none'
+ },
+ dataView: {
+ readOnly: false
+ },
+ magicType: {
+ type: ['line', 'bar']
+ },
+ restore: {},
+ saveAsImage: {}
+ },
+ top: '15%'
+ },
+ // 添加数据缩放功能
+ dataZoom: [
+ {
+ type: 'inside',
+ start: 0,
+ end: 100
+ },
+ {
+ start: 0,
+ end: 100,
+ handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23.1h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
+ handleSize: '80%',
+ handleStyle: {
+ color: '#fff',
+ shadowBlur: 3,
+ shadowColor: 'rgba(0, 0, 0, 0.6)',
+ shadowOffsetX: 2,
+ shadowOffsetY: 2
+ }
+ }
+ ]
+ };
+
+ // 应用配置项
+ window.hourlyChart.setOption(option);
+
+ // 添加窗口大小变化时的自适应
+ window.addEventListener('resize', function() {
+ if (window.hourlyChart) {
+ window.hourlyChart.resize();
}
});
}