PATTERN 01

可展开条形图

点击任意条形 → 展开子分类 + 分析 + 典型案例 + 钻取链接

↳ 每条柱子的宽度按最大值归一化，颜色区分正向/负向。展开动画用 CSS Grid grid-template-rows 0fr→1fr。
故障分类排行（2026年5月）
01.
硬件故障
45.2%
02.
软件故障
32.1%
03.
其他
22.7%
PATTERN 02

张力对比

同一维度的正反两面并排展示

↳ 每条柱子内部分为"预期"（浅色）和"已体验"（深色）两段。正向用靛蓝系，负向用赤陶橙系。
维修方式满意度对比

远程修复

共 180 条工单

不满意 12%满意 78%

远程指导很快解决了问题，不用等工程师上门。

上海第一人民医院 · 设备科

现场修复

共 322 条工单

不满意 8%满意 85%

工程师到场后 30 分钟内解决问题。

瑞金医院 · 放射科

PATTERN 03

可排序条形卡片

点击排序按钮 → 卡片重新排列，条形宽度动画切换

排序：
PATTERN 04

背景气泡地图

地理底图 + 气泡叠加：大小=工单量，颜色=满意度

↳ SVG 两层结构：country-layer（省界轮廓）+ bubble-layer（数据气泡）。气泡半径用 √n 缩放避免大值压视觉。
2026年5月 全国工单地理分布
满意 ≥ 90%
满意 80–90%
满意 < 80%
工单量
PATTERN 05

哑铃图

两点连线：上月 vs 本月，一眼看出变化方向和幅度

↳ 每行两个圆点（浅=上期，深=本期）+ 连接线。改善=靛蓝，恶化=赤陶。入场动画：圆点从上期位置滑到本期位置。
各地区 SLA 达标率变化（4月 → 5月）
60%
70%
80%
90%
100%
4月（上月）
5月（本期）
变化幅度
Agent Skill

下载 Skill 包

含 SKILL.md + 5 个 HTML 模板，导入任何支持 SKILL.md 格式的 AI Agent（Hermes、Claude Code 等）即可生成同类交互分析报告。

Download .zip (20KB)
SKILL.md 5 × HTML templates zero deps