华安保险车险周报HTML可视化生成器

核心目标

将周度车险保单数据转化为交互式网页仪表盘，采用标签页切换和下钻分析，支持机构/客户类别双维度分析，麦肯锡风格设计。

使用流程

快速开始（3步）

1. 确认配置文件（首次使用需检查）

ls references/thresholds.json # 阈值配置 ls references/plans.json # 保费计划（可选）

2. 上传数据文件

用户上传：车险保单变动成本清单.xlsx

3. 运行生成命令

cd scripts python generate_html_dashboard.py <数据文件> <周次> <机构名称> ../references

示例

python generate_html_dashboard.py ../data.xlsx 49 四川分公司 ../references

数据文件要求

支持格式：

• .xlsx / .xls

• Excel 文件（推荐）

• .csv

• CSV 文本文件（UTF-8 编码）

• .json

• JSON 格式（数组或对象）

• .db / .duckdb

• DuckDB 数据库

必需字段（与 insurance-weekly-report 一致）：

• 机构 ：三级机构名称

• 客户类别 ：客户分类

• 签单保费 ：本周保费收入（元）

• 满期赔付率 ：百分比值

• 费用率 ：百分比值

• 变动成本率 ：百分比值

• 已报告赔款 ：已报案赔款金额（元）

• 出险率 ：百分比值

• 案均赔款 ：平均每案赔款（元）

工作流程

完整网页生成流程

1. 数据准备 ↓ 用户上传数据文件 系统识别格式（Excel/CSV/JSON/DuckDB）

2. 数据处理 ↓ ├─ 读取数据 ├─ 数据验证 ├─ 应用阈值配置 └─ 计算聚合指标 ├─ 分机构聚合 └─ 分客户类别聚合

3. 图表生成 ↓ 为5个标签页生成ECharts配置 ├─ 经营概览：KPI卡片 + 四象限散点图 ├─ 保费进度：条形图 + 计划对比图 ├─ 变动成本：条形图 + 趋势图 ├─ 损失暴露：气泡图 + 明细表 └─ 费用支出：条形图 + 费用结构图

4. HTML生成 ↓ ├─ 使用模板（assets/dashboard_template.html） ├─ 嵌入数据和图表配置 ├─ 配置交互逻辑 │ ├─ 标签页切换 │ ├─ 下钻分析 │ └─ 响应式布局 └─ 应用麦肯锡配色（#a02724）

5. 交互功能 ↓ ├─ 标签页切换（5个Tab） ├─ 下钻分析 │ ├─ 点击机构 → 查看该机构明细 │ └─ 点击客户类别 → 查看该类别明细 └─ 图表联动 └─ 选中数据点 → 高亮关联数据

6. 输出交付 ↓ 生成文件：{机构名称}_周报_第{周次}周_仪表盘.html 特点： ├─ 单文件，无外部依赖 ├─ 可直接用浏览器打开 └─ 支持导出图片

决策逻辑

• 格式识别：自动判断数据文件类型和结构

• 图表选择：根据数据特点选择最合适的可视化方式

• 交互设计：支持多层级下钻，便于深入分析

• 配色方案：统一使用麦肯锡深红色系，保持专业性

网页结构设计

页面布局

┌─────────────────────────────────────────────────────────┐ │ 华安保险车险第XX周经营分析 | 四川分公司 | 2025-XX-XX │ ├─────────────────────────────────────────────────────────┤ │ [经营概览] [保费进度] [变动成本] [损失暴露] [费用支出] │ ├─────────────────────────────────────────────────────────┤ │ │ │ 当前标签页内容区域 │ │ - 核心指标卡片 │ │ - 交互式图表（ECharts） │ │ - 分机构/分客户类别切换按钮 │ │ │ └─────────────────────────────────────────────────────────┘

标签页内容

Tab 1: 经营概览

核心指标卡片（顶部）：

• 签单保费（大数字，48px）

• 变动成本率（带状态色）

• 满期赔付率

• 费用率

交互图表：

• 四象限散点图：X轴=年计划达成率，Y轴=变动成本率

• 气泡大小=签单保费

• 点击数据点可下钻查看详情

下钻功能：

• 默认显示：分机构视图

• 切换按钮：[按机构] [按客户类别]

Tab 2: 保费进度

表格展示：

• 列：机构/客户类别 | 年累计 | 当周值 | 年计划达成率 | 周计划达成率

• 未达标行标红高亮

可视化图表：

• 柱状图：年计划达成率对比

• 进度条：周计划完成情况

下钻功能：

• [按机构] [按客户类别] 切换

Tab 3: 变动成本

四象限散点图：

• X轴：满期赔付率

• Y轴：费用率

• 气泡大小：签单保费占比

• 基准线：X=70%, Y=18%（可配置）

问题机构标注：

• 自动标注高成本机构名称

• 悬停显示详细数据

下钻功能：

• [按机构] [按客户类别] 切换

Tab 4: 损失暴露

子标签页：

• [气泡图分析] [二级指标分析]

气泡图（默认）：

• X轴：满期赔付率

• Y轴：当年已报告赔款占比

• 气泡大小：当周已报告赔款占比

二级指标（四象限）：

• X轴：出险率

• Y轴：案均赔款

• 基准线可配置

下钻功能：

• [按机构] [按客户类别] 切换

