电动汽车销量
一份嵌在文档页面中的五页简报。每张幻灯片都是一个 16:9 的框,文字以容器单位设定大小,因此整张幻灯片会像演示文稿一样整体缩放,从手机到投影仪都是如此。可以滑动或滚动切换幻灯片,在演示获得焦点后使用按钮或方向键,或按 F 进入全屏。指向 #evd-3 的链接会直接打开第三张幻灯片。
演示
逐页说明
- 电动化转折:标题页,引出一份关于 2012 年至 2025 年全球电动汽车销量的简报。
- 2025 年销量:核心数字 2120 万辆,以及它相比 2024 年和 2012 年的增长和中国所占的份额。
- 翻一番,再翻一番:按年份绘制的全球销量柱状图,最新年份以斜线填充,因为它最有可能被修订。
- 2020 年欧洲领先;如今中国领先:各市场在全球销量中所占份额随时间的变化。
- 数字说明了什么:三条要点和数据来源。
数据
数据表
| 年份 | 世界 | 中国 | 欧洲 | 美国 | 世界其他地区 |
|---|
单位:百万辆。世界其他地区为全球总量减去三大市场。
实现方式
-
幻灯片是 flex 行中的
<section>,使用scroll-snap-type: x mandatory;每张都是一个尺寸容器,所有字号都以cqw为单位,因此幻灯片在任何宽度下都保持比例。 -
图表是带固定
viewBox的 SVG,根据数据绘制一次并随幻灯片缩放,因此图表与文字总是一起放大。 -
导航大约只有三十行:按钮和方向键滚动轨道,
IntersectionObserver让计数器和圆点与滑动保持同步。requestFullscreen()把舞台变成投影视图。
数据来源: IEA Global EV Outlook (国际能源署《全球电动汽车展望》),由 Our World in Data 整理(2026 年 6 月更新)。2025 年的数值是最新报告年份,最有可能被修订。
用 ❤ 和 Htmlpress 构建