最终方案:.grid-auto 加 align-items: start,让卡片按内容高度对齐,不再被同行高卡片拉伸。
走过的弯路(记下来避免再犯):
grid.bottom: 55 太大——错。bottom: 0 后没效果,才意识到留白在 ECharts 画布外(卡片被 Grid align-items: stretch 强行拉高,而 .chart 写死 320px)。.card { display:flex; flex-direction:column } + .chart { flex:1 0 320px },让图表撑满卡片——这解决了柱状图,但又引出饼图标签被裁成 "…" 的新问题。radius: '70%' 是按容器短边算的。图表被拉高后短边变成卡片宽度,饼图直径超出卡片,左侧引导线/标签被裁断。.grid-auto 加 align-items: start,卡片高度=内容高度,既无内部留白,饼图也回到合理尺寸。副带改动(清理):renderAssessCompletion 的 grid.bottom 从 55 → 30,配合 axisLabel.margin: 10,给旋转 35° 的 X 轴标签留呼吸空间。
教训:dashboard 类页面遇到"卡片底部空白",先检查外层 Grid/容器是否在拉伸子元素,别急着改图表内部的 ECharts 配置。
用户要求删除该日历热力图及其相关方法/数据。已清理的内容:
index.vue:CalendarComponent 的 import 与 echarts.use() 注册;calendarData ref;renderCalendar() 函数及其在 renderAllCharts 的调用;loadAllData 中 getMonthlyAssessCalendar 请求、解构变量 cal、calendarData.value = cal 赋值;模板中 半年度评估频次日历 卡片(含 span-full);CSS .chart-calendar 与 .grid-auto .span-full(span-full 仅此卡片使用)。src/api/data-board/nine-safety.ts:删除 getMonthlyAssessCalendar 函数(已无其它引用)。注意:.grid-auto 此前为 align-items: start(上一轮结论),移除全宽卡片后不影响布局。
补充(约 11:15):vue-tsc 类型检查报两处 TS6133 死代码,已清理——
index.vue 中未使用的 levelNames 常量(疑似日历遗留);nine-safety.ts 的 getNineRiskCorrelation 中未使用的 elders 局部变量(generateElders 在 getRiskRadar 仍使用,不受影响)。
重新检查 nine-safety 相关文件:NO_NINE_SAFETY_ERRORS,删除干净无编译错误。