diff --git a/web/src/components/Analytics.tsx b/web/src/components/Analytics.tsx index b158c11..f939ce2 100644 --- a/web/src/components/Analytics.tsx +++ b/web/src/components/Analytics.tsx @@ -1046,8 +1046,26 @@ const Analytics: React.FC = () => { comments: item.count })); - setTimelineData(mappedData); - setMaxTimelineCount(result.metadata.max_count || 1); // 避免除以零 + // 只保留最近7天的数据 + const last7DaysData = mappedData + .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()) // 按日期降序排序 + .slice(0, 7) // 只取前7条 + .sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()); // 再按日期升序排序 + + // 计算最大留言数(使用安全检查确保数组不为空) + let maxCount = 1; // 默认值为1 + if (last7DaysData.length > 0) { + // 查找数据中的最大留言数 + maxCount = Math.max(...last7DaysData.map(item => item.comments), 1); + console.log('留言趋势最大留言数:', maxCount, '数据:', JSON.stringify(last7DaysData)); + } + + // 显式检查maxCount是否大于0,避免除以零的问题 + if (maxCount <= 0) maxCount = 1; + + // 更新状态 + setTimelineData(last7DaysData); + setMaxTimelineCount(maxCount); // 如果API返回了模拟数据标志 if ('is_mock_data' in result && result.is_mock_data) { @@ -1856,7 +1874,14 @@ const Analytics: React.FC = () => { {/* 留言趋势图 */}
-

留言趋势

+
+

最近七天留言趋势

+ + {timelineData.length > 0 ? + `${new Date(timelineData[0].date).toLocaleDateString('zh-CN')} - ${new Date(timelineData[timelineData.length - 1].date).toLocaleDateString('zh-CN')}` : + '暂无数据'} + +
{trendLoading ? (
@@ -1870,30 +1895,42 @@ const Analytics: React.FC = () => { ) : timelineData.length === 0 ? (
-

没有找到留言趋势数据

+

没有找到最近七天的留言数据

) : ( -
-
+
+ {/* 完全重构的柱状图实现 */} +
{timelineData.map((item, index) => ( -
+
+ {/* 留言数标签 */} +
{item.comments}
+ + {/* 柱状图 - 使用绝对高度值而非百分比 */}
-
+ {/* 悬停提示 */} +
{item.comments} 留言
-

+ + {/* 日期标签 */} +

{new Date(item.date).toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' })} -

+
))}
+ + {/* 图表说明 */} +
+ 柱状图高度代表留言数量 +
)}