乐于分享
好东西不私藏

豆包从实战到精通(三):别再发丑 Excel,让豆包用 ECharts 做漂亮报表

豆包从实战到精通(三):别再发丑 Excel,让豆包用 ECharts 做漂亮报表

这是「豆包从实战到精通」第 3 期。

第 2 期讲的是:

让豆包生成 HTML 小工具,复制代码,保存成 .html,双击就能运行。

这期继续往前走一步。

不要只让豆包做一个能打开的页面。

你还可以让它把一堆普通 Excel 数据,做成一份能汇报、能截图、能继续修改的漂亮报表。

尤其是用 ECharts 这类图表库时,HTML 就不只是“小工具”了。

它可以变成:

  • • 数据看板;
  • • 经营月报;
  • • 项目进度报表;
  • • 销售渠道分析;
  • • 学习成绩分析;
  • • 自媒体运营复盘;
  • • 可以截图放进 PPT 的汇报页。

这件事对普通职场人特别有价值。

因为很多人不是没有数据,而是数据太丑。

一、真正的问题不是没有数据,而是不会汇报

很多人的汇报材料长这样:

  • • 一张密密麻麻的 Excel;
  • • 一堆数字,没有重点;
  • • 指标口径没有解释;
  • • 图表颜色随便选;
  • • 领导看完不知道该看哪里;
  • • 最后只能靠你口头解释半天。

这不是 Excel 的问题。

这是“数据还没有变成汇报”的问题。

表格是给人查明细的。

报表是给人做判断的。

这两件事不一样。

所以这一期的核心不是:

豆包能不能帮我画一个图?

而是:

豆包能不能帮我把一堆数据,整理成一份别人一眼能看懂的报告?

我的答案是:可以。

但前提是,你不能只说“帮我做个漂亮报表”。

你要告诉它:

  • • 这份报表给谁看;
  • • 对方最关心什么;
  • • 哪几个指标最重要;
  • • 哪些数据要对比;
  • • 哪些数据要看趋势;
  • • 哪些异常要突出;
  • • 最后要不要变成 PPT 汇报。

二、为什么第三期要讲 ECharts?

ECharts 可以理解成一个常用的浏览器端图表库。

它能在网页里生成折线图、柱状图、饼图、环图、散点图、雷达图、仪表盘等很多图表。

从普通人的角度,你不需要先变成前端工程师。

你只需要知道一件事:

豆包可以帮你把数据、图表和页面样式组合成一个 HTML 数据看板。

官方 ECharts 的基础用法其实很稳定:

  1. 1. 页面里准备一个有宽高的容器;
  2. 2. 用 echarts.init 初始化图表;
  3. 3. 用 setOption 设置标题、坐标轴、数据和图表类型;
  4. 4. 监听窗口变化,调用 resize 让图表自适应。

这些代码你不必手写。

你要做的是把需求讲清楚,让豆包生成完整 HTML。

三、实战案例:项目运营月报

这次我们用一个很普通的假场景:

你有一份项目运营数据,要做一份月报,给领导看本月效果、问题和下月动作。

假设 Excel 里有这些字段:

日期、渠道、浏览量、线索数、成交数、成交金额、投放成本、负责人、备注

如果直接把这张 Excel 截图放进 PPT,基本没人愿意看。

但如果做成报表,就可以拆成几块:

1. 顶部 KPI 卡片

让人先看结论:

  • • 本月成交金额;
  • • 总线索数;
  • • 平均转化率;
  • • 总投放成本;
  • • ROI 或投入产出比。

这部分适合用大数字卡片。

2. 趋势折线图

看变化:

  • • 成交金额是否上升;
  • • 线索数是否波动;
  • • 成本是否突然变高;
  • • 哪一周表现异常。

趋势就用折线图。

3. 渠道柱状图

看对比:

  • • 哪个渠道带来的线索最多;
  • • 哪个渠道成交金额最高;
  • • 哪个渠道成本最贵。

对比就用柱状图。

4. 环图或饼图

看结构:

  • • 收入主要来自哪些渠道;
  • • 成本主要花在哪里;
  • • 成交客户分布在哪些类型。

结构就用环图或饼图。

5. 异常和建议

报表不能只有图。

还要有一句人话:

  • • 本月增长来自哪里;
  • • 最大问题是什么;
  • • 下月优先优化什么;
  • • 哪个指标需要继续跟踪。

这部分可以让豆包生成“汇报摘要”。

四、直接复制给豆包的提示词

下面这段可以直接用。

