华安保险车险周报HTML可视化生成器
核心目标
将周度车险保单数据转化为交互式网页仪表盘，采用标签页切换和下钻分析，支持机构/客户类别双维度分析，麦肯锡风格设计。
使用流程
快速开始（3步）
bash
# 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 一致）：
- •
机构：三级机构名称 - •
客户类别：客户分类 - •
签单保费：本周保费收入（元） - •
满期赔付率：百分比值 - •
费用率：百分比值 - •
变动成本率：百分比值 - •
已报告赔款：已报案赔款金额（元） - •
出险率：百分比值 - •
案均赔款：平均每案赔款（元）
工作流程
完整网页生成流程
code
1. 数据准备
↓
用户上传数据文件
系统识别格式（Excel/CSV/JSON/DuckDB）
2. 数据处理
↓
├─ 读取数据
├─ 数据验证
├─ 应用阈值配置
└─ 计算聚合指标
├─ 分机构聚合
└─ 分客户类别聚合
3. 图表生成
↓
为5个标签页生成ECharts配置
├─ 经营概览：KPI卡片 + 四象限散点图
├─ 保费进度：条形图 + 计划对比图
├─ 变动成本：条形图 + 趋势图
├─ 损失暴露：气泡图 + 明细表
└─ 费用支出：条形图 + 费用结构图
4. HTML生成
↓
├─ 使用模板（assets/dashboard_template.html）
├─ 嵌入数据和图表配置
├─ 配置交互逻辑
│ ├─ 标签页切换
│ ├─ 下钻分析
│ └─ 响应式布局
└─ 应用麦肯锡配色（#a02724）
5. 交互功能
↓
├─ 标签页切换（5个Tab）
├─ 下钻分析
│ ├─ 点击机构 → 查看该机构明细
│ └─ 点击客户类别 → 查看该类别明细
└─ 图表联动
└─ 选中数据点 → 高亮关联数据
6. 输出交付
↓
生成文件：{机构名称}_周报_第{周次}周_仪表盘.html
特点：
├─ 单文件，无外部依赖
├─ 可直接用浏览器打开
└─ 支持导出图片
决策逻辑
- •格式识别：自动判断数据文件类型和结构
- •图表选择：根据数据特点选择最合适的可视化方式
- •交互设计：支持多层级下钻，便于深入分析
- •配色方案：统一使用麦肯锡深红色系，保持专业性
网页结构设计
页面布局
code
┌─────────────────────────────────────────────────────────┐ │ 华安保险车险第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 最佳
- •平板端：自动调整布局
- •移动端：堆叠式布局，垂直滚动
麦肯锡风格规范
配色方案
css
--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（推荐）
code
车险第49周经营分析_四川分公司_20251209.html # 自包含，双击即可打开
选项2：分离式结构
code
dashboard/
├── index.html # 主页面
├── data/
│ └── data.json # 数据文件
├── css/
│ └── styles.css # 样式表
└── js/
└── charts.js # 图表逻辑
KPI 计算公式
与 insurance-weekly-report 和 kpi-calculator 完全一致：
核心 KPI
- •满期赔付率 = 已报告赔款 / 满期保费 × 100%
- •费用率 = 费用金额 / 签单保费 × 100%
- •变动成本率 = 满期赔付率 + 费用率
- •满期出险率 = (出险件数 / 保单件数) × 满期率
- •案均赔款 = 已报告赔款 / 出险件数
占比指标
- •保费占比 = 三级机构签单保费 / 各机构签单保费之和
- •费用占比 = 三级机构费用 / 各机构费用之和
- •费用占比超保费占比 = 费用占比 - 保费占比
调用示例
场景1：基础用法
code
用户：帮我把第49周的车险数据生成一个可视化网页 Skill执行： 1. 检查 references/ 配置文件 2. 识别文件格式（.xlsx） 3. 运行：python scripts/generate_html_dashboard.py data.xlsx 49 四川分公司 references/ 4. 生成单文件HTML 5. 返回文件路径
场景2：交互式仪表盘
code
用户：我需要一个可以下钻分析的HTML报告 Skill执行： 1. 确认用户需要交互功能 2. 生成包含标签切换和下钻功能的HTML 3. 测试所有交互功能 4. 返回文件
场景3：多周对比
code
用户：生成第48周和第49周的对比网页 Skill执行： 1. 处理两周数据 2. 生成趋势对比图表 3. 添加周度对比标签页 4. 返回HTML
版本信息
- •版本：v1.0.0
- •创建日期：2025-12-09
- •维护者：Alongor
- •设计风格：McKinsey & Company
- •依赖技能：insurance-weekly-report (数据处理逻辑)
核心特性
✅ 标签页切换 - 5个核心分析维度 ✅ 下钻分析 - 机构/客户类别双维度 ✅ 交互式图表 - ECharts 支持 ✅ 响应式布局 - 适配多设备 ✅ 麦肯锡风格 - 专业视觉设计 ✅ 单文件输出 - 无需服务器部署 ✅ 数据隐私 - 本地运行，无外部请求