qwen3.8-flash 在「图表仪表板」的评测结果
这是该 AI 模型在此测试用例上的详细评测结果。
基本信息
- 模型名称：qwen3.8-flash
- 用例名称：图表仪表板
- 测试类型：网页生成
- 评测维度：仪表盘
系统提示词（System Prompt）
这是给 AI 模型的背景设定和角色指令：
你是一名资深前端开发工程师，专精于原生 Canvas API 绘图与 HTML/CSS/JavaScript 单文件应用开发。 回答要求： 1. 严禁使用 ECharts、Chart.js、D3.js 等任何第三方图表库，所有图表必须使用原生 Canvas 2D API 手动绘制。 2. 所有代码（HTML、CSS、JavaScript）必须封装在单个 HTML 文件中，可直接在浏览器中运行，无需任何外部依赖。 3. Canvas 绘图需保证坐标计算准确，坐标轴刻度、数据点位置与实际数值严格对应，不得出现视觉错位。 4. 代码结构清晰，HTML/CSS/JS 各司其职，变量命名语义化，关键逻辑需有简短注释。 5. 输出完整的、可直接复制运行的 HTML 代码，不得省略任何部分。
用户提示词（User Prompt）
这是用户给 AI 模型的具体任务要求：
请使用原生 HTML + CSS + JavaScript（Canvas API）生成一个图表仪表板页面，所有代码写在单个 HTML 文件中。 ## 页面布局 - 页面顶部有标题栏（「数据仪表板」） - 主体区域采用 2×2 CSS Grid 网格布局，包含 4 个图表卡片 - 每个卡片包含：卡片标题、时间筛选下拉框（选项：近7天 / 近30天 / 近90天）、Canvas 图表区域 - 页面整体风格简洁，卡片有圆角、阴影效果 ## 图表要求（均使用原生 Canvas 2D API 绘制） 1. **折线图**（卡片1：访问量趋势） - 展示过去 7 天的每日访问量（静态数据，自行设计合理数值） - 绘制 X 轴（日期标签）、Y 轴（数值刻度）、网格线、折线及数据点 - 坐标轴刻度与数据值严格对应 2. **柱状图**（卡片2：产品销售对比） - 展示 5 个产品的销售额对比（产品A~E，静态数据） - 绘制 X 轴（产品名）、Y 轴（销售额刻度）、各产品柱形（不同颜色区分） 3. **饼图**（卡片3：用户来源分布） - 4 个来源：直接访问、搜索引擎、社交媒体、外部链接 - 绘制各扇形区域，颜色区分，图例显示在图表旁边（名称 + 百分比） 4. **环形图**（卡片4：任务完成率） - 3 个状态：已完成、进行中、待处理 - 在环形中心显示总任务数，图例显示各状态数量及占比 ## 交互功能 - **Hover 提示**：鼠标悬停在数据点（折线图）、柱形（柱状图）、扇形（饼图/环形图）上时，在鼠标附近显示该数据的名称和数值 - **图例点击**：饼图和环形图的图例项可点击，点击后对应扇形高亮或置灰（切换显示状态） - **加载动画**：页面加载时，4 个图表均有简单的绘制动画（如折线从左到右绘出、柱形从底部升起、饼图/环形图扇形旋转展开） ## 数据要求 - 使用硬编码的静态数据，数值合理（如访问量在 500~5000 之间，销售额在 1000~50000 之间） - 时间筛选下拉框切换时，可更新对应图表的数据（为不同时间段准备不同的静态数据集）
任务要求
AI 模型需要满足以下要求：
- Canvas 坐标计算准确性：4 个图表的坐标轴刻度、数据点/柱形/扇形位置与实际数值严格对应，不存在视觉错位或比例失真
- 图表类型完整性：折线图、柱状图、饼图、环形图均使用原生 Canvas API 正确绘制，包含坐标轴（折线/柱状）、图例（饼/环形）等必要元素
- Hover 交互实现：鼠标悬停时能准确识别命中的数据区域，并在合适位置显示包含名称和数值的提示框
- 加载动画效果：页面初始化时 4 个图表均有可见的绘制动画，动画流畅（使用 requestAnimationFrame）
- 时间筛选联动：下拉框切换时对应图表数据更新并重新绘制，不同时间段数据有明显差异
- 代码结构与可读性：单文件结构完整，HTML/CSS/JS 职责清晰，关键函数有注释，无第三方库依赖
评测结果
综合得分
该模型在此用例的得分为：93.0 分（满分 100 分），已通过
基础难度评测结果
- 得分：93.0 分
- 通过状态：已通过
模型生成产物
以下是该模型针对此任务的实际生成内容：
下面是完整的单文件 HTML 代码，可直接保存为 `.html` 文件并在浏览器中打开运行。所有图表均使用原生 Canvas 2D API 手动绘制，无第三方依赖。 ```html 数据仪表板 :root { --bg: #f1f5f9; --card: #ffffff; --text: #0f172a; --muted: #64748b; --border: #e2e8f0; --shadow: 0 10px 25px rgba(15, 23, 42, 0.08); } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif; background: var(--bg); color: var(--text); } .topbar { position: sticky; top: 0; z-index: 10; background: #fff; border-bottom: 1px solid var(--border); padding: 18px 28px; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04); } .topbar h1 { margin: 0; font-size: 24px; font-weight: 700; } .topbar p { margin: 4px 0 0; color: var(--muted); font-size: 13px; } .dashboard { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 20px; max-width: 1600px; margin: 0 auto; } .card { background: var(--card); border-radius: 16px; box-shadow: var(--shadow); padding: 18px 18px 14px; border: 1px solid rgba(148, 163, 184, 0.12); } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .card-head h2 { margin: 0; font-size: 16px; font-weight: 650; } .time-filter { appearance: none; border: 1px solid var(--border); background: #fff; border-radius: 10px; padding: 7px 30px 7px 12px; font-size: 13px; color: #334155; cursor: pointer; outline: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; } .time-filter:focus { border-color: #93c5fd; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12); } .chart-area { display: flex; gap: 14px; align-items: stretch; height: 320px; } .canvas-wrap { position: relative; flex: 1 1...
AI 评审点评
以下是 AI 评审对该模型输出的点评：
【CLAUDE】该候选输出质量优秀，完整实现了任务要求的全部功能：四种图表类型（折线图、柱状图、饼图、环形图）均用原生 Canvas 2D API 手动绘制，坐标计算准确，视觉效果精良；三项交互功能（Hover 提示、图例点击、加载动画）均完整实现且逻辑正确；页面采用 2×2 CSS Grid 布局，时间筛选联动有效，代码结构清晰、可维护性强。亮点包括：niceScale 算法保证刻度优雅对齐、DPR 适配、ResizeObserver 响应式重绘、easeOutCubic 缓动动画。轻微不足：图例「高亮」实现为置灰非选中项而非高亮选中项，与需求描述略有偏差；折线图近30/90天标签密集时有跳标处理但可读性仍一般。总体而言是一份高质量的实现。 【GEMINI】这是一份极其优秀的 Canvas 仪表板实现。作者展现了深厚的前端功底，不仅完美达成了所有基础要求和交互指标，还在高清适配、刻度算法、极坐标碰撞检测、面向对象代码封装以及响应式布局等细节上做到了极致，代码整洁且极具专业度。 【KIMI】该实现是一份高质量的原生Canvas仪表板解决方案，完全满足题目核心要求：无第三方库、单文件、坐标计算准确、四种图表类型完整、交互功能齐全。面向对象的架构设计使得代码可维护性良好，动画效果流畅，视觉美观度达到生产级别。主要改进空间在于环形图动画期间中心数值的准确性、图例高亮效果的补充，以及代码中HTML实体编码的规范化处理。整体而言，这是一个可直接用于实际项目的优秀实现。
进阶难度评测结果
- 得分：91.0 分
- 通过状态：已通过
模型生成产物
以下是该模型针对此任务的实际生成内容：
# PULSE · 数据脉搏仪表板 下面是完整的单文件实现：**零第三方图表库**，四张图全部用原生 Canvas 2D 手绘，单一 `requestAnimationFrame` 主循环驱动所有动画，Web Audio 合成音效在首次点击后初始化。 ```html PULSE · 数据脉搏 | 分析中枢 /* ============================================================ 0. 设计令牌 ============================================================ */ :root{ --display:'Futura','Century Gothic','Avenir Next Condensed','Trebuchet MS','PingFang SC','Microsoft YaHei',sans-serif; --body:'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif; --mono:'SF Mono','JetBrains Mono','Roboto Mono',Consolas,Menlo,monospace; --ink:#0A2A33; --ink-soft:#3E626C; --muted:#7A949B; --paper:#EDF3F3; --card:#fff; --teal:#0FB5A0; --ocean:#1E6F8E; --aqua:#5AC8D8; --deep:#0E4257; --pale:#A9C6CC; --amber:#FF8A4C; --line:rgba(10,42,51,.10); --sh-1:0 1px 2px rgba(10,42,51,.05),0 8px 24px -14px rgba(10,42,51,.28); --sh-2:0 2px 6px rgba(10,42,51,.07),0 26px 48px -22px rgba(10,42,51,.42); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;font-family:var(--body);color:var(--ink);background:var(--paper); -webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh; } body::before{ content:'';position:fixed;inset:0;z-index:-2; background: radial-gradient(900px 520px at 6% -10%,rgba(15,181,160,.20),transparent 62%), radial-gradient(820px 480px at 96% 2%,rgba(30,111,142,.22),transparent 60%), radial-gradient(760px 520px at 55% 112%,rgba(90,200,216,.18),transparent 62%), linear-gradient(180deg,#F5F9F9 0%,#E6EEEE 100%); } body::after{ content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.55; background-image:linear-gradient(rgba(10,42,51,.055) 1px,transparent 1px), linear-gradient(90deg,rgba(10,42,51,.055) 1px,transparent 1px); background-size:46px 46px; -webkit-mask-image:radial-gradient(120% 80% at 50% 0%,#000 20%,transparent 78%); mask-image:radial-gradient(120% 80% at 50% 0%,#000 20%,transparent 78%); } .wrap{max-width:1340px;margin:0 auto;padding:0 clamp(16px,3.2vw,38px)}...
AI 评审点评
以下是 AI 评审对该模型输出的点评：
【CLAUDE】这是一份质量相当高的单文件仪表板实现，完整覆盖了任务要求的四种图表类型、时间筛选联动、悬停 Tooltip、图例显隐、加载动画和 Web Audio 音效六大核心功能，且全部使用原生 Canvas 2D API 手绘，零第三方依赖。代码架构设计合理，ChartBase 基类 + 单一 rAF 主循环 + 脏标记机制体现了较强的工程素养。视觉设计精良，配色统一，动画流畅。主要不足在于：live.drawQueued 与 dirty 命名不一致存在潜在 bug、部分 DOM 操作频率较高、全局 chips 与独立 select 的混合状态反馈略有歧义。整体而言是一份接近生产级别的实现。 【GEMINI】这是一份教科书级别的原生 Canvas 仪表板实现。作者不仅以极高的视觉美感和精确的数学计算手绘了全部图表，还在交互细节、动画流畅度、Web Audio 音效合成以及 Canvas 性能优化（单一 rAF、脏标记、视口检测、DPR 适配）上展现了极其深厚的前端功底，无可挑剔。 【KIMI】该实现是一份高质量的原生 Canvas 仪表板，完全满足零第三方依赖的核心要求。四种图表手绘精细，视觉设计专业，交互功能完整，动画流畅，音效系统规范。代码架构采用面向对象设计，性能优化到位，响应式适配完善。在细节层面，Tooltip 命中精度、图例状态同步、时间筛选联动等关键功能均正确实现。主要改进空间在于：严格遵循规范中'中心显示总数'的静态要求、优化全局状态管理、以及增强代码的可维护性（如种子化随机数据）。整体属于优秀水准，可直接用于生产环境参考。
相关链接
您可以通过以下链接查看更多相关内容：
