全球电力：发电结构仪表盘

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

实现方式

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

来源：Ember, Yearly Electricity Data（年度电力数据）和 Energy Institute 的 Statistical Review of World Energy（世界能源统计年鉴），由 Our World in Data 汇编。2025 年数值为 Ember 对该年的初步估计。