40 lines
1.6 KiB
Markdown
40 lines
1.6 KiB
Markdown
# 减小统计卡片大小并移除统计图
|
||
|
||
## 需求分析
|
||
用户希望减小统计卡片的大小并移除卡片中的统计图，只保留数值和基本信息。
|
||
|
||
## 实现方案
|
||
|
||
### 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)`调用
|
||
|
||
## 预期效果
|
||
- 统计卡片大小减小，布局更紧凑
|
||
- 卡片中只显示标题、数值和百分比信息
|
||
- 移除了不必要的图表，减少了页面加载时间和资源消耗
|
||
- 整体界面更简洁，重点突出数值信息
|
||
|
||
## 注意事项
|
||
- 确保移除图表后不会导致其他功能错误
|
||
- 保持卡片之间的一致性和美观性
|
||
- 确保数值和百分比信息清晰可见 |