新机周销量追踪 · smartphoneSellOut

简体中文 | English

一个纯静态网页，用折线图查看各品牌手机新机上市后的逐周销量（SO，单位：万台）。数据都在 data.csv 里，页面打开时自动读取，不需要后端，也没有构建步骤。

在线访问：https://muinocriz.github.io/smartphoneSellOut/

数据来源

• 主要来源：微博博主 RD观测
• 补充来源：微博博主 数码闲聊站

数据由作者根据以上博主公开发布的内容整理录入，仅供个人学习和参考，不代表官方数据。数据的版权归原作者所有。

功能

• 品牌 / 机型筛选：先选品牌，再从这个品牌下多选机型；选「全部」可以跨品牌对比。
• 数据标签：折线上的每个点都标出数值，标签重叠时会自动隐藏一部分，也可以整体关掉。
• 周期范围：可以拖动图表下方的滑块、用起止周下拉框，或在图上滚动鼠标滚轮，调整横轴显示的周范围。
• 两种横轴：
  • 自然周：按 W34、W35… 排列。
  • 发布后第 N 周：发布日所在的那一周算第 1 周，把不同时间上市的机型对齐比较。
• 两种数值：原始值，或周环比增量（本周减上周）。
• 对数纵轴：机型之间量级差距很大时用（比如 iPhone 和其他机型放在一起看）。
• 数据表：图表下方同步列出所选机型的数值。
• 异常提示：如果某个机型的数值比上一周还低，页面会提示可能是录入错误。
• 我的列表：常用的几款机型可以保存成模板，以后一键恢复。
  • 保存后默认命名为「用户列表1」「用户列表2」…，可以直接改名。
  • 可以更新列表内容，也可以删除（删除需要点两次确认）。
  • 列表保存在当前浏览器的 localStorage 中，换设备、换浏览器或清理浏览器数据后就看不到了。可以用「导出 / 导入」按钮把列表存成 JSON 文件，用于备份或迁移。

更新数据

只需要编辑 data.csv，提交后 GitHub Pages 会在一两分钟内更新，index.html 不用改。

CSV 格式

brand,model,category,date,2026W34,2026W35,...
华为,Pura 90系列,旗舰SO,2026/5/9,128.82,134.06,...

列	说明
brand	品牌，必填
model	机型，必填。同一品牌下不能重名
category	分类，可选，鼠标悬停在机型上时显示
date	发布日期，必填。写成 2026/5/9 或 2026-05-09 都可以
周列	列名用 2026W34（推荐，跨年也能正确对齐）或 W34。不写年份时，按 index.html 里的 DEFAULT_YEAR 计算

• 没有数据的单元格留空，图上那一段会断开，不会画成 0。
• 新增一周时，在最后加一列即可，页面会自动识别。
• 文件编码用 UTF-8 或 GBK 都可以，Excel 直接另存的 CSV 也能读。

注意：「我的列表」是按 品牌 + 机型 记住机型的。如果在 CSV 里改了某个机型的名字，引用它的列表会提示这个机型「不在当前数据中」，需要重新选择后点「用当前选择更新」。

本地预览

直接双击打开 index.html 时，浏览器会阻止页面读取本地的 data.csv。这时页面上会出现「手动选择 CSV」，选择文件后就能看到图表。也可以在项目目录下启动一个本地服务器：

python3 -m http.server 8000
# 浏览器打开 http://localhost:8000

部署

仓库设置 → Pages → Source 选择 Deploy from a branch，分支选 master，目录选 / (root)。

文件结构

├── index.html   页面本身（样式、脚本都写在这一个文件里）
├── data.csv     销量数据
├── README.md      中文说明
└── README.en.md   英文说明

技术说明

• 图表使用 Apache ECharts 5.4.3，从 cdnjs 加载。
• 字体使用 Noto Sans SC 和 IBM Plex Mono，从 Google Fonts 加载。字体加载不出来时会回退到系统字体，不影响使用。
• 页面会跟随系统切换浅色 / 深色主题，手机上也能正常显示。

注意

GitHub Pages 发布的页面是公开的，即使仓库是私有的，任何人也都能访问。请确认 data.csv 里的数据可以公开。

特别鸣谢

感谢 @zhoulin12138 为本项目提供的思路、辅导与支持。