做零售行业的数据分析业绩看板几乎是每个商超、连锁门店、品牌零售公司在周报、月报里都会用到的工具。传统做法需要前端工程师搭建页面、后端提供接口、测试核对数据一套像样的可交互业绩看板往往要排三五天如果业务负责人只是想快速看看“哪些门店完成率低、哪些品类掉量了”这个成本就明显偏高。于是越来越多团队开始尝试用 AI 生成看板把需求写成提示词让 AI 直接产出带图表、筛选器、联动效果的页面。这种方式能不能落地关键不在于 AI 能生成多炫的效果而在于提示词能不能把零售业务的数据口径、维度层次和交互逻辑讲清楚。本文围绕“AI 提示词生成可交互零售业绩看板”这条主线先拆解提示词的结构再给出一套可直接复用的模板然后运行一个单文件 HTML 看板示例最后补齐验证、排错和生产化建议。读完可以把模板套到自己的门店清单、销售数据和指标口径上也可以把提示词思路迁移到商品分析、会员分析等其他看板场景。1. 为什么零售业绩看板适合用 AI 提示词生成1.1 看板要解决的不仅是“展示”零售业绩看板和普通数据报表有一个明显区别它同时承担监控、归因、行动三类任务。监控今天的销售额、订单量、完成率是否正常。归因下滑来自哪个区域、哪些品类、哪些门店。行动是补货、调价、促销还是调整门店排班。这三类任务决定了看板的信息结构相对固定顶部指标卡、趋势图、结构占比、排行和明细表格。信息结构固定AI 生成代码的成功率就很高因为页面布局和交互方式都有大量成熟范式AI 的训练语料里包含大量类似案例。这也解释了为什么“结构清晰的看板需求”适合用提示词做输入的是指标、维度、筛选条件输出的是布局和代码中间没有太复杂的业务规则。相比从零构思产品逻辑AI 更像是帮开发者把“已经想清楚的看板”快速落成页面。1.2 提示词生成看板的价值边界并不是所有看板都适合用提示词生成。适合的场景通常具备以下特征指标口径已经确定不需要 AI 猜测。数据量在演示或前端聚合可承受的范围内。页面主要做筛选、下钻、联动不涉及复杂权限流转。团队希望在一天内看到可点击的 Demo。不适合的场景包括严格的数据权限隔离、实时流式数据、巨量明细加载、复杂业务审批流。这些必须交给后端架构和前端工程体系处理AI 提示词只能在原型阶段协助。用一张表对比三种实现方式实现方式从需求到可用交互能力数据接入维护成本适用阶段手写前端加后端接口3 到 7 天强可定制强可对接各系统中高正式系统AI 提示词生成单页1 到 2 小时中靠 ECharts 等库先用静态 JSON后改接口低但需人工审查原型、周报、内部看板低代码看板平台1 到 3 小时中依赖平台组件需平台支持平台绑定快速上线、日常运营AI 提示词生成看板最适合的位置是“快速原型”和“轻量内部看板”。把它当生产级系统的替代方案会踩坑把它当纯玩具又浪费了快速出图的价值。1.3 本文最终要得到的产物为了让整条链路可以被实际验证本文会完成两件事设计一套“零售业绩看板提示词模板”模板里写清楚角色、任务、数据定义、交互要求和输出约束。用这套提示词得到一份单 HTML 文件的可交互看板包含销售额、订单数、客单价、目标完成率等关键指标以及趋势图、品类结构、门店排行等图表并支持门店筛选和时间维度切换。提示词模板可以复用到其他业务场景只需要替换指标、维度和页面标题。2. 先理解 AI 看板提示词的核心组成2.1 提示词四要素角色、任务、数据、交互提示词不是越复杂越好而是信息越有序越好。一个能稳定生成可交互看板的提示词通常包含四个要素。第一是角色。给 AI 一个明确身份比如“资深前端开发工程师”“零售数据分析师”。角色会改变 AI 选用的代码风格、组件库和注释方式。角色定义为“前端工程师”AI 会输出完整 HTML 和 ECharts 配置角色定义为“数据分析师”则可能更重视指标解释和数据分析结论。第二是任务。任务必须是一个清晰的动词描述例如“生成一个销售业绩看板页面”。要尽量把任务拆开页面包含哪些区域、每个区域放什么图、图之间有什么关系。任务不清晰时AI 会自动补全补全出来的结构往往不是业务想要的。第三是数据。这是最容易出错的地方。AI 无法访问你的数据库所以提示词里要么给出样例数据要么明确告诉它数据字段名和字段含义。没有数据定义AI 只能用“2024 年 1 月”这类假日期和乱编的门店名填充生成的看板看起来正常实际数据口径完全不可用。第四是交互。可交互看板不是“鼠标划过能显示 tooltip”就叫交互而是用户通过筛选、点击、切换来改变视图内容。提示词要明确写出交互链路例如“点击门店排行中的某一门店顶部指标卡和趋势图同步更新为该门店数据”。2.2 数据定义决定看板可用性数据定义在提示词里要做两件事定义指标定义维度。常见零售业绩指标指标建议字段名计算口径销售额sales扣除退款后的实际成交金额订单数orders支付订单数不包含已取消订单客单价avg_order_value销售额 / 订单数毛利率gross_margin(销售额 - 成本) / 销售额目标完成率completion_rate销售额 / 销售目标维度通常包括时间日、周、月、年。区域华东、华南、华北等。门店门店编号、门店名称。品类生鲜、日化、饮料、零食等。提示词建议写成“字段加口径”的形式例如“sales销售额单位元已扣除退款和折扣”。“已扣除退款和折扣”这半句话看着不重要但没有它AI 可能在页面上写“销售额”实际数据却是含退款的口径业务对不上账。2.3 交互定义与图表选型零售看板里最常见的交互有四种时间范围切换、门店筛选、图表联动、指标切换。提示词里可以这样描述顶部提供“本日/本周/本月”切换按钮切换后所有图表按新时间范围重新渲染。左侧门店列表支持多选选择门店后指标卡、趋势图、品类占比图同步筛选。点击销售额排行中的柱子下方细分明细表格展示该门店的订单明细。指标卡区域提供切换开关可以在销售额、订单数、客单价之间切换。图表选型也可以写进提示词。趋势用折线图结构用饼图或环形图排行用横向柱状图区域对比用柱状图。告诉 AI 使用 ECharts生成的代码可读性比手绘 Canvas 高很多。注意提示词中写清“指标字段计算口径交互关系”三项AI 生成结果的可用性才会高只写“做一个漂亮的看板”得到的大概率是演示模板而不是可用的业务看板。3. 一套可复用的零售业绩看板提示词模板3.1 完整提示词示例下面是一段可以直接复制到 AI 对话工具的提示词你是一名有五年零售行业数据可视化经验的前端开发工程师。请用 HTML、CSS、JavaScript 和 ECharts 5 生成一个“零售业绩看板”单页面要求 一、页面结构 1. 顶部标题栏标题为“XX 连锁零售集团 业绩看板”右侧显示当前数据更新时间。 2. 指标卡区域一行四个卡片分别展示“销售额”“订单数”“客单价”“目标完成率”。 3. 图表区域 - 左侧大图近 12 个月的销售额和订单数趋势折线图。 - 右侧两个小图品类销售占比环形图、门店销售额排行横向柱状图。 4. 下方明细表格展示最近 20 条门店销售明细列包括日期、门店、区域、品类、销售额、订单数、毛利率、目标完成率。 二、数据定义 样例数据结构如下请直接在 JavaScript 中使用 [ {date:2025-03-01,region:华东,store:杭州湖滨店,category:饮料,sales:12800,orders:326,target:15000,cost:8900}, {date:2025-03-01,region:华东,store:上海南京路店,category:生鲜,sales:18600,orders:410,target:17000,cost:13200}, {date:2025-03-01,region:华南,store:广州天河店,category:零食,sales:9200,orders:215,target:10000,cost:6400} ] 字段说明 - sales销售额单位元已扣除退款和折扣。 - orders订单数不包含取消订单。 - target当日销售目标。 - cost销售成本用于计算毛利率。 - 毛利率 (sales - cost) / sales * 100%。 - 目标完成率 sales / target * 100%。 三、交互要求 1. 顶部提供“本日”“本周”“本月”三个按钮点击后图表按时间维度重新聚合展示。 2. 门店排行柱状图支持点击点击某个门店后指标卡、趋势图、品类占比图都筛选为该门店数据。 3. 鼠标悬停图表时显示 tooltiptooltip 中必须显示指标名、数值和单位。 4. 所有图表在窗口尺寸变化时自适应宽度。 四、实现要求 1. 使用 ECharts CDN 引入 echarts.min.js版本使用 5.4.3。 2. 一个 HTML 文件完成CSS 写在 style 中JavaScript 写在 script 中。 3. 数据统一放在数据数组里不要散落在图表配置中。 4. 代码中加中文注释说明每一块区域的作用。这段提示词把“角色、任务、数据、交互、实现约束”分段列出大多数对话模型第一次就能生成完整页面。实际使用时把“XX 连锁零售集团”替换成自己的企业名把样例数据结构替换成自己的字段即可。3.2 提示词关键段落拆解提示词里最容易影响结果的是四段。第一段“页面结构”决定了整体布局。布局写清楚后AI 不会自行发挥出奇怪排版。第二段“数据定义”是可用性来源。给出样例数据后AI 会基于样例字段生成聚合函数例如按月份汇总 sales、按门店筛选数据。不给数据结构的提示词AI 会自己命名变量导致页面和后续沟通的字段名不一致。第三段“交互要求”决定可交互不是摆设。写清楚点击、筛选、切换按钮的行为AI 才会生成事件处理器否则它只会做静态图表。第四段“实现要求”控制输出格式和依赖。指定 ECharts 版本、单文件、CDN 引入能避免 AI 生成需要构建工具的 React 项目或引用不存在的本地 JS 文件。3.3 不同 AI 工具下的微调策略不同 AI 工具对长提示词的理解能力不同可以根据工具做调整AI 工具类型推荐做法说明对话模型直接使用完整模板长提示词解析能力强一次生成成功率高代码生成插件拆成多轮指令先写页面结构再补数据聚合和交互网页生成类工具只保留布局和数据定义工具内置渲染引擎自定义交互需要单独配置如果一次生成的代码有问题不要重新写完整提示词建议在对话里追加“现在按以下要求修改”并列出问题。这种方式比反复重新生成更省时间。4. 用提示词生成可交互看板从提示词到 HTML4.1 先明确看板产物的文件形态目标产物是一个单 HTML 文件用 ECharts 从 CDN 加载JavaScript 里放样例数据打开浏览器即可运行。它不需要 Node.js不需要构建工具适合用来看效果和验证提示词。完整多图表版本由第 3 节提示词生成这里先给出一个最小可运行代码方便理解页面结构和交互链路。4.2 最小可运行代码指标卡加趋势图加时间切换下面这个示例只保留了一个指标卡和一个趋势图但已经包含“按钮切换 - 重新计算数据 - 调用 setOption 更新图表”的完整链路!DOCTYPE html html langzh-CN head meta charsetUTF-8 title零售业绩看板-最小可运行版/title script srchttps://cdn.jsdelivr.net/npm/echarts5.4.3/dist/echarts.min.js/script /head body div stylepadding:20px; h2零售业绩看板最小演示/h2 button iddayBtn本日/button button idmonthBtn本月/button div idsalesBox stylefont-size:24px;margin:12px 0;销售额-/div div idtrend stylewidth:100%;height:360px;/div /div script const rawData [ { date: 2025-03-01, sales: 12000 }, { date: 2025-03-02, sales: 13500 }, { date: 2025-03-03, sales: 11800 } ]; let range day; const salesEl document.getElementById(salesBox); const trend echarts.init(document.getElementById(trend)); function calcSales() { if (range day) { const today 2025-03-01; return rawData.filter(d d.date today).reduce((s, d) s d.sales, 0); } return rawData.reduce((s, d) s d.sales, 0); } function render() { salesEl.textContent 销售额 calcSales(); trend.setOption({ xAxis: { type: category, data: rawData.map(d d.date) }, yAxis: { type: value }, series: [{ type: line, data: rawData.map(d d.sales) }] }); } document.getElementById(dayBtn).addEventListener(click, function () { range day; render(); }); document.getElementById(monthBtn).addEventListener(click, function () { range month; render(); }); window.addEventListener(resize, function () { trend.resize(); }); render(); /script /body /html这段代码有三个值得注意的点数据统一放在rawData数组里图表配置里不写死数据。render()函数同时负责更新指标卡和图表任何交互都调用它。window.addEventListener(resize, ...)保证了窗口变化时图表能自适应。完整多图表看板也是同样的逻辑只是把rawData按门店、品类、时间做更多聚合并用多个echarts.init实例渲染不同图表。4.3 用完整提示词扩展成多图表看板有了最小可运行代码之后再把第 3 节的完整提示词交给 AI。如果发现生成结果不理想可以通过追加指令修正例如“指标卡的数字需要千分位分隔符。”“趋势图横轴改为从 1 月到 12 月使用中文月份。”“点击门店排行柱子后明细表格也联动筛选。”“把样例数据替换成 fetch 请求接口路径为 /api/sales。”不建议的问题是“再生成一版好看的”。“好看”是主观描述AI 不知道具体改哪里。尽量把期望描述为可检查的客观行为例如“点击按钮后指标数字发生变化”。4.4 从静态数据到真实接口演示阶段数据写在 JavaScript 里接入真实数据时需要把数据数组换成接口返回。引入接口后要注意跨域问题。本地直接双击 HTML 文件请求后端接口浏览器会阻止跨域。开发时有两种常见做法把页面放到 Web 服务器目录下由服务端提供 API或者在测试环境开启 CORS 配置。前者更接近生产环境推荐使用。生产环境还应该避免在 HTML 内部直接暴露后端地址和鉴权 token。接口凭证要放在服务端前端通过登录态或短期令牌访问。5. 运行验证本地启动、浏览器检查和指标核对5.1 在本地启动页面直接双击 HTML 可以用但涉及 fetch 请求时会被跨域策略挡住。建议用本地静态服务器启动。如果本机有 Python 3cd 看板目录 python -m http.server 8080然后浏览器访问http://localhost:8080/index.html如果本机有 Node.js也可以用 npx servenpx serve .启动完成后页面上的图表应该能正常渲染按钮可以切换时间范围。如果图表空白按第 6 节的排查路径处理。5.2 用验证清单逐项核对打开页面后按照以下清单逐项检查检查项预期结果检查方法页面标题显示“零售业绩看板”浏览器标签页和页面顶部指标卡销售额、订单数、客单价、目标完成率有具体数值对照原始数据手工计算一行趋势图展示 12 个月趋势线段悬停显示月份和数值品类占比环形图各品类百分比合计接近 100%看图例和 tooltip门店排行按销售额从高到低排序观察柱状图排序时间切换点击“本日/本周/本月”后图表数字变化切换后数值与筛选规则一致门店点击点击门店柱子后其他图联动点击后指标卡数值变化自适应缩小浏览器窗口图表不溢出拖动浏览器边缘观察5.3 指标核对方法工具类页面最容易犯的错误是“图表能画出来但数值不对”。核对时不要只看图形要重新计算。例如验证“门店排行”的销售额是否等于所有销售记录的 sales 之和可以在浏览器开发者工具控制台执行聚合const sum rawData .filter(function (item) { return item.region 华东; }) .reduce(function (acc, item) { return acc item.sales; }, 0); console.log(sum);再和页面图表里的值对比。如果数值不一致问题通常出在分组键、筛选条件或者聚合函数上。AI 生成的代码可能把 mock 数据改名、把字段名写错或者在聚合时漏掉某个筛选条件。任何从 AI 生成的代码上线前都要用真实业务数据做一次口径核对。6. 常见问题与排查路径6.1 图表区域一片空白现象页面打开后指标卡正常显示但图表区域是空白。可能原因包括ECharts 引入失败、图表容器没有高度、JS 报错中断渲染。检查顺序打开浏览器开发者工具 Console 面板看有没有Uncaught ReferenceError或echarts is not defined。确认 CDN 地址可以在当前网络访问。如果无法访问更换为其他 CDN 或把 echarts.min.js 下载到本地。确认图表容器设置了高度。ECharts 容器高度为 0 时图表不会显示。处理方式CDN 地址使用https://cdn.jsdelivr.net/npm/echarts5.4.3/dist/echarts.min.js容器样式中保留height: 360px或更高。6.2 时间按钮切换没有反应现象点击本日、本周、本月按钮指标卡和图表没有变化。常见原因是按钮事件绑定缺失。AI 有时只生成了按钮的 HTML却没有绑定 click 事件。检查方式在 Console 里输入document.querySelector(button)查看元素再搜索代码中是否有addEventListener(click, ...)。如果代码里没有绑定让 AI 为三个时间按钮绑定点击事件并在事件中重新计算数据、更新所有图表。6.3 点击门店排行没有联动现象门店柱状图可以点击高亮但其他图表不变化。原因通常是事件回调里只改了选中的样式没有重新执行数据筛选和渲染逻辑。需要让 AI 在点击事件回调中做三件事记录当前选中门店、调用筛选函数得到过滤后的数据集、调用setOption更新其余图表。推荐的追加提示词点击门店排行柱状图时把当前选中门店存入变量 selectedStore然后根据 selectedStore 过滤原始数据重新渲染指标卡、趋势图和品类占比图。如果再次点击同一门店取消筛选并恢复全部门店数据。“再次点击取消筛选”是一个容易遗漏的细节没有它用户无法回到总览状态。6.4 毛利率和目标完成率计算错误现象页面能显示毛利率但数值明显不对例如大于 100%。检查是否按口径计算。毛利率公式为(sales - cost) / sales * 100%目标完成率为sales / target * 100%。如果 AI 把 cost 写成cost / sales或者忘记乘以 100结果都会异常。建议在提示词里显式写好公式并通过追加指令修正。验证时选取一条数据手工计算对比页面显示值。6.5 问题排查速查表问题现象常见原因检查方式处理建议图表空白JS 报错或容器高度为 0Console 查看报错、检查 CSS 高度修 JS 报错、给容器加高度ECharts 未定义CDN 被屏蔽或地址错误检查 Network 面板更换 CDN 或本地引入时间切换无效按钮没有绑定事件搜索 addEventListener追加指令绑定 click点击联动无效回调里没有重新渲染其他图检查点击回调代码在回调中统一重渲染数值不对聚合字段名或筛选条件错误控制台手工聚合对比修正字段名和筛选逻辑跨域请求失败本地 file 协议直接访问接口看 Network 的 CORS 报错用本地服务器启动页面7. 从演示看板到生产看板的工程化建议7.1 数据接口设计AI 生成的看板通常把数据放在前端生产环境必须改为接口驱动。最基础的做法是让页面启动时请求一个看板数据接口接口返回聚合后的指标、图表 series 和明细表格数据。接口可以按前端读取习惯返回结构化数据{ summary: { sales: 1268000, orders: 43200, avgOrderValue: 29.4, completionRate: 84.6 }, trend: [ { month: 2025-01, sales: 168000, orders: 4200 }, { month: 2025-02, sales: 142000, orders: 3800 } ], category: [ { category: 饮料, sales: 286000 }, { category: 生鲜, sales: 352000 } ], storeRank: [ { store: 杭州湖滨店, sales: 98600 } ], detail: [] }接口数据由服务端用 SQL 或数据仓库聚合前端只负责渲染。这样看板页面的 JS 逻辑会大幅简化也不容易出现口径不一致的问题。7.2 性能与刷新策略数据量大时不要在前端循环几十万条原始记录做聚合。正确做法是后端按查询条件聚合后返回前端接收的是已经聚合的小数据量结果。刷新策略要看使用场景日报看板每天固定时间刷新一次即可。周报看板每周一刷新。运营大屏可以每 5 到 30 分钟轮询一次。轮询实现可以使用setInterval但要注意在用户切换页面时清理定时器避免多个定时器叠加。更合适的方案是让后端接口支持条件查询前端只在用户切换时间范围时重新请求。7.3 对 AI 生成代码做人工审查AI 生成代码可以节省大量开发时间但不能跳过审查。重点看三点数据字段名是否与后端一致。事件绑定是否完整筛选逻辑是否影响全局状态。是否包含不安全的拼接方式比如把用户输入直接拼进 HTML。看板页面内的门店名称来自接口时要用文本节点或框架转义避免 XSS 风险。审查时可以建立一份 AI 代码审查清单审查点审查内容数据字段名、单位、口径、是否硬编码交互按钮、点击事件是否绑定筛选状态是否正确安全外部输入是否转义、接口是否有权限控制性能是否在前端做大量数据聚合、是否有重复渲染依赖CDN 版本是否固定、是否有不可控的外部脚本7.4 把提示词沉淀为团队资产一次写好的提示词值得回收到团队的提示词库中。提示词版本化有两个好处一是以后换 AI 工具或换团队成员时不需要重新描述需求二是业务指标口径变化时只需要改提示词里的“数据定义”段落再重新生成原型。建议提示词按固定结构存成 Markdown 文件文件名格式为“项目名_看板_版本.md”。每次修改后记录变更原因。一个看板提示词文件可以只保留四段角色与任务、页面结构、数据定义、交互与输出约束。7.5 上线前检查清单进入生产环境前逐项确认数据源已切换为正式库测试数据是否清理干净。接口存在权限校验未登录用户无法获取销售数据。数字展示单位已确认万元还是元页面与业务口径一致。折线图、柱状图中没有出现空值或超长标签导致的排版错乱。定时刷新已配置且服务端接口能承受轮询压力。AI 生成的代码已由另外一名开发者审查至少确认字段名和数据流。已完成一次面向业务负责人的演示并记录其提出的口径修改点。把提示词生成看板当作“快速把需求变成可讨论页面”的方式而不是取代正式报表系统。它真正的价值是让业务和开发在同一个页面上快速对齐指标对不对、布局顺不顺、交互哪里不顺手。对齐完成后正式版本再交给工程体系做接口、权限和监控这样既快又稳。 AI提示词生成可交互零售业绩看板实战指南
做零售行业的数据分析业绩看板几乎是每个商超、连锁门店、品牌零售公司在周报、月报里都会用到的工具。传统做法需要前端工程师搭建页面、后端提供接口、测试核对数据一套像样的可交互业绩看板往往要排三五天如果业务负责人只是想快速看看“哪些门店完成率低、哪些品类掉量了”这个成本就明显偏高。于是越来越多团队开始尝试用 AI 生成看板把需求写成提示词让 AI 直接产出带图表、筛选器、联动效果的页面。这种方式能不能落地关键不在于 AI 能生成多炫的效果而在于提示词能不能把零售业务的数据口径、维度层次和交互逻辑讲清楚。本文围绕“AI 提示词生成可交互零售业绩看板”这条主线先拆解提示词的结构再给出一套可直接复用的模板然后运行一个单文件 HTML 看板示例最后补齐验证、排错和生产化建议。读完可以把模板套到自己的门店清单、销售数据和指标口径上也可以把提示词思路迁移到商品分析、会员分析等其他看板场景。1. 为什么零售业绩看板适合用 AI 提示词生成1.1 看板要解决的不仅是“展示”零售业绩看板和普通数据报表有一个明显区别它同时承担监控、归因、行动三类任务。监控今天的销售额、订单量、完成率是否正常。归因下滑来自哪个区域、哪些品类、哪些门店。行动是补货、调价、促销还是调整门店排班。这三类任务决定了看板的信息结构相对固定顶部指标卡、趋势图、结构占比、排行和明细表格。信息结构固定AI 生成代码的成功率就很高因为页面布局和交互方式都有大量成熟范式AI 的训练语料里包含大量类似案例。这也解释了为什么“结构清晰的看板需求”适合用提示词做输入的是指标、维度、筛选条件输出的是布局和代码中间没有太复杂的业务规则。相比从零构思产品逻辑AI 更像是帮开发者把“已经想清楚的看板”快速落成页面。1.2 提示词生成看板的价值边界并不是所有看板都适合用提示词生成。适合的场景通常具备以下特征指标口径已经确定不需要 AI 猜测。数据量在演示或前端聚合可承受的范围内。页面主要做筛选、下钻、联动不涉及复杂权限流转。团队希望在一天内看到可点击的 Demo。不适合的场景包括严格的数据权限隔离、实时流式数据、巨量明细加载、复杂业务审批流。这些必须交给后端架构和前端工程体系处理AI 提示词只能在原型阶段协助。用一张表对比三种实现方式实现方式从需求到可用交互能力数据接入维护成本适用阶段手写前端加后端接口3 到 7 天强可定制强可对接各系统中高正式系统AI 提示词生成单页1 到 2 小时中靠 ECharts 等库先用静态 JSON后改接口低但需人工审查原型、周报、内部看板低代码看板平台1 到 3 小时中依赖平台组件需平台支持平台绑定快速上线、日常运营AI 提示词生成看板最适合的位置是“快速原型”和“轻量内部看板”。把它当生产级系统的替代方案会踩坑把它当纯玩具又浪费了快速出图的价值。1.3 本文最终要得到的产物为了让整条链路可以被实际验证本文会完成两件事设计一套“零售业绩看板提示词模板”模板里写清楚角色、任务、数据定义、交互要求和输出约束。用这套提示词得到一份单 HTML 文件的可交互看板包含销售额、订单数、客单价、目标完成率等关键指标以及趋势图、品类结构、门店排行等图表并支持门店筛选和时间维度切换。提示词模板可以复用到其他业务场景只需要替换指标、维度和页面标题。2. 先理解 AI 看板提示词的核心组成2.1 提示词四要素角色、任务、数据、交互提示词不是越复杂越好而是信息越有序越好。一个能稳定生成可交互看板的提示词通常包含四个要素。第一是角色。给 AI 一个明确身份比如“资深前端开发工程师”“零售数据分析师”。角色会改变 AI 选用的代码风格、组件库和注释方式。角色定义为“前端工程师”AI 会输出完整 HTML 和 ECharts 配置角色定义为“数据分析师”则可能更重视指标解释和数据分析结论。第二是任务。任务必须是一个清晰的动词描述例如“生成一个销售业绩看板页面”。要尽量把任务拆开页面包含哪些区域、每个区域放什么图、图之间有什么关系。任务不清晰时AI 会自动补全补全出来的结构往往不是业务想要的。第三是数据。这是最容易出错的地方。AI 无法访问你的数据库所以提示词里要么给出样例数据要么明确告诉它数据字段名和字段含义。没有数据定义AI 只能用“2024 年 1 月”这类假日期和乱编的门店名填充生成的看板看起来正常实际数据口径完全不可用。第四是交互。可交互看板不是“鼠标划过能显示 tooltip”就叫交互而是用户通过筛选、点击、切换来改变视图内容。提示词要明确写出交互链路例如“点击门店排行中的某一门店顶部指标卡和趋势图同步更新为该门店数据”。2.2 数据定义决定看板可用性数据定义在提示词里要做两件事定义指标定义维度。常见零售业绩指标指标建议字段名计算口径销售额sales扣除退款后的实际成交金额订单数orders支付订单数不包含已取消订单客单价avg_order_value销售额 / 订单数毛利率gross_margin(销售额 - 成本) / 销售额目标完成率completion_rate销售额 / 销售目标维度通常包括时间日、周、月、年。区域华东、华南、华北等。门店门店编号、门店名称。品类生鲜、日化、饮料、零食等。提示词建议写成“字段加口径”的形式例如“sales销售额单位元已扣除退款和折扣”。“已扣除退款和折扣”这半句话看着不重要但没有它AI 可能在页面上写“销售额”实际数据却是含退款的口径业务对不上账。2.3 交互定义与图表选型零售看板里最常见的交互有四种时间范围切换、门店筛选、图表联动、指标切换。提示词里可以这样描述顶部提供“本日/本周/本月”切换按钮切换后所有图表按新时间范围重新渲染。左侧门店列表支持多选选择门店后指标卡、趋势图、品类占比图同步筛选。点击销售额排行中的柱子下方细分明细表格展示该门店的订单明细。指标卡区域提供切换开关可以在销售额、订单数、客单价之间切换。图表选型也可以写进提示词。趋势用折线图结构用饼图或环形图排行用横向柱状图区域对比用柱状图。告诉 AI 使用 ECharts生成的代码可读性比手绘 Canvas 高很多。注意提示词中写清“指标字段计算口径交互关系”三项AI 生成结果的可用性才会高只写“做一个漂亮的看板”得到的大概率是演示模板而不是可用的业务看板。3. 一套可复用的零售业绩看板提示词模板3.1 完整提示词示例下面是一段可以直接复制到 AI 对话工具的提示词你是一名有五年零售行业数据可视化经验的前端开发工程师。请用 HTML、CSS、JavaScript 和 ECharts 5 生成一个“零售业绩看板”单页面要求 一、页面结构 1. 顶部标题栏标题为“XX 连锁零售集团 业绩看板”右侧显示当前数据更新时间。 2. 指标卡区域一行四个卡片分别展示“销售额”“订单数”“客单价”“目标完成率”。 3. 图表区域 - 左侧大图近 12 个月的销售额和订单数趋势折线图。 - 右侧两个小图品类销售占比环形图、门店销售额排行横向柱状图。 4. 下方明细表格展示最近 20 条门店销售明细列包括日期、门店、区域、品类、销售额、订单数、毛利率、目标完成率。 二、数据定义 样例数据结构如下请直接在 JavaScript 中使用 [ {date:2025-03-01,region:华东,store:杭州湖滨店,category:饮料,sales:12800,orders:326,target:15000,cost:8900}, {date:2025-03-01,region:华东,store:上海南京路店,category:生鲜,sales:18600,orders:410,target:17000,cost:13200}, {date:2025-03-01,region:华南,store:广州天河店,category:零食,sales:9200,orders:215,target:10000,cost:6400} ] 字段说明 - sales销售额单位元已扣除退款和折扣。 - orders订单数不包含取消订单。 - target当日销售目标。 - cost销售成本用于计算毛利率。 - 毛利率 (sales - cost) / sales * 100%。 - 目标完成率 sales / target * 100%。 三、交互要求 1. 顶部提供“本日”“本周”“本月”三个按钮点击后图表按时间维度重新聚合展示。 2. 门店排行柱状图支持点击点击某个门店后指标卡、趋势图、品类占比图都筛选为该门店数据。 3. 鼠标悬停图表时显示 tooltiptooltip 中必须显示指标名、数值和单位。 4. 所有图表在窗口尺寸变化时自适应宽度。 四、实现要求 1. 使用 ECharts CDN 引入 echarts.min.js版本使用 5.4.3。 2. 一个 HTML 文件完成CSS 写在 style 中JavaScript 写在 script 中。 3. 数据统一放在数据数组里不要散落在图表配置中。 4. 代码中加中文注释说明每一块区域的作用。这段提示词把“角色、任务、数据、交互、实现约束”分段列出大多数对话模型第一次就能生成完整页面。实际使用时把“XX 连锁零售集团”替换成自己的企业名把样例数据结构替换成自己的字段即可。3.2 提示词关键段落拆解提示词里最容易影响结果的是四段。第一段“页面结构”决定了整体布局。布局写清楚后AI 不会自行发挥出奇怪排版。第二段“数据定义”是可用性来源。给出样例数据后AI 会基于样例字段生成聚合函数例如按月份汇总 sales、按门店筛选数据。不给数据结构的提示词AI 会自己命名变量导致页面和后续沟通的字段名不一致。第三段“交互要求”决定可交互不是摆设。写清楚点击、筛选、切换按钮的行为AI 才会生成事件处理器否则它只会做静态图表。第四段“实现要求”控制输出格式和依赖。指定 ECharts 版本、单文件、CDN 引入能避免 AI 生成需要构建工具的 React 项目或引用不存在的本地 JS 文件。3.3 不同 AI 工具下的微调策略不同 AI 工具对长提示词的理解能力不同可以根据工具做调整AI 工具类型推荐做法说明对话模型直接使用完整模板长提示词解析能力强一次生成成功率高代码生成插件拆成多轮指令先写页面结构再补数据聚合和交互网页生成类工具只保留布局和数据定义工具内置渲染引擎自定义交互需要单独配置如果一次生成的代码有问题不要重新写完整提示词建议在对话里追加“现在按以下要求修改”并列出问题。这种方式比反复重新生成更省时间。4. 用提示词生成可交互看板从提示词到 HTML4.1 先明确看板产物的文件形态目标产物是一个单 HTML 文件用 ECharts 从 CDN 加载JavaScript 里放样例数据打开浏览器即可运行。它不需要 Node.js不需要构建工具适合用来看效果和验证提示词。完整多图表版本由第 3 节提示词生成这里先给出一个最小可运行代码方便理解页面结构和交互链路。4.2 最小可运行代码指标卡加趋势图加时间切换下面这个示例只保留了一个指标卡和一个趋势图但已经包含“按钮切换 - 重新计算数据 - 调用 setOption 更新图表”的完整链路!DOCTYPE html html langzh-CN head meta charsetUTF-8 title零售业绩看板-最小可运行版/title script srchttps://cdn.jsdelivr.net/npm/echarts5.4.3/dist/echarts.min.js/script /head body div stylepadding:20px; h2零售业绩看板最小演示/h2 button iddayBtn本日/button button idmonthBtn本月/button div idsalesBox stylefont-size:24px;margin:12px 0;销售额-/div div idtrend stylewidth:100%;height:360px;/div /div script const rawData [ { date: 2025-03-01, sales: 12000 }, { date: 2025-03-02, sales: 13500 }, { date: 2025-03-03, sales: 11800 } ]; let range day; const salesEl document.getElementById(salesBox); const trend echarts.init(document.getElementById(trend)); function calcSales() { if (range day) { const today 2025-03-01; return rawData.filter(d d.date today).reduce((s, d) s d.sales, 0); } return rawData.reduce((s, d) s d.sales, 0); } function render() { salesEl.textContent 销售额 calcSales(); trend.setOption({ xAxis: { type: category, data: rawData.map(d d.date) }, yAxis: { type: value }, series: [{ type: line, data: rawData.map(d d.sales) }] }); } document.getElementById(dayBtn).addEventListener(click, function () { range day; render(); }); document.getElementById(monthBtn).addEventListener(click, function () { range month; render(); }); window.addEventListener(resize, function () { trend.resize(); }); render(); /script /body /html这段代码有三个值得注意的点数据统一放在rawData数组里图表配置里不写死数据。render()函数同时负责更新指标卡和图表任何交互都调用它。window.addEventListener(resize, ...)保证了窗口变化时图表能自适应。完整多图表看板也是同样的逻辑只是把rawData按门店、品类、时间做更多聚合并用多个echarts.init实例渲染不同图表。4.3 用完整提示词扩展成多图表看板有了最小可运行代码之后再把第 3 节的完整提示词交给 AI。如果发现生成结果不理想可以通过追加指令修正例如“指标卡的数字需要千分位分隔符。”“趋势图横轴改为从 1 月到 12 月使用中文月份。”“点击门店排行柱子后明细表格也联动筛选。”“把样例数据替换成 fetch 请求接口路径为 /api/sales。”不建议的问题是“再生成一版好看的”。“好看”是主观描述AI 不知道具体改哪里。尽量把期望描述为可检查的客观行为例如“点击按钮后指标数字发生变化”。4.4 从静态数据到真实接口演示阶段数据写在 JavaScript 里接入真实数据时需要把数据数组换成接口返回。引入接口后要注意跨域问题。本地直接双击 HTML 文件请求后端接口浏览器会阻止跨域。开发时有两种常见做法把页面放到 Web 服务器目录下由服务端提供 API或者在测试环境开启 CORS 配置。前者更接近生产环境推荐使用。生产环境还应该避免在 HTML 内部直接暴露后端地址和鉴权 token。接口凭证要放在服务端前端通过登录态或短期令牌访问。5. 运行验证本地启动、浏览器检查和指标核对5.1 在本地启动页面直接双击 HTML 可以用但涉及 fetch 请求时会被跨域策略挡住。建议用本地静态服务器启动。如果本机有 Python 3cd 看板目录 python -m http.server 8080然后浏览器访问http://localhost:8080/index.html如果本机有 Node.js也可以用 npx servenpx serve .启动完成后页面上的图表应该能正常渲染按钮可以切换时间范围。如果图表空白按第 6 节的排查路径处理。5.2 用验证清单逐项核对打开页面后按照以下清单逐项检查检查项预期结果检查方法页面标题显示“零售业绩看板”浏览器标签页和页面顶部指标卡销售额、订单数、客单价、目标完成率有具体数值对照原始数据手工计算一行趋势图展示 12 个月趋势线段悬停显示月份和数值品类占比环形图各品类百分比合计接近 100%看图例和 tooltip门店排行按销售额从高到低排序观察柱状图排序时间切换点击“本日/本周/本月”后图表数字变化切换后数值与筛选规则一致门店点击点击门店柱子后其他图联动点击后指标卡数值变化自适应缩小浏览器窗口图表不溢出拖动浏览器边缘观察5.3 指标核对方法工具类页面最容易犯的错误是“图表能画出来但数值不对”。核对时不要只看图形要重新计算。例如验证“门店排行”的销售额是否等于所有销售记录的 sales 之和可以在浏览器开发者工具控制台执行聚合const sum rawData .filter(function (item) { return item.region 华东; }) .reduce(function (acc, item) { return acc item.sales; }, 0); console.log(sum);再和页面图表里的值对比。如果数值不一致问题通常出在分组键、筛选条件或者聚合函数上。AI 生成的代码可能把 mock 数据改名、把字段名写错或者在聚合时漏掉某个筛选条件。任何从 AI 生成的代码上线前都要用真实业务数据做一次口径核对。6. 常见问题与排查路径6.1 图表区域一片空白现象页面打开后指标卡正常显示但图表区域是空白。可能原因包括ECharts 引入失败、图表容器没有高度、JS 报错中断渲染。检查顺序打开浏览器开发者工具 Console 面板看有没有Uncaught ReferenceError或echarts is not defined。确认 CDN 地址可以在当前网络访问。如果无法访问更换为其他 CDN 或把 echarts.min.js 下载到本地。确认图表容器设置了高度。ECharts 容器高度为 0 时图表不会显示。处理方式CDN 地址使用https://cdn.jsdelivr.net/npm/echarts5.4.3/dist/echarts.min.js容器样式中保留height: 360px或更高。6.2 时间按钮切换没有反应现象点击本日、本周、本月按钮指标卡和图表没有变化。常见原因是按钮事件绑定缺失。AI 有时只生成了按钮的 HTML却没有绑定 click 事件。检查方式在 Console 里输入document.querySelector(button)查看元素再搜索代码中是否有addEventListener(click, ...)。如果代码里没有绑定让 AI 为三个时间按钮绑定点击事件并在事件中重新计算数据、更新所有图表。6.3 点击门店排行没有联动现象门店柱状图可以点击高亮但其他图表不变化。原因通常是事件回调里只改了选中的样式没有重新执行数据筛选和渲染逻辑。需要让 AI 在点击事件回调中做三件事记录当前选中门店、调用筛选函数得到过滤后的数据集、调用setOption更新其余图表。推荐的追加提示词点击门店排行柱状图时把当前选中门店存入变量 selectedStore然后根据 selectedStore 过滤原始数据重新渲染指标卡、趋势图和品类占比图。如果再次点击同一门店取消筛选并恢复全部门店数据。“再次点击取消筛选”是一个容易遗漏的细节没有它用户无法回到总览状态。6.4 毛利率和目标完成率计算错误现象页面能显示毛利率但数值明显不对例如大于 100%。检查是否按口径计算。毛利率公式为(sales - cost) / sales * 100%目标完成率为sales / target * 100%。如果 AI 把 cost 写成cost / sales或者忘记乘以 100结果都会异常。建议在提示词里显式写好公式并通过追加指令修正。验证时选取一条数据手工计算对比页面显示值。6.5 问题排查速查表问题现象常见原因检查方式处理建议图表空白JS 报错或容器高度为 0Console 查看报错、检查 CSS 高度修 JS 报错、给容器加高度ECharts 未定义CDN 被屏蔽或地址错误检查 Network 面板更换 CDN 或本地引入时间切换无效按钮没有绑定事件搜索 addEventListener追加指令绑定 click点击联动无效回调里没有重新渲染其他图检查点击回调代码在回调中统一重渲染数值不对聚合字段名或筛选条件错误控制台手工聚合对比修正字段名和筛选逻辑跨域请求失败本地 file 协议直接访问接口看 Network 的 CORS 报错用本地服务器启动页面7. 从演示看板到生产看板的工程化建议7.1 数据接口设计AI 生成的看板通常把数据放在前端生产环境必须改为接口驱动。最基础的做法是让页面启动时请求一个看板数据接口接口返回聚合后的指标、图表 series 和明细表格数据。接口可以按前端读取习惯返回结构化数据{ summary: { sales: 1268000, orders: 43200, avgOrderValue: 29.4, completionRate: 84.6 }, trend: [ { month: 2025-01, sales: 168000, orders: 4200 }, { month: 2025-02, sales: 142000, orders: 3800 } ], category: [ { category: 饮料, sales: 286000 }, { category: 生鲜, sales: 352000 } ], storeRank: [ { store: 杭州湖滨店, sales: 98600 } ], detail: [] }接口数据由服务端用 SQL 或数据仓库聚合前端只负责渲染。这样看板页面的 JS 逻辑会大幅简化也不容易出现口径不一致的问题。7.2 性能与刷新策略数据量大时不要在前端循环几十万条原始记录做聚合。正确做法是后端按查询条件聚合后返回前端接收的是已经聚合的小数据量结果。刷新策略要看使用场景日报看板每天固定时间刷新一次即可。周报看板每周一刷新。运营大屏可以每 5 到 30 分钟轮询一次。轮询实现可以使用setInterval但要注意在用户切换页面时清理定时器避免多个定时器叠加。更合适的方案是让后端接口支持条件查询前端只在用户切换时间范围时重新请求。7.3 对 AI 生成代码做人工审查AI 生成代码可以节省大量开发时间但不能跳过审查。重点看三点数据字段名是否与后端一致。事件绑定是否完整筛选逻辑是否影响全局状态。是否包含不安全的拼接方式比如把用户输入直接拼进 HTML。看板页面内的门店名称来自接口时要用文本节点或框架转义避免 XSS 风险。审查时可以建立一份 AI 代码审查清单审查点审查内容数据字段名、单位、口径、是否硬编码交互按钮、点击事件是否绑定筛选状态是否正确安全外部输入是否转义、接口是否有权限控制性能是否在前端做大量数据聚合、是否有重复渲染依赖CDN 版本是否固定、是否有不可控的外部脚本7.4 把提示词沉淀为团队资产一次写好的提示词值得回收到团队的提示词库中。提示词版本化有两个好处一是以后换 AI 工具或换团队成员时不需要重新描述需求二是业务指标口径变化时只需要改提示词里的“数据定义”段落再重新生成原型。建议提示词按固定结构存成 Markdown 文件文件名格式为“项目名_看板_版本.md”。每次修改后记录变更原因。一个看板提示词文件可以只保留四段角色与任务、页面结构、数据定义、交互与输出约束。7.5 上线前检查清单进入生产环境前逐项确认数据源已切换为正式库测试数据是否清理干净。接口存在权限校验未登录用户无法获取销售数据。数字展示单位已确认万元还是元页面与业务口径一致。折线图、柱状图中没有出现空值或超长标签导致的排版错乱。定时刷新已配置且服务端接口能承受轮询压力。AI 生成的代码已由另外一名开发者审查至少确认字段名和数据流。已完成一次面向业务负责人的演示并记录其提出的口径修改点。把提示词生成看板当作“快速把需求变成可讨论页面”的方式而不是取代正式报表系统。它真正的价值是让业务和开发在同一个页面上快速对齐指标对不对、布局顺不顺、交互哪里不顺手。对齐完成后正式版本再交给工程体系做接口、权限和监控这样既快又稳。