web异常待修复
This commit is contained in:
Alex Yang
@@ -135,16 +135,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="charts-container">
|
||||
<div class="chart-card">
|
||||
<h3>24小时屏蔽统计</h3>
|
||||
<canvas id="hourly-chart" style="height: 300px;"></canvas>
|
||||
</div>
|
||||
<div class="chart-card">
|
||||
<h3>请求类型分布</h3>
|
||||
<canvas id="requests-pie-chart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 图表区域已移除 -->
|
||||
|
||||
<div class="tables-container">
|
||||
<div class="table-card">
|
||||
|
||||
@@ -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 + '<br/>';
|
||||
params.forEach(param => {
|
||||
result += param.marker + param.seriesName + ': ' + param.value + '<br/>';
|
||||
});
|
||||
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();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user