Tab 5: 费用支出

四象限散点图：

• X轴：费用率

• Y轴：费用占比超保费占比

• 标注问题机构

费用趋势图（可选）：

• 折线图：费用率随时间变化

下钻功能：

• [按机构] [按客户类别] 切换

交互功能设计

标签页切换

• 点击顶部标签切换内容区域

• 保持当前下钻状态（机构/客户类别）

• URL哈希锚点支持（可书签分享）

下钻分析

• 每个标签页提供 [按机构] [按客户类别] 切换按钮

• 切换时图表自动重新渲染

• 数据实时计算聚合

图表交互

• 鼠标悬停：显示详细数据提示框

• 点击数据点：高亮显示，展开详情面板

• 缩放平移：ECharts 原生支持

• 导出功能：图表右键菜单导出为图片

响应式设计

• 桌面端：1920x1080 最佳

• 平板端：自动调整布局

• 移动端：堆叠式布局，垂直滚动

麦肯锡风格规范

配色方案

--primary-red: #a02724; /* 主色-华安红 / --success-green: #00b050; / 达标-绿 / --warning-yellow: #ffc000; / 预警-黄 / --danger-red: #c00000; / 严重-红 / --gray-dark: #333333; / 文本主色 / --gray-medium: #666666; / 文本次要 / --gray-light: #cccccc; / 边框/分隔线 / --background: #f5f5f5; / 页面背景 */

字体规范

• 标题：微软雅黑 Bold 24px

• 核心数字：Arial Bold 48px

• 正文：微软雅黑 14px

• 图表标签：12px

图表设计

• 配色：单色或双色，避免渐变

• 基准线：虚线样式，灰色

• 数据标注：直接标注，不使用图例

• 气泡图：透明度70%，边框实线

配置文件说明

references/thresholds.json

与 insurance-weekly-report 共享，定义所有阈值。

references/plans.json（可选）

保费计划数据，用于计算达成率。

references/field_mappings.json（可选）

字段映射配置，支持自定义字段名称。

技术栈

• 前端框架：纯 HTML5 + CSS3 + JavaScript（无依赖）

• 图表库：ECharts 5.x（CDN引入）

• 数据处理：Python pandas + numpy

• 模板引擎：Jinja2（生成HTML）

• 样式框架：自定义CSS（麦肯锡风格）

生成流程

Step 1: 数据处理

• 读取数据文件（Excel/CSV/JSON/DuckDB）

• 数据验证和清洗

• 计算聚合指标（分机构、分客户类别）

• 生成JSON数据文件

Step 2: HTML生成

• 加载HTML模板（assets/templates/dashboard.html）

• 使用Jinja2渲染数据

• 嵌入JSON数据到JavaScript

• 生成单文件HTML（自包含）

Step 3: 输出

• 保存HTML文件到输出目录

• 可选：生成配套资源文件夹（图片/CSS分离）

• 返回文件路径供用户下载

输出文件结构

选项1：单文件HTML（推荐）

车险第49周经营分析_四川分公司_20251209.html # 自包含，双击即可打开

选项2：分离式结构

dashboard/ ├── index.html # 主页面 ├── data/ │ └── data.json # 数据文件 ├── css/ │ └── styles.css # 样式表 └── js/ └── charts.js # 图表逻辑

KPI 计算公式

与 insurance-weekly-report 和 kpi-calculator 完全一致：

核心 KPI

• 满期赔付率 = 已报告赔款 / 满期保费 × 100%

• 费用率 = 费用金额 / 签单保费 × 100%

• 变动成本率 = 满期赔付率 + 费用率

• 满期出险率 = (出险件数 / 保单件数) × 满期率

• 案均赔款 = 已报告赔款 / 出险件数

占比指标

• 保费占比 = 三级机构签单保费 / 各机构签单保费之和

• 费用占比 = 三级机构费用 / 各机构费用之和

• 费用占比超保费占比 = 费用占比 - 保费占比

调用示例

场景1：基础用法

用户：帮我把第49周的车险数据生成一个可视化网页

Skill执行：

1. 检查 references/ 配置文件
2. 识别文件格式（.xlsx）
3. 运行：python scripts/generate_html_dashboard.py data.xlsx 49 四川分公司 references/
4. 生成单文件HTML
5. 返回文件路径

场景2：交互式仪表盘

用户：我需要一个可以下钻分析的HTML报告

Skill执行：

1. 确认用户需要交互功能
2. 生成包含标签切换和下钻功能的HTML
3. 测试所有交互功能
4. 返回文件

场景3：多周对比

用户：生成第48周和第49周的对比网页

Skill执行：

1. 处理两周数据
2. 生成趋势对比图表
3. 添加周度对比标签页
4. 返回HTML

版本信息

• 版本：v1.0.0

• 创建日期：2025-12-09

• 维护者：Alongor

• 设计风格：McKinsey & Company

• 依赖技能：insurance-weekly-report (数据处理逻辑)

核心特性

✅ 标签页切换 - 5个核心分析维度 ✅ 下钻分析 - 机构/客户类别双维度 ✅ 交互式图表 - ECharts 支持 ✅ 响应式布局 - 适配多设备 ✅ 麦肯锡风格 - 专业视觉设计 ✅ 单文件输出 - 无需服务器部署 ✅ 数据隐私 - 本地运行，无外部请求