新机周销量追踪 · smartphoneSellOut

简体中文 | English

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

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

数据来源

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

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

功能

• 品牌 / 机型筛选：先选品牌，再从这个品牌下多选机型；选「全部」可以跨品牌对比，默认选中每个品牌最近一周增量最大的 1 款。
• 线尾标名：没有图例，每条线的末端直接写机型名，颜色与线一致。名字会自动避开其他折线和数值；放不下的名字以淡色显示，鼠标移到线上即可看清。
• 数据标签：折线上的每个点都标出数值，标签重叠时会自动隐藏一部分，也可以整体关掉。手机上默认关闭。
• 导出 PNG：图表右上角有两个按钮，导出当前选中的机型和周期范围。
  • 🖥️ 桌面端：16:9，2400×1350。
  • 📱 移动端：4:5 竖图，1200×1500，线尾标序号，图下方是按最新值排序的列表。
  • 放不下名字或序号的线画成浅灰细线，并注明数量。
• 手机版式：屏幕宽度不超过 600px 时，网页上的图表与移动端导出图样式一致。点列表中的一项可以高亮对应的线。
• 周期范围：可以拖动图表下方的滑块、用起止周下拉框，或在图上滚动鼠标滚轮，调整横轴显示的周范围。手机、平板上不能在图上拖动或双指缩放，以免挡住手指上下滑动页面，请用滑块或下拉框。
• 两种横轴：
  • 自然周：按 W34、W35… 排列。
  • 发布后第 N 周：发布日所在的那一周算第 1 周，把不同时间上市的机型对齐比较。
• 两种数值：累计销量，或周环比增量（本周减上周）。
• 对数纵轴：机型之间量级差距很大时用（比如 iPhone 和其他机型放在一起看）。
• 数据表：图表下方同步列出所选机型的数值，列与图表横轴一致。
• 异常提示：如果某个机型的数值比上一周还低，页面会提示可能是录入错误。没填发布日期的机型在「发布后第 N 周」视图里不显示，页面会列出它们的名字。
• 本周里程碑：「我的列表」最前面有一个自动生成的合集「🏁 本周里程碑」，收录最新一周累计销量跨过 50 万台整数倍（50、100、150…）的机型。点击即可查看，图下方会写明每款突破了多少万台；鼠标悬停在按钮上也能看到明细。这个合集随数据自动更新，不能改名或删除。
• 我的列表：常用的几款机型可以保存成模板，以后一键恢复。
  • 保存后默认命名为「用户列表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	机型，必填。同一品牌下不能重名。不要带品牌前缀（写 17系列，不写 小米 17系列），页面会按需加上品牌
category	分类，可选，鼠标悬停在机型上时显示
date	发布日期，建议填写。写成 2026/5/9 或 2026-05-09 都可以。不填时该机型不会出现在「发布后第 N 周」视图里
周列	列名用 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 加载。字体加载不出来时会回退到系统字体，不影响使用。
• 页面默认跟随系统的浅色 / 深色主题；右上角的 🌙 / ☀️ 按钮可以手动切换，选择会保存在当前浏览器里。

设计决定

这些规则是多次调整后定下来的，修改代码时请保留：

• 不用图例。桌面上线尾直接写名字；手机上线尾写序号，名字放在图下方的列表里，这样不挤占横轴宽度。
• 品牌名。当前显示的机型都属于同一品牌时不写品牌，跨品牌时才写。例外：以数字开头或不超过 3 个字符的机型名（如 15、600系列、Win、K90）单独看认不出、也容易和其他品牌重名，始终带品牌。手机列表里完整名字放不下时，先去掉品牌（上述例外除外），再截断。「全部」视图下的机型选择按钮始终带品牌。
• 数值叫「累计销量」。CSV 里的数据是累计值，页面上不叫「原始值」或「周销量」。
• 里程碑的「最新一周」按品牌计算：取该品牌数据更新到的最后一周，和它的前一周比较。这样某个品牌还没录入最新一周时，也能正常显示它上一周的里程碑。
• 「全部」的默认选择：每个品牌最近一周增量最大的 1 款。先看哪款的数据更新到更近的周（已停更的机型靠后），同一周再比增量。
• 导出图里没有名字或序号的线画成浅灰细线，只表示「还有其他机型」，并注明数量：桌面导出写在底部，移动端导出写在列表末尾。
• 手机网页与移动端导出样式一致。区别只有两处：网页列表是单列并列出全部机型，导出图最多两列 12 项；网页可以打开数据标签，导出图不显示。
• 移动端导出图。按 400px 宽设计、3 倍导出；缩到手机宽度后文字不小于 12px；线宽 2px，高亮 3px；背景不透明，跟随页面的深浅色。
• 手机列表里的数值取整，图上的数据标签最多保留两位小数。
• 线超过 12 条时不画数据点。
• 触屏设备不启用图上缩放（判断条件是主要输入为手指），保证手指在图表上也能上下滑动页面。
• 中文字体用 Noto Sans SC，数字用 IBM Plex Mono。字体加载完成后图表会重新排布一次。
• 颜色按品牌分色系：小米、REDMI 橙色系；华为、荣耀 红色系；OPPO、一加 绿色系；vivo、iQOO 蓝色系；苹果 紫色系。同一色系的两个品牌色相略有偏移，同一品牌内的机型用不同深浅区分。新品牌需要在 index.html 的 BRAND_HUE 里加一行，否则使用通用调色板。

注意

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

特别鸣谢

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