第十一周

（一）雷达图（多维度评分）

1. 技术栈：Vue3 + ECharts（封装在BaseEChart.vue） + Pinia + TS
2. 分层逻辑
   1. 底层封装 BaseEChart.vue
      • 封装 ECharts 初始化、自适应 resize、销毁生命周期，对外仅暴露option props，完全解耦图表实例操作；
      • 兼容雷达图、柱状图、折线图等多种 series 类型，一处封装多处复用。
   2. 数据流转 后端返回{dimensions: [{name:内容,score:28,max:30},...]} → assessmentStore存储 → ResultPage.vue用score.ts工具把维度名称、分数、满分转换成雷达图indicator指标与series数据 → 传给BaseEChart渲染雷达轴与得分区域。
   3. 业务价值 直观对比作文各个评分维度差距，比纯数字卡片视觉对比更强；TS 约束评分结构，避免字段缺失报错。

（二）柱状图（错误分布统计）

1. 技术栈：同雷达图，复用BaseEChart.vue ECharts 基座
2. 两种使用场景
   • 单次作文错误：ResultPage 读取本次批改的错误分类（语法、拼写、句式等数量），组装柱状图 option；
   • 历史整体错误统计：DashboardPage 通过dashboardDisplay.ts聚合historyStore内全部历史作业错误数据，生成汇总柱状图。
3. 复用优势 无需重复初始化 ECharts，仅更换option.series.type = 'bar'、替换 x/y 轴数据即可切换图表形态，大幅减少冗余代码；页面只关心业务数据，不关心图表底层渲染逻辑。
4. 自适应处理：BaseEChart内置窗口 resize 监听，桌面 / 手机端柱状图自动缩放适配卡片尺寸。

（三）词云 WordCloudSvg.vue（关键词可视化）

1. 技术栈：原生 SVG + Vue3 渲染，无重型第三方词云库
2. 实现原理
   • Props 接收关键词数组：[{text:"优美",count:8}, {text:"通顺",count:5}]；
   • 根据词频 count 动态计算文字字号、填充色；
   • 简单碰撞排布算法控制文字位置，避免重叠，全部用 SVG 标签渲染，体积轻、加载快，适配 PWA 离线环境（项目有 sw.js 离线服务）；
3. 页面挂载：ResultPage 拿到后端关键词数组，直接引入<WordCloudSvg :words="keywordList" />渲染作文核心词汇；
4. 对比 ECharts 词云优势：独立 SVG 组件轻量化，不会和雷达 / 柱状图的 ECharts 实例冲突，公共 fonts 目录引入 Geist 字体统一词云字体风格。