请帮我生成一个可以直接运行的单文件 HTML 数据看板。主题:项目运营月报使用场景:我有一份 Excel 运营数据,希望把它变成一份漂亮的数据报告,可以截图放进 PPT,也可以在浏览器里演示。目标读者:部门负责人或老板,他们不想看密密麻麻的原始表格,只想快速看到关键指标、趋势、对比、异常和建议。数据字段:- 日期- 渠道- 浏览量- 线索数- 成交数- 成交金额- 投放成本- 负责人- 备注请你先内置一组假数据,方便我直接预览效果。不要使用真实公司或客户名称。页面要求:1. 顶部做 4 个 KPI 卡片:成交金额、线索数、转化率、投放成本;2. 用 ECharts 做一张折线图:展示成交金额和线索数趋势;3. 用 ECharts 做一张柱状图:展示不同渠道成交金额对比;4. 用 ECharts 做一张环图:展示渠道收入占比;5. 做一个异常提醒区域:列出转化率最低、成本最高或波动最大的项目;6. 做一个“汇报摘要”区域,用 3-5 条短句总结本月表现和下月建议;7. 页面整体像一份现代商务数据报告,适合截图放进 PPT。视觉风格:1. 背景干净;2. 颜色克制,不要花哨;3. 重点数字要醒目;4. 图表要有标题、图例和 tooltip;5. 卡片和图表之间留出足够空白;6. 移动端和电脑端都能看。技术要求:1. 输出完整 HTML;2. HTML、CSS、JavaScript 写在一个文件里;3. ECharts 可以通过 CDN 引入,并在代码注释里说明:如果内网不能联网,需要下载 echarts.min.js 到本地引用;4. 图表容器必须设置明确高度;5. 页面 resize 时图表要自适应;6. 关键计算逻辑写中文注释;7. 不要省略代码。验收要求:1. 告诉我如何保存为 .html 并打开;2. 列出我需要人工复核的计算口径;3. 列出 5 个我可以继续让你优化的方向。

你看,这段提示词没有让豆包“随便画图”。

它把汇报对象、数据字段、图表类型、页面风格和验收标准都说清楚了。

这才是结果变漂亮的关键。

五、图表不是越多越好,要会选

很多人一做报表就想把所有图都放上去。

这是错误的。

图表越多,不一定越专业。

真正专业的是:每张图都有任务。

我建议普通人先记住这 5 个选择:

1. 看趋势:折线图

比如收入、线索、成本随时间变化。

只要问题里有“最近有没有变好”“这几周怎么波动”,优先用折线图。

2. 看对比:柱状图

比如不同渠道、不同项目、不同负责人之间谁高谁低。

只要问题里有“谁最好”“谁最差”“哪个贡献最大”,优先用柱状图。

3. 看结构:环图或饼图

比如收入来源占比、成本结构、用户类型分布。

只要问题里有“各部分占多少”,可以用环图。

但不要放太多分类,分类太多就会很难看。

4. 看目标完成度:进度条或仪表盘

比如本月目标完成率、预算使用率、任务进度。

这类图适合放在汇报页里做“状态判断”。

5. 看明细:表格

不是所有数据都要图表化。

异常项、负责人、备注、待办动作,仍然适合用表格。

报表里最好的结构往往是:

KPI 卡片 + 2-3 张图 + 1 个异常表 + 1 段汇报摘要。

六、让豆包继续把报表变成 PPT

做出 HTML 看板以后,不要停。

你可以继续问豆包:

请根据这个数据看板,帮我整理成一份 5 页 PPT 汇报结构。要求:1. 第 1 页:本月核心结论;2. 第 2 页:关键指标概览;3. 第 3 页:趋势变化和原因;4. 第 4 页:渠道对比和异常问题;5. 第 5 页:下月行动建议。每页请输出:- 页面标题;- 这一页应该放哪张图;- 主要结论;- 口播说明;- 需要人工确认的数据口径。

这一步很有用。

因为很多人不是不会截图,而是不知道汇报顺序。

HTML 看板负责“展示数据”。

PPT 结构负责“讲清故事”。

两者结合起来,才是一份能交付的汇报。

七、继续优化的提示词

第一版报表出来以后,你可以这样继续改:

请在刚才的 HTML 报表基础上继续优化:1. 把整体风格改成更适合商务汇报的浅色科技风;2. KPI 卡片增加同比/环比变化;3. 折线图增加平均线;4. 柱状图按成交金额从高到低排序;5. 异常提醒区域用橙色高亮;6. 增加一个“复制汇报摘要”按钮;7. 增加打印样式,方便导出 PDF;8. 保持代码仍然是单文件 HTML。请输出修改后的完整代码。

你会发现,真正好用的 AI 工作流不是一次生成。

而是:

第一版能跑,第二版能看,第三版能汇报。

八、边界:漂亮不等于正确

最后一定要说边界。

漂亮报表很容易让人产生错觉:

看起来专业,就以为它一定正确。

这很危险。

凡是涉及数据分析,你至少要人工复核这些内容:

  1. 1. 字段含义是否对;
  2. 2. 金额单位是否一致;
  3. 3. 日期范围是否正确;
  4. 4. 转化率分母有没有搞错;
  5. 5. 成本和收入是否能直接相除;
  6. 6. 是否有缺失值、重复值、异常值;
  7. 7. 图表是否夸大了差异;
  8. 8. 汇报结论是否被数据支持。

另外,ECharts 如果通过 CDN 引入,就需要联网。

如果你在内网、公司环境或敏感数据场景使用,最好下载官方来源的 echarts.min.js 到本地,并确认代码没有陌生外链。

还有一点:

不要把真实客户数据、内部经营数据、财务数据直接粘给 AI。

先用假数据跑通效果,再决定哪些数据可以脱敏后使用。

结尾

第 2 期我们讲了:

豆包可以帮你生成一个能运行的 HTML 小工具。

第 3 期要再往前一步:

豆包可以帮你把丑 Excel,变成一份能汇报的漂亮数据看板。

这件事的关键不在于你懂多少前端代码。

关键在于你会不会把报表需求讲清楚:

  • • 给谁看;
  • • 看什么指标;
  • • 用什么图表;
  • • 要突出什么异常;
  • • 要输出什么结论;
  • • 最后要怎么进入 PPT。

普通人学 AI,不要只停留在“帮我写一段话”。

要开始练习:

让 AI 把资料变成交付物。