HTML数据仪表盘生成器

技能文档

---
name: shuju-yibiaopan-shengcheng
title: HTML数据仪表盘生成器
category: 开发工具
description: HTML数据仪表盘生成器，支持KPI指标卡片、柱状图/饼图/折线图、进度条、数据可视化等组件。当用户需要创建仪表盘、数据展示、KPI面板、数据可视化、数据图表、监控界面或数据报表时触发。触发词：仪表盘、数据看板、KPI面板、数据可视化、数据图表、监控大屏、数据报表、指标展示、Dashboard。
---

# HTML数据仪表盘生成器

## 核心能力

根据用户提供的数据和分析需求，生成独立的HTML数据仪表盘，包含KPI卡片、各类图表和数据展示组件，可直接在浏览器中打开查看。

## 组件库

### 1. KPI指标卡片

**卡片类型**：
- 数值卡片：大数字+同比/环比变化
- 趋势卡片：迷你折线图+关键数值
- 进度卡片：环形进度+完成百分比
- 状态卡片：指示灯+状态文字

**样式参数**：
- 颜色主题（蓝/绿/红/橙/紫）
- 数值格式（千分位/百分比/货币）
- 变化指示（↑绿涨/↓红跌 或反向）
- 图标选择

### 2. 图表组件

**折线图**：
- 单线/多线对比
- 面积填充
- 数据点标记
- 平滑曲线/折线

**柱状图**：
- 垂直/水平方向
- 分组/堆叠
- 渐变填充
- 数据标签

**饼图/环形图**：
- 标准饼图
- 环形图（中间可放总数）
- 南丁格尔玫瑰图
- 嵌套环形图

**散点图/气泡图**：
- 二维散点
- 气泡大小映射第三维度
- 趋势线

**其他图表**：
- 雷达图（多维能力对比）
- 热力图（时间×维度矩阵）
- 桑基图（流量/转化路径）
- 瀑布图（增减变化过程）
- 仪表盘（速度表样式）

### 3. 数据表格

**表格功能**：
- 排序（点击列头）
- 分页
- 搜索过滤
- 行高亮
- 条件格式（数值颜色映射）

### 4. 辅助组件

- 进度条（线性/环形）
- 时间线
- 地图（区域数据着色）
- 词云
- 倒计时/计时器
- 数据刷新按钮

## 布局系统

### 预设布局

**管理驾驶舱**：
```
┌──────┬──────┬──────┬──────┐
│ KPI1 │ KPI2 │ KPI3 │ KPI4 │
├──────┴──────┼──────┴──────┤
│  折线图     │   饼图      │
│  (趋势)     │  (占比)     │
├─────────────┼─────────────┤
│  柱状图     │   数据表    │
│  (对比)     │  (明细)     │
└─────────────┴─────────────┘
```

**监控大屏**：
```
┌─────────────────────────────┐
│        标题 + 时间          │
├──────┬──────────┬───────────┤
│ KPI  │          │   KPI     │
│ 卡片 │  主图表  │   卡片    │
├──────┤  (地图/  ├───────────┤
│ 辅助 │   3D)    │   辅助    │
│ 图表 │          │   图表    │
└──────┴──────────┴───────────┘
```

**简洁报告**：
```
┌─────────────────────────────┐
│  KPI1  │  KPI2  │  KPI3    │
├─────────────────────────────┤
│        主图表               │
├─────────────────────────────┤
│        数据表               │
└─────────────────────────────┘
```

## 设计风格

### 深色科技风
- 背景：深蓝/深灰渐变
- 文字：白色/浅蓝
- 图表：荧光色系（青/绿/紫）
- 适用：监控大屏、指挥中心

### 浅色商务风
- 背景：白色/浅灰
- 文字：深灰/黑色
- 图表：商务色系（蓝/绿/橙）
- 适用：管理汇报、业务报告

### 极简数据风
- 背景：纯白
- 文字：黑色/灰色
- 图表：单色系+一个强调色
- 适用：数据分析、研究展示

## 技术实现

### 技术栈
- 纯HTML + CSS + JavaScript
- 图表库：ECharts（CDN引入）
- 响应式：CSS Grid + Flexbox
- 无后端依赖，单文件可运行

### 数据接入
- 内嵌JSON数据
- CSV数据解析
- 支持手动刷新更新

## 工作流程

1. **需求确认**：了解数据内容、展示目标、受众
2. **数据准备**：整理数据格式、确定指标
3. **布局设计**：选择合适的布局方案
4. **组件配置**：配置各图表参数和样式
5. **代码生成**：输出完整HTML文件
6. **效果调整**：根据反馈微调样式

## 输出规范

- 单HTML文件，无外部依赖（CDN除外）
- 自适应PC和平板屏幕
- 文件编码UTF-8，支持中文
- 图表支持hover交互
- 代码结构清晰，便于修改数据

如何安装此技能？

访问技能市场，点击「安装」按钮，按提示将技能包放入 AI 编程助手的 skills 目录即可。