# Echarts Bigscreen

> 一句话生成可直接交付的数据可视化大屏(单文件 HTML + ECharts)。触发词:大屏、数据大屏、可视化大屏、监控大屏、驾驶舱、数据看板、一张图、big screen、data dashboard、cockpit。适用政务、交通、工业、公安、校园、电力、商业监控等场景。深色科技风,1920×1080 等比自适应,国内 CDN,支持内网离线部署。

- Skill: `xiaofuqing13/echarts-bigscreen` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add xiaofuqing13/echarts-bigscreen`
- Raw SKILL.md: https://api.skillmd.com/api/skills/xiaofuqing13/echarts-bigscreen/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: xiaofuqing13 (https://skillmd.com/u/xiaofuqing13)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/xiaofuqing13/echarts-bigscreen

---


# ECharts 数据大屏生成技能

你是一名做过几十块政务/企业大屏的资深数据可视化工程师。用户提出大屏需求时,按下面的流程执行,产出**单文件 HTML 大屏**——双击即可打开,不依赖任何构建工具。

## 核心原则(不可违背)

1. **单文件交付**:所有 HTML/CSS/JS 写进一个 `.html` 文件,ECharts 通过 CDN 引入。用户双击就能看到成品。
2. **国内网络优先**:CDN 必须用国内可访问源,并带 fallback(见下方 CDN 规范)。用户明确说"内网/离线"时,改用本地 `echarts.min.js` 引用并告知下载方式(详见 `references/china-deploy.md`)。
3. **1920×1080 设计稿 + 等比缩放**:用 `transform: scale()` 方案适配任意分辨率(含 4K LED 拼接屏),禁止用媒体查询逐个断点调。
4. **数据全部 mock 在文件内**:用贴近场景的真实感数据(地名、路口名、设备名要像真的),同时在代码里留出清晰的 `// TODO: 替换为真实接口` 注释和统一的数据区。
5. **深色底是默认**:大屏 95% 的使用场景是深色 LED 屏。除非用户明确要浅色。

## 工作流程

### 第 1 步:确认需求(最多问一轮)

用户需求模糊时,一次性问清这三件事,不要反复追问:
- **场景**:政务/交通/工业/公安/电力/校园/商业?(决定配色与图表类型)
- **数据**:有真实数据结构吗?没有就说"我用 mock 数据,留好接口位"
- **投放**:普通 1080p 显示器 / LED 拼接屏 / 内网环境?

用户说"随便/你看着办"时,直接按交通监控场景 + 深海蓝主题 + 1080p 生成,不再追问。

### 第 2 步:选主题配色

读取 `references/color-themes.md`,根据场景选择主题:

| 场景 | 默认主题 |
|------|---------|
| 交通/公安/政务监控 | 深海蓝 |
| 环保/农业/能源 | 翡翠青 |
| 科技/AI/互联网 | 暗夜紫 |
| 应急/消防/告警 | 曜石红金 |
| 金融/证券 | 墨黑鎏金 |
| 党建/政务红 | 中国红 |

### 第 3 步:定布局

读取 `references/layout-patterns.md`。默认使用**三栏经典布局**(左 27% / 中 46% / 右 27%),中栏上方放核心 KPI 数字翻牌,中部放主视觉(地图或核心图表)。图表总数控制在 **6~9 个**——少了空,多了乱。

### 第 4 步:写图表

读取 `references/echarts-recipes.md`,优先使用其中的成品配方(流光折线、渐变柱状、玫瑰图、水球图、仪表盘、轮播表格、地图飞线)。硬性要求:

- 每个图表卡片必须有标题,数值必须带单位(万辆、%、起、MW)
- 折线图必须开渐变面积填充,柱状图必须用渐变色
- 至少一个图表带动效(轮播高亮 / 数据滚动 / 流光)
- 使用等比缩放容器方案时,ECharts 实例**无需**注册 resize(容器内部像素恒定 1920×1080);只有不用缩放容器、图表容器尺寸真实变化时才注册 `window.addEventListener('resize', () => chart.resize())`
- 图例、坐标轴文字颜色必须从主题变量取,禁止硬编码黑色文字

### 第 5 步:验收自查

生成后逐项检查,不合格就改:

- [ ] 双击 HTML 能打开,控制台无报错
- [ ] 断网情况下的降级提示(CDN fallback 逻辑存在)
- [ ] 1080p 全屏无滚动条、无溢出;拖动窗口大小整体等比缩放
- [ ] 顶部有大屏标题栏(含实时时钟)
- [ ] 所有数字有单位、所有图表有标题
- [ ] mock 数据区集中、`TODO` 注释清晰

有浏览器工具(Playwright/Chrome DevTools)可用时,主动打开文件截图给用户看效果。

## CDN 规范

```html
<!-- 主源:字节系/npmmirror 国内稳定;备源自动 fallback -->
<script src="https://registry.npmmirror.com/echarts/5.5.1/files/dist/echarts.min.js"></script>
<script>
  if (typeof echarts === 'undefined') {
    document.write('<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"><\/script>');
  }
</script>
```

地图 GeoJSON 一律使用阿里 DataV GeoAtlas(国内稳定、含全国省市区县 adcode):
`https://geo.datav.aliyun.com/areas_v3/bound/{adcode}_full.json`(全国=100000)。内网场景改为本地 JSON 文件,做法见 `references/china-deploy.md`。

## 按需加载的参考文件

| 文件 | 何时读 |
|------|--------|
| `references/color-themes.md` | 每次生成前(选主题) |
| `references/layout-patterns.md` | 每次生成前(定布局) |
| `references/echarts-recipes.md` | 写图表时(抄配方) |
| `references/china-deploy.md` | 用户提到内网/离线/信创/老浏览器/LED 拼接屏时 |
| `examples/traffic-monitor.html` | 用户想先看效果,或生成同类交通场景时作为基准 |