零售行业的月度经营分析会上，最尴尬的瞬间往往不是数据变差，而是看板做不出来。传统 BI 工具从取数、建模、拖拽图表到发布，一个带联动筛选的看板排期至少两三天；如果临时要按大区、品类、门店做下钻分析，还得继续等开发排期。而现在用 AI 提示词生成可交互业绩看板，这个周期可以压缩到分钟级，而且从数据表到前端图表的整个链路，都掌握在业务人员自己手里。
这次我们聊的不是某个模型部署，也不是某个 BI 产品，而是一套可复用的 AI 提示词方法论。只要把零售数据整理成规范表格，再用结构化提示词让 AI 生成一个基于 HTML + ECharts 的可交互业绩看板，就能实现时间筛选、维度切换、异常标记、多图联动这些常用分析功能。整个过程不需要写代码，不需要数据库权限，也不需要等排期，最核心的动作就是“把需求说清楚”。
这篇文章会重点讲三件事：一是给出一套可以直接套用的 AI 提示词模板；二是演示从原始数据到可交互看板的完整生成流程；三是整理零售业绩看板在日常使用中的常见问题排查方法。无论你是零售运营、数据分析师，还是想把 AI 提示词能力引入业务线的技术负责人，都可以按这篇文章的流程直接落地，先跑通一个最小可用看板，再逐步扩展成你自己的分析工具。
1. 核心能力速览
| 能力项 | 说明 |
|---|---|
| 项目形态 | AI 提示词模板 + HTML/ECharts 前端看板生成方案 |
| 核心功能 | 业绩总览、趋势分析、品类结构、门店排名、异常预警、联动筛选 |
| 交互能力 | 时间范围选择、维度切换、图表联动、数据悬停提示、刷新可用 |
| 输入方式 | 零售业务数据表（Excel / CSV / 手工整理的 Markdown 表格） |
| 输出形态 | 单文件 HTML，浏览器打开即用，无需安装软件 |
| 技术依赖 | 主流 AI 对话工具 + ECharts 开源图表库 |
| 硬件要求 | 无特殊要求，普通办公电脑即可 |
| 启动方式 | 浏览器直接打开 HTML 文件 |
| 是否支持 API | 不依赖后端接口，纯前端渲染，可被其他工具内嵌 |
| 是否支持批量任务 | 同一提示词模板可批量生成不同店铺 / 不同周期看板 |
| 适合场景 | 周报月报、经营分析会、门店巡检、临时取数展示 |
这套方案最大的价值在于“可交互”三个字。传统做法里，AI 生成的数据报告往往是静态截图或者一段文字，领导想换个时间范围、想只看某个品类，都得回到原始数据重新处理。而通过结构化提示词，AI 可以直接生成带筛选器、带联动效果的看板文件，交互逻辑也由 AI 根据提示词自动完成，这就是提示词工程在零售场景里最实用的落地方式。
2. 适用场景与数据合规边界
2.1 适合谁
- 零售运营：门店多、报表多、指标口径经常变，需要快速生成临时分析看板。
- 数据分析师：先让 AI 生成看板原型，再和业务方确认指标，避免一上来就写复杂 SQL。
- 区域经理：每天要看自己的辖区业绩，用同一套提示词按门店维度批量生成。
- 技术团队：想减少重复的报表开发需求，把“业务提需求—开发做看板”的流程简化成“业务自己生成—技术提供规范”。
2.2 能解决什么问题
- 看板交付慢：以前按天计，现在按分钟计。
- 业务看不懂数据：图表化 + 交互式，比表格直观得多。
- 反馈迭代慢：领导说“按品类拆一下”，重新调整提示词再生成一次就行。
- 临时汇报没素材：把数据贴进提示词，几轮对话就能产出一个可演示的看板。
2.3 不适合什么场景
- 海量数据（数十万行以上）实时查询：纯前端 HTML 看板更适合汇总后的数据，不适合直接挂数据库做大屏实时取数。
- 严格的数据权限管控：AI 生成的 HTML 文件如果直接发送，无权限控制，需要再接入统一登录或内网部署。
- 复杂数据建模：涉及多表 Join、复杂口径计算的场景，仍然建议由数据团队先完成数据加工。
- 使用 AI 工具时输入敏感经营数据，必须提前确认：公司是否允许、数据是否脱敏、使用的 AI 工具是否支持企业数据合规要求。
2.4 合规边界
零售行业的销售明细、会员信息、成本数据属于企业经营敏感信息。在使用 AI 提示词生成看板时，建议执行三条铁律：
- 数据脱敏：上传前把客户姓名、手机号、门店地址等个人信息替换为 ID 或脱敏字段。
- 授权确认：确认使用的 AI 工具服务条款允许上传业务数据，或使用企业内部私有化 AI 服务。
- 结果复核：AI 生成的数据解读、异常结论，必须由业务负责人确认后才能对外发布，避免 AI 错误归因。
3. 环境准备与前置条件
虽然这套方案不需要复杂的软件环境，但建议在正式开始前，把数据、工具和输出目录准备好。
3.1 数据准备
核心要求是“一张表能说清楚问题”。推荐使用以下结构整理零售业绩数据，字段按需增减：
日期,门店,大区,品类,销售额,目标额,毛利率,客流量,客单价 2024-11-01,上海南京路店,华东,服装,45200,50000,0.45,320,141.25 2024-11-01,上海南京路店,华东,食品,28300,25000,0.28,410,69.02 2024-11-01,北京朝阳店,华北,服装,38100,40000,0.42,265,143.77 2024-11-01,北京朝阳店,华北,食品,25600,27000,0.30,358,71.51数据口径说明：销售额为实际成交金额，目标额为月度目标的每日分解值，毛利率为百分数小数格式。字段越规范，AI 生成的图表越准确。
3.2 工具准备
- AI 对话工具：当前可用的主流 AI 对话服务都能执行这类提示词，推荐使用支持长文本上下文、代码生成能力较强的版本。如果你所在企业对数据合规有要求，优先使用私有化部署的大模型服务。
- 运行环境：任意现代浏览器，Chrome、Edge 均可。
- ECharts CDN 资源：看板 HTML 文件中会通过 CDN 引入 ECharts。如果公司内网无法访问外网，可以提前下载 echarts.min.js 放到本地目录。
- 文本编辑器：准备好 VS Code、Notepad++ 或者直接用 AI 生成 HTML 文件后保存，用于临时查看和修改代码。
3.3 文件目录规划
建议建立以下目录结构，把数据和看板分开管理：
retail-dashboard/ ├── data/ │ └── sales_data.csv ├── prompts/ │ └── dashboard_prompt.md ├── output/ │ └── dashboard.html └── libs/ └── echarts.min.js原因很简单：同一套提示词会反复使用，不同日期、不同业务线的数据文件要分开放；AI 生成的 HTML 看板会有多个版本，靠文件名版本管理会很快失控。
4. AI 提示词设计框架
这是全文的核心。AI 能不能生成好用的可交互业绩看板，不取决于 AI 有多“聪明”，而取决于提示词有没有把三个关键信息说清楚：数据长什么样、看板要实现什么交互、视觉和功能上有什么偏好。
4.1 结构化提示词的总体框架
一个可复用的提示词模板，建议包含以下五个模块：
角色设定 数据说明 看板功能需求 交互行为要求 输出格式要求4.2 零售业绩看板提示词模板
下面是一份已经整理好的提示词模板，可以直接复制使用。使用时将[数据部分]替换为你的实际数据。
你是一位资深的前端数据可视化工程师，擅长使用 ECharts 设计零售行业经营分析看板。 请根据我提供的数据，生成一个可直接运行的 HTML 文件，实现可交互的零售业绩看板。 【数据说明】 以下是我的零售业绩数据，字段依次为：日期、门店、大区、品类、销售额、目标额、毛利率、客流量、客单价。 [将 CSV 格式数据粘贴到此处] 【看板功能需求】 1. 顶部显示 4 个核心指标卡片：总销售额、总目标完成率、平均毛利率、累计客流量。 2. 主体部分包含四个图表： - 销售趋势图：按日期展示销售额与目标额的变化，使用折线图； - 品类结构图：展示各品类销售额占比，使用饼图； - 门店排名图：展示各门店销售额排名，使用横向柱状图； - 大区对比图：展示各大区销售额及目标完成率，使用柱状图 + 折线图组合。 3. 看板左上角提供时间范围筛选器，切换日期后所有图表和指标卡同步变化。 【交互行为要求】 - 所有图表必须支持鼠标悬停查看具体数值； - 点击品类结构图的某个品类，销售趋势图和门店排名图需联动过滤； - 每个图表右上角显示“刷新”按钮，点击后可重新加载数据； - 页面布局适配 1920 分辨率，页面配色适合大屏展示，不要使用刺眼颜色。 【输出格式要求】 - 输出完整的 HTML 代码，使用 ECharts 5.x 版本； - 图表容器使用 <div> 定义，每个图表需设置唯一 id； - 数据使用 JavaScript 数组内嵌在 <script> 标签中，不要使用外部数据文件； - 确保所有代码有缩进和必要注释，方便后期维护； - 如果数据中包含多个门店、多个日期，请通过筛选器联动处理，不要遗漏数据行。这份模板之所以有效，是因为它把“交互行为”从“可选功能”变成了“硬性要求”。实际使用中你会发现，如果提示词里只写“做一个看板”，AI 大概率会生成静态图表，而且布局随机；把交互行为拆成悬停、联动、刷新三条明确指令后，生成结果的质量会稳定很多。
4.3 提示词设计的三个原则
第一，用“约束条件”代替“期望描述”。不要写“做漂亮一点”，要写“配色使用深色背景 + 蓝色系，指标卡放在顶部，图表使用白色描边”。AI 对模糊形容词的理解不一致，但对你给出的具体约束执行得很好。
第二，数据字段说明必须和数据结构完全对应。提示词里的字段顺序如果和数据粘贴的实际顺序不一致，AI 很可能把客流量当销售额画出来。最稳妥的做法是在数据前加一行字段名，并说明日期格式。
第三，输出格式要求里必须声明“使用内嵌数据”。这一点很多文章不会提，但非常关键。如果不声明，AI 可能会生成一个读取外部 JSON 文件的版本，本地打开时会出现跨域问题，图表为空。
5. 从数据到可交互看板的完整操作流程
5.1 第一步：整理数据
打开 Excel 或 WPS，把原始数据清洗成标准的一维表结构。需要注意的点包括：日期字段必须是标准日期格式，不要有合并单元格；数值字段必须是数字格式，不要带“元”“万”等单位；缺失值要么用 0 填充，要么删除整行，不要让 AI 自行猜测。
5.2 第二步：启动 AI 对话并粘贴提示词
新建一个对话窗口，把上面 4.2 的完整提示词粘贴进去，然后把数据粘贴到提示词的[数据部分]标记处。建议第一次先放一个“小样本数据”，比如 10 行左右，让 AI 快速生成第一版看板，确认逻辑无误后再放全量数据重新生成。
5.3 第三步：生成 HTML 文件
AI 返回代码后，找到以<!DOCTYPE html>开头、以</html>结尾的代码块。点击代码块右上角的“复制”按钮，在本地新建一个文本文件，粘贴后另存为dashboard.html，注意编码格式选择UTF-8，否则中文可能乱码。
5.4 第四步：浏览器打开验证
双击dashboard.html，浏览器会自动打开。验证重点按以下顺序进行：
- 页面是否正常显示，有没有空白区域；
- 指标卡金额格式是否合理，有没有把销售额画成客单价；
- 右上角时间筛选器是否工作，切换后所有图表数值是否同步变化；
- 点击品类饼图，门店排名图是否跟随过滤；
- 数据是否与原始 Excel 表完全一致。
5.5 第五步：迭代优化
如果发现某个图表配置不正确，直接把问题描述给 AI，比如“门店排名图目前是正序排列，请改成按销售额倒序，并标注超出目标的门店”。不需要重新粘贴全部数据，直接在同一个对话里继续追问即可。这是 AI 生成方式相对传统 BI 工具最大的优势：迭代成本极低。
6. 看板效果验证：5 个关键维度
生成一个 HTML 看板只是第一步，实际能不能用，需要按业务口径逐一复核。
6.1 数据完整性验证
用 Excel 打开原始数据，统计几个关键总计：销售额合计、各门店销售额合计、各品类销售额合计。再看 AI 生成的看板页面上对应指标是否一致。如果金额差几位数，通常是因为数据行粘贴时被截断，或者日期格式识别错误导致数据分组错乱。
6.2 维度口径验证
重点检查两个口径：门店是否齐全、品类是否齐全。AI 在识别数据时偶尔会把相似字段合并，比如“上海南京路店”和“上海南京西路店”可能被 AI 当作同一家门店，因为名称过于相似。这个问题的排查办法是在提示词中增加一句“门店字段按原始值严格区分，不得合并相似名称”。
6.3 交互联动验证
交互联动的判断标准是：点击品类饼图的前三个品类，折线图和柱状图是否同步切换。如果点击后无反应，通常是 ECharts 的事件绑定代码缺失。直接把问题反馈给 AI，让它检查chart.on('click', ...)事件监听是否覆盖了所有目标图表。
6.4 视觉可读性验证
把看板投到会议室大屏，在 2 米左右的距离观察：指标卡数字是否够大；折线图的线宽是否清晰；图例是否会被遮挡。这一步如果发现问题，建议统一在提示词中要求“所有图表标题字号不小于 16px，图例字号不小于 13px”。
6.5 异常场景验证
测试两个边界情况：选择只有一天数据时，折线图是否还能正常显示；数据中某门店销售额为 0 时，柱状图对应柱形消失，但图例仍然保留。如果能通过这两个测试，说明 AI 生成的代码对真实业务数据的容错性达到了基本要求。
7. 零售业务指标与看板设计建议
7.1 核心指标分层
AI 提示词中需要明确的指标，建议按照“结果指标—过程指标—诊断指标”分层设计：
| 层级 | 指标 | 看板展示方式 |
|---|---|---|
| 结果指标 | 销售额、目标完成率、毛利率 | 顶部指标卡，实时反映经营结果 |
| 过程指标 | 客流量、客单价、连带率 | 趋势图，观察过程变化 |
| 诊断指标 | 门店排名、品类占比、大区对比 | 榜单位 + 结构图，定位问题来源 |
7.2 维度设计原则
业绩看板的维度不是越多越好。一张看板上出现“日期 + 门店 + 大区 + 品类”四个维度已经接近信息负荷上限。如果还需要分析更细的维度（比如供应商、SKU），建议单独生成另一张看板，而不是塞进同一张页面里。
7.3 目标线的处理
零售看板最常见的需求是“实际 vs 目标”。在提示词中设计趋势图时，明确要求“实际销售额使用实线，目标销售额使用虚线，完成率低于 90% 的日期使用红色标记点”，这样 AI 才能生成有业务含义的图表，而不只是机械地把两条线画出来。
8. 常见问题与排查方法
| 问题现象 | 可能原因 | 排查方式 | 解决方案 |
|---|---|---|---|
| 页面空白，无任何图表 | HTML 文件编码错误或 ECharts CDN 加载失败 | 浏览器按 F12 打开控制台，查看报错信息 | 检查文件编码是否为 UTF-8，或下载 echarts.min.js 到本地引用 |
| 数据能显示但金额异常偏大 | 数据粘贴时包含千分位逗号，AI 未识别为数字 | 核对原始 CSV 中金额列格式 | 在提示词中明确“所有金额字段为纯数字，不带千分位符号” |
| 时间筛选器切换无效 | 图表数据过滤逻辑覆盖不全 | 点击筛选器后观察指标卡是否变化 | 要求 AI“检查所有图表和指标卡的联动更新逻辑，不要只更新部分图表” |
| 门店名称相似导致合并 | 模型按语义合并了相似文本 | 查看案例中门店数量是否缺失 | 提示词增加“门店字段严格按原始数据值区分，不得合并相似名称” |
| 图表不支持鼠标悬停 | 缺少 tooltip 配置项 | 鼠标悬停无提示框 | 要求 AI“所有图表补充 tooltip，显示对应维度的具体数值” |
| 页面上下滑动时布局错乱 | 固定高度容器设置不当 | 缩放浏览器观察布局 | 提示词明确“图表容器高度自适应，页面不使用横向滚动条” |
| 局域网内其他电脑无法访问 | HTML 为本地文件，未部署到服务器 | 检查文件路径是 file:// 还是 http:// | 将 HTML 放到 nginx 静态目录，或使用 Python 启动临时服务 |
| 中文字体在部分电脑乱码 | 系统缺少对应字体 | 检查 HTML 文件头部编码声明 | 在 HTML 的 |
9. 最佳实践与迭代建议
9.1 第一次运行先控制范围
不要一上来就把半年数据、500 家门店全部塞给 AI。建议第一次用一个门店、两周数据、3 个维度验证流程。确认提示词输出稳定后，再逐步增加门店数量和日期范围。这样做的好处是：如果效果不符合预期，你能很快定位到是提示词的问题还是数据的问题。
9.2 建立提示词版本库
用同一套提示词，经过几次迭代修改后，会形成多个版本。建议把每个版本的提示词保存到prompts/目录，并在文件头注释中记录修改内容和适用数据范围。例如dashboard_prompt_v3_store_level.md。后续换数据、换业务线时，直接复用成熟的版本，不需要从零开始。
9.3 本地服务与分享
如果你希望看板在公司内网被其他人访问，不要直接发送 HTML 文件，因为每次都是快照，无法动态更新。更好的做法是：
# 在 dashboard 目录下启动临时静态服务 cd retail-dashboard python -m http.server 8000然后同事通过http://你的IP:8000/dashboard.html访问。注意这种方式只适合内网演示，正式使用应接入统一登录和后台数据接口。
9.4 把提示词封装成工作流
当提示词稳定后，可以把它固化成团队标准模板，嵌入飞书、钉钉机器人或企业微信应用中。团队成员只需要提交一张 CSV 数据表，机器人调用大模型生成 HTML，再上传到共享目录。这个过程中，AI 提示词不再是零散的文本，而是一个可复用的工程资产。
10. 总结与下一步
这套“AI 提示词生成可交互业绩看板”的方案，最值得尝试的是它的迭代速度。过去业务提需求、开发做看板，按“天”计算；现在用结构化提示词 + ECharts 单文件输出，按“分钟”计算。对零售行业来说，这就意味着经营分析会议前 10 分钟突然要换口径，也不再是灾难。
最先应该验证的功能，是时间筛选器和品类联动的组合效果。只要这两个核心交互能跑通，整个看板的可信度和可用性就基本达标了。
最容易踩的坑有两个：一是数据格式不规范，导致 AI 在字段识别阶段就出错；二是没有在提示词中声明“严格按原始值区分维度”，导致相似名称被合并。把这两条规则提前写进你的提示词模板，可以规避大多数低级问题。
后续可以继续扩展的方向很多：把看板接入每日自动更新的数据源，做成真正的动态大屏；针对门店维度增加同比环比列；把同一位提示词模板迁移到周报、月报、品类专项分析等不同场景。核心思路只有一个——先跑通最小闭环，再围绕业务实际问题持续迭代提示词，让 AI 真正变成你团队里随叫随到的数据分析工程师。
