# 电力仪表盘

> 一个运营风格的全球电力结构仪表盘：带迷你走势图的 KPI 卡片、100% 堆叠柱状图、环形图和可排序表格，数据来自 Ember。

一个运营风格的仪表盘，只用一个 HTML 页面：四张带迷你走势图和变化值的 KPI 卡片、一张 100% 堆叠柱状图、一张最新年份的环形图和一张可排序表格，排布在十二列的 CSS 网格上。它让你一眼回答一个问题：全球电力中仍有多少来自燃烧化石燃料，这一比例又在以多快的速度变化？

## 发电概览

Ember 年度数据 · 2000–2025

低碳占比 **42.6%**

*▲ +9.1 个百分点* 较 2015 年 · 向好

太阳能 **8.8%**

*▲ +7.7 个百分点* 较 2015 年 · 向好

风电 **8.5%**

*▲ +5.1 个百分点* 较 2015 年 · 向好

煤电 **33.0%**

*▼ −5.7 个百分点* 较 2015 年 · 向好

## 各电源占比，2000–2025

占发电量 % · 悬停查看某一年



## 2025 年发电结构

悬停查看某一扇区

太阳能发电在 2025 年超过了风电，两者合计的发电量如今已超过水电。

## 各电源变化

占发电量 % · 点击表头排序

| 电源 | 2000 | 2015 | 2025 | 较 2015 年（百分点） |
| -- | ---- | ---- | ---- | ------------- |

“其他”包括石油（2025 年为 2.7%）、生物质能（2.2%）以及地热、潮汐能和其他可再生能源（0.3%）。

## 实现方式

- **布局**是站点标准内容栏中的十二列 CSS 网格：决定布局的是容器查询而不是视口——网格宽度达到 40rem 后，KPI 卡片各占三列，柱状图和环形图以 7 + 5 的比例共用一行。
- **状态色**只用于变化值，并且总是配有箭头和“向好”二字，因此颜色从不单独承载含义。系列颜色专用于各电源，在每张图表、图例和表格中都保持一致。
- **柱状图和环形图**都是由同一个数字数组绘制的 SVG：七个系列以 1px 的间隔堆叠，悬停时不画十字准线，只高亮所指的年份，环形图的弧线则用简单的三角函数计算。
- **表格**是普通的 `<table>`，htmlpress 会在点击任意表头时排序，因此排序功能开箱即得。

来源：[Ember, Yearly Electricity Data](https://ember-energy.org/data/)（年度电力数据）和 Energy Institute 的 Statistical Review of World Energy（世界能源统计年鉴），由 [Our World in Data](https://ourworldindata.org/electricity-mix) 汇编。2025 年数值为 Ember 对该年的初步估计。