1.6 KiB
1.6 KiB
减小统计卡片大小并移除统计图
需求分析
用户希望减小统计卡片的大小并移除卡片中的统计图，只保留数值和基本信息。
实现方案
1. 修改统计卡片HTML结构
- 移除每个统计卡片中包含canvas元素的div（高度为16px的图表区域）
- 减小卡片的内边距（从p-6改为p-4）
- 调整卡片内部元素的间距，确保布局紧凑美观
2. 移除图表相关JavaScript代码
- 移除dashboard.js中对
initStatCardCharts()和updateStatCardCharts()函数的调用 - 这些函数负责初始化和更新统计卡片中的折线图
- 移除后不会影响其他图表功能（如主图表区域的图表）
3. 具体修改点
HTML文件修改（index.html）
- 对于每个统计卡片（共8个），移除包含canvas的div元素
- 减小卡片内边距：将
p-6改为p-4 - 调整卡片内部元素的margin和padding，确保布局紧凑
JavaScript文件修改（dashboard.js）
- 移除第31行的
initStatCardCharts()调用 - 移除第139行的
updateStatCardCharts(stats)调用 - 移除第367行的
updateStatCardCharts(stats)调用 - 移除第525行的
updateStatCardCharts(stats)调用
预期效果
- 统计卡片大小减小，布局更紧凑
- 卡片中只显示标题、数值和百分比信息
- 移除了不必要的图表，减少了页面加载时间和资源消耗
- 整体界面更简洁，重点突出数值信息
注意事项
- 确保移除图表后不会导致其他功能错误
- 保持卡片之间的一致性和美观性
- 确保数值和百分比信息清晰可见