第 7 步 · 用 ECharts 把数据讲成结论

如果 deck 里有市场对比、时间趋势、采纳曲线、调研结果、技术基准或者研究结论，用真图表，别用截图和静态图。

因为 deck 是 HTML 的，ECharts 可以直接嵌进页面里——它能跟着 deck 的配色走，数据变了能改，投影上放大也不糊。

提示词

请扫一遍整份 deck，找出哪些页面加 ECharts 可视化会更容易理解。

只在真正有用的地方用 ECharts。

以下情况可以考虑图表：
1. 对比
2. 随时间的趋势
3. 排名
4. 市场份额
5. 采纳曲线
6. 调研结果
7. 前后指标对比
8. 技术基准

要求：
1. 不要每一页都加图表。
2. 每一处选最合适的图表类型。
3. 图表样式要跟 deck 的视觉系统一致。
4. 有真实数据就用真实数据。
5. 如果缺少确切数据，用明确标注过的示意数据，并告诉我这里需要核实。
6. 图表的位置要能支撑这一页的核心信息。

更新完之后总结：
1. 哪些页加了图表。
2. 用了什么图表类型。
3. 用的是什么数据。
4. 哪些数据点需要核实。

第 5 条是全书最重要的一条约束之一

「缺数据就用明确标注过的示意数据，并告诉我」。

这条对应的是 OpenDesign 的一条产品级规则：缺少真实数据时用诚实的占位符，不编造数字。你在提示词里再强调一次，是因为图表比文字更容易让人相信——一根柱子画在那里，观众默认它是真的。

上台被问「这个 32% 哪来的」而你答不上来，是最难看的一种翻车。

选什么图表

内容类型	建议图表	为什么
市场增长	折线图或面积图	表现方向和势头
竞品对比	条形图或雷达图	差距一眼可见
类别占比	饼图、环形图或矩形树图	分布一眼可见
流程阶段	漏斗图或堆叠条形图	表现转化或推进

补充几条实操经验：

• 超过 5 个类别的时候，别用饼图。 换成横向条形图，标签好放，也好读。
• 趋势线超过 4 条就该拆。 拆成小多图，或者只留要讲的那两条，其余灰掉当背景。
• 柱状图的 Y 轴从 0 开始。 不从 0 开始能放大差异，但那是误导，被人指出来一次信任就没了。

图表要跟 deck 是一套

第 3 条那句「样式跟 deck 的视觉系统一致」，实际上要检查这几项：

• [ ] 用的是 deck 的配色，不是 ECharts 默认那套蓝橙
• [ ] 字体跟正文一致
• [ ] 网格线和坐标轴的灰度跟 deck 的中性色阶一致
• [ ] 图表的圆角、阴影跟卡片一致
• [ ] 深色 deck 上图表也是深色底，不是白底一块

最后一条经常出问题。ECharts 默认白底，放在深色页上像贴了张纸。

一张图讲一件事

图表页最容易犯的错是把所有数据都画上去。一页一个图表，一个图表一个结论。

标题写结论，不写话题：

• 差：「用户增长数据」
• 好：「Q3 之后增长来自老用户推荐，不是投放」

标题写完结论，图表就变成证据，观众知道该看哪里。

数据准备

如果你手上有真实数据，最省事的做法是直接给它：

这一页用下面的真实数据画图，不要改动数值：

月份,新增用户,留存率
2026-01,1240,0.62
2026-02,1580,0.65
2026-03,2010,0.71

图表类型：双轴组合图，柱状表示新增，折线表示留存率。
标题写成结论。

粘贴 CSV 是最不容易出错的给法。

常见坑

坑	表现	怎么办
每页都有图表	deck 变成报表	「不要每一页都加」留着
编数字	上台被问住	第 5 条留着，并逐张核对来源
ECharts 默认配色	图表跟 deck 像两套东西	明确要求用 deck 的色板
图例太小	投影上看不清	要求最小字号，或者把图例改成直接标注
Y 轴不从 0 开始	被质疑误导	明确要求从 0 开始，除非有理由不这么做

下一步

第 8 步 · 动效与 Three.js 的克制用法 — 到这里 deck 已经能用了，后面两步是锦上添花，也是最容易做过头的两步。