做零售数据的人都有同感门店日报、周报、月报看得多真正能一眼看到问题和机会的看板反而少。很多团队喊着做“数据大屏”要么卡在人力不足要么卡在开发排期。但实际上如果你会用 AI 提示词完全可以绕过前端开发让大模型直接生成一个带筛选器、图表联动、可交互的零售业绩看板。这次我们来看一套经过验证的做法用自然语言描述业务需求和看板布局让 AI 输出可运行的 HTML JavaScript ECharts 代码本地双击就能打开改数据就能复用。整个过程不需要写复杂代码也不需要申请专门的开发资源。这套方案的核心特点很直接零开发基础也能上手、支持门店/区域/日期多维筛选、图表之间自动联动、一个提示词换一个门店版本、输出是标准 Web 文件能嵌入内部系统。本文会从提示词设计、代码生成、本地启动、功能验证、批量生成、常见问题排查六个方面完整演示适合零售运营、数据分析师、信息化同事以及所有想快速搭业务看板的同学。1. 核心能力速览能力项说明实现方式用户在 AI 对话窗口输入提示词AI 生成 HTML/CSS/JavaScript 看板代码输出产物单个 HTML 文件包含可交互图表浏览器直接打开可交互能力区域筛选、门店多选、日期范围筛选、核心 KPI 卡片、图表联动图表库基于 ECharts支持折线图、柱状图、饼图、排行榜、雷达图等数据接入支持将 Excel/CSV 数据手工转成 JSON 内嵌到页面或通过接口动态获取硬件要求看板本身不需要 GPU普通办公电脑浏览器即可运行生成过程依赖所选 AI 平台AI 平台可选通义千问、文心一言、Kimi、豆包、ChatGPT、Claude 等具备代码生成能力的大模型批量任务可通过 Python 调用 AI 平台的 API批量生成多个门店/区域的独立看板适用人群零售运营、数据分析师、门店店长、信息化人员上手难度低核心是学会写“可交互看板提示词”从能力表能看出这个方案最大的价值是把“开发工作”转化为“提示词工程”。过去做一个看板要走需求分析、UI 设计、前端开发、测试发布现在只需把业务规则说清楚让 AI 一次生成再做两三轮修正即可。2. 适用场景与使用边界2.1 适合什么场景门店日/周/月经营分析把销售额、客流、客单价、毛利率、坪效放到一张页面。区域对比快速查看华东、华南、华北等区域排名和结构差异。活动复盘用日期筛选框对比活动前后数据。管理层晨会数据准备生成大屏版看板多图表同页展示。多门店巡检批量生成每个单店的业绩看板统一模板按门店字段切换。这类场景的共性是数据体量不大、维度相对固定、展示大于分析、更新频率不高。很适合用 AI 生成 HTML 看板。2.2 不适合什么场景海量实时数据比如每秒产生数万条交易数据需要实时推送建议使用专业 BI 或实时数仓方案。复杂权限管理AI 生成的静态页面没有用户登录和权限系统不适合直接暴露给外部用户。重度自定义样式如果企业要求严格的设计规范、动画效果、多屏幕适配仍需前端工程师介入。数据清洗复杂AI 更适合“把已经整理好的数据变成看板”不适合做复杂的数据清洗、血缘管理。2.3 数据安全与合规边界零售数据通常包含销售额、库存、会员信息等使用 AI 平台时要注意不要直接把真实会员手机号、身份证号、详细地址发给 AI。优先对数据进行脱敏例如把“张三 13800138000”改成“用户A 138****8000”。如果公司数据不允许出域建议使用企业私有化部署的大模型或者在合规前提下使用云端企业版 API。AI 生成的代码和页面仅用于内部业务分析涉及对外发布时必须做数据审计和效果复核。3. 环境准备与前置条件这部分不需要复杂的 GPU 环境核心是准备数据、浏览器、AI 工具三个部分。3.1 选择 AI 平台平台类型示例建议云端对话式 AI通义千问、文心一言、Kimi、豆包、ChatGPT、Claude无需部署直接用适合个人和小团队云端 API各家开放平台适合批量生成、自动化流程本地开源模型Qwen、DeepSeek、ChatGLM 等数据不出内网但需要 GPU 资源显存需求按模型实际测试为准3.2 准备数据文件推荐准备一份 CSV 或 Excel 数据至少包含以下字段字段名示例说明日期2025-01-01按日记录区域华东大区维度门店上海静安店门店维度销售额128000当日销售额单位元客流量2300当日进店客流客单价55.65销售额/客流量毛利率0.38可用百分比或小数坪效85.3单位面积产出建议先做一次简单清洗去掉空行、统一日期格式、统一金额单位确认“销售额”“客流”等字段是数字类型。3.3 运行环境检查清单Windows / macOS / Linux 均可只要能装现代浏览器。浏览器建议 Chrome、Edge版本不要太旧。生成 HTML 后建议通过本地 HTTP 服务打开避免 file:// 协议下部分浏览器限制 JS 加载。如果需要用 Python 批量调用 AI API需要安装 Python 3.8 以上版本并安装 requests 库。ECharts 可通过 CDN 引入建议准备一个离线版本作为备用防止内网无法访问外网。4. AI提示词怎么设计才管用很多人让 AI 生成看板给了一句“帮我做一个业绩看板”结果出来的东西完全不能用。问题不在 AI而在提示词没有约束。一个合格的看板提示词要包含六个要素角色、业务背景、数据结构、页面布局、交互规则、输出格式。4.1 提示词六要素要素作用示例角色限定 AI 的专业视角“你是一名资深的数据可视化工程师”业务背景告诉 AI 这是零售场景“面向零售连锁门店经营分析”数据结构给出字段和示例数据“字段有日期、区域、门店、销售额、客流”页面布局明确 KPI 卡片、图表位置“顶部 KPI中间趋势图下方排名图”交互规则定义筛选器和联动逻辑“区域筛选变化时所有图表联动更新”输出格式要求单一 HTML、内嵌 ECharts“输出一个完整 HTML 文件JS 放 script 标签内”4.2 提示词示例一通用零售业绩看板下面给出一段可直接复用的提示词。实际使用时把数据结构替换成自己的字段即可。你是一名资深的数据可视化工程师兼零售商业分析师。请帮我生成一个可交互的零售业绩看板使用纯 HTML CSS JavaScript图表库使用 ECharts通过 CDN 引入。 业务背景 我有 3 个区域华东、华北、华南每个区域有若干门店。需要按日跟踪以下指标销售额、客流量、客单价、毛利率、坪效。 数据字段定义 - date: 日期格式 YYYY-MM-DD - region: 区域 - store: 门店名称 - sales: 销售额单位元 - traffic: 客流量 - avg_price: 客单价 - gross_margin: 毛利率0~1 之间的小数 - efficiency: 坪效单位元/平方米 页面布局要求 1. 顶部显示 5 个 KPI 卡片总销售额、总客流量、平均客单价、整体毛利率、综合坪效 2. 中部左侧是“近30天销售额趋势”折线图 3. 中部右侧是“各区域销售额占比”饼图 4. 下方是“门店销售额排名 Top10”条形图 5. 页面左上角放筛选器区域下拉框、日期起止日期选择器 6. 默认显示全部数据切换筛选条件后所有图表和 KPI 卡片联动更新 数据嵌入要求 - 在 HTML 中定义一个变量 rawData数据以数组对象形式存放 - 数据结构[{date:2025-01-01, region:华东, store:上海静安店, sales:128000, traffic:2300, avg_price:55.65, gross_margin:0.38, efficiency:85.3}, ...] - 先帮我生成 40 条随机但有业务逻辑的演示数据注意毛利率不能大于 1客单价 销售额/客流量不允许矛盾 技术约束 - 输出一个完整的 HTML 文件CSS 和 JS 全部写在一个文件里 - 使用 flex/grid 布局适配 1920x1080 大屏 - 使用合适的配色不要用默认的天蓝色使用深色背景更适合数据大屏 - JS 中避免使用外部图片避免跨域请求 - 中文注释要完整这段提示词的关键点是给了明确的数据结构、布局位置、交互规则还要求 AI 生成“有业务逻辑的演示数据”。“客单价 销售额 / 客流量”这个约束能防止 AI 生成自相矛盾的数据日常写提示词时建议也用这样“约束条件”限制业务规则。4.3 提示词示例二多门店自动对比看板如果需要一键切换门店维度可以使用下面这个思路请生成一个零售门店对比看板。页面支持左侧门店列表点击某个门店名称后右侧图表切换为对应门店的数据。图表包括 - 月度销售额柱状图近12个月 - 客单价变化折线图 - 销售额区域占比环形图 数据以变量 storeData 提供结构为 { storeName: 上海静安店, monthly: [...], regionShare: [...] }。切换门店时图表通过 setOption 更新不需要刷新页面。4.4 多轮修正的常见话术第一次生成往往不能完全符合预期可以继续追问“KPI 卡片不要显示百分比改成显示具体数值并保留一位小数。”“区域筛选器改为多选支持同时选多个区域。”“折线图加上数据标签销售额超过 10 万的点用红色标记。”“配色调整为浅色背景适合打印。”“把演示数据替换成我自己提供的数据数据格式见下面的 JSON。”5. 实战让AI生成一个可交互业务看板下面演示一条完整链路用提示词生成代码保存到本地运行并验证交互。5.1 生成阶段在 AI 对话窗口粘贴上面的“通用零售业绩看板”提示词按回车后AI 会返回一段较长的 HTML 代码。操作建议让 AI 分块输出如果代码太长导致截断先说“继续输出剩余代码”。复制代码时从 到 完整复制不要漏掉 JS 部分。如果 AI 使用 ECharts CDN代码里会有一行类似 的引入要保持原样。5.2 保存为 HTML 文件将生成的代码保存为一个 HTML 文件例如retail_dashboard.html。保存时注意编码选择 UTF-8。文件名不要使用中文和空格避免部分浏览器或服务出问题。后缀必须是.html。5.3 本地启动方式双击 HTML 文件直接用浏览器打开是最快的方式。但如果遇到图表不加载、JS 不执行等问题更稳妥的方法是启动一个本地 HTTP 服务。Python 启动方式# 进入 HTML 文件所在目录 cd ~/dashboard # Python 3 启动一个简单的 HTTP 服务 python -m http.server 8080然后浏览器访问http://localhost:8080/retail_dashboard.html如果你用的是 VS Code也可以安装 Live Server 插件右键 HTML 文件选择“Open with Live Server”。5.4 生成结果验证页面打开后你应该能看到的效果顶部 5 个 KPI 卡片总销售额、总客流、平均客单价、整体毛利率、综合坪效。折线图、饼图、条形图正常渲染。左上角有区域下拉框和日期选择器。切换“华东”后KPI 和图表自动变成华东区域的数据。调整日期范围后趋势图时间轴跟随变化。这就是“可交互”的核心表现筛选器驱动图表联动而不是刷新页面重新读取数据。5.5 如果生成的效果不满意第一次效果不理想很正常建议按优先级排查先看控制台是否有报错浏览器按 F12打开 Console看红色报错。如果报错显示 ECharts 未加载确认 HTML 中 script 引入的 CDN 地址能访问。如果筛选器不联动检查 JS 中是否绑定了 change 事件是否在 setOption 后执行了图表刷新。如果数据没显示检查 rawData 是否定义字段名是否和图表 data 引用的 name 一致。6. 接口API与批量生成场景日常如果只做一两个看板对话窗口直接生成就够了。当门店数量多到 50 家、100 家时建议用 API 批量生成。6.1 批量生成看板的思路核心思路是用 Python 读入一个门店清单逐门店构造提示词调用 AI 平台的文本生成 API把返回的 HTML 保存为独立文件。门店清单stores.csv: store_name,region,file_name 上海静安店,华东,shanghai_jingan.html 北京朝阳店,华北,beijing_chaoyang.html 广州天河店,华南,guangzhou_tianhe.html对每个门店提示词可以模板化请生成一个零售门店业绩看板HTML 文件ECharts 图表。 门店名称{store_name} 区域{region} 图表要求 - KPI 卡片销售额、客流、客单价、毛利率 - 近90天销售趋势折线图 - 品类销售占比饼图 - 门店楼层、面积等静态指标用文字卡片展示 数据格式如下请替换进 HTML 变量中 {json_data}6.2 Python 调用 API 通用模板不同 AI 平台 API 参数差异较大这里给一个通用请求模板实际使用时需要替换为所选平台的接口地址、鉴权头和字段名。import requests import json import pandas as pd import time # ---------- 配置区按实际平台替换 ---------- API_URL https://your-ai-platform.example.com/v1/chat/completions API_KEY your-api-key MODEL_NAME your-model-name # --------------------------------------- def generate_dashboard(prompt: str) - str: headers { Content-Type: application/json, Authorization: fBearer {API_KEY} } payload { model: MODEL_NAME, messages: [ {role: system, content: 你是一名资深数据可视化工程师只输出完整HTML代码。}, {role: user, content: prompt} ], temperature: 0.2, max_tokens: 8000 } resp requests.post(API_URL, jsonpayload, headersheaders, timeout180) resp.raise_for_status() return resp.json()[choices][0][message][content] # 读取门店清单 stores pd.read_csv(stores.csv) for _, row in stores.iterrows(): store_name row[store_name] region row[region] file_name row[file_name] prompt f 请生成一个零售门店业绩看板HTML 文件ECharts 图表。 门店名称{store_name} 区域{region} 图表要求 - KPI 卡片销售额、客流、客单价、毛利率 - 近90天销售趋势折线图 - 品类销售占比饼图 请输出完整HTML代码不要输出其他文字。 try: html_content generate_dashboard(prompt) # 提取纯 HTML 内容避免 AI 附带解释文字 if !DOCTYPE html in html_content: html_content html_content[html_content.index(!DOCTYPE html):] with open(foutput/{file_name}, w, encodingutf-8) as f: f.write(html_content) print(f已生成 {file_name}) except Exception as e: print(f生成 {store_name} 失败: {e}) time.sleep(1) # 控制请求频率避免触发平台限流批量生成时要注意给每个请求设置 timeout防止长时间卡死。增加异常捕获和重试机制失败的任务记录到日志文件。对“代码被截断”的情况可以在提示词中明确要求“只输出完整 HTML不要分块”但必要时需要检测是否包含/html结尾没有则重新请求。对输出结果做基本校验文件开头避免生成一堆说明文字而不是 HTML。6.3 从接口获取数据AI 生成的看板也可以改造成从接口读取数据比如门店销售数据由公司数据系统提供。改造方式是fetch(https://your-api.example.com/sales?regionhua_dong) .then(res res.json()) .then(data { updateDashboard(data); }) .catch(err console.error(err));这样看板可以定时刷新而不需要手工改 HTML 里的 rawData。不过要注意跨域问题接口需要允许跨域访问或者看板部署在同一个域名下。7. 资源占用与性能观察7.1 看板运行时的资源占用AI 生成的看板本质是一个静态网页所以运行资源占用很低CPU主要是首屏渲染时解析 JS 和 ECharts 图表内存几 MB 到几十 MB 不等取决于图表数量和数据类型。GPU看板本身不需要 GPU。所谓“显卡要求”通常只在本地部署大模型时才需要考虑。磁盘单个 HTML 文件通常几十 KB 到几百 KB几乎不占空间。如果页面加载卡顿优先检查图表是否过多、数据点是否过大、是否未做 setOption 的 notMerge 处理。7.2 生成过程的 Token 消耗对话式 AI 生成一个完整看板通常需要数千到上万 Token 的输出量。本地部署开源模型时需要考虑显存占用但不同模型差异很大必须按实际测试来确定。云端 API 方式可以直接查看平台账单面板。节约 Token 的方法提示词不要无限堆需求一次让 AI 完成“一屏看板”而不是“十屏系统”。数据样例只提供 10~20 条不用把全量数据贴进提示词。修改样式时只描述改动点不要重复粘贴整个 HTML。批量生成时使用固定模板只替换门店名和数据段。7.3 浏览器端性能观察建议打开浏览器开发者工具中的 Performance 面板点击“录制”后刷新页面可以观察脚本执行时间是否过长。是否有大量重复的请求。图表 resize 是否频繁触发。筛选器切换时是否一次变更触发了多次图表刷新。如果筛选器每次变化都重新创建表格实例性能会明显下降。更合理的做法是复用 ECharts 实例只调用setOption更新数据。8. 常见问题与排查方法问题现象可能原因排查方式解决方案打开 HTML 后页面空白文件复制不完整、JS 报错、编码问题按 F12 查看 Console 报错检查文件大小重新复制完整代码确认编码为 UTF-8图表不显示ECharts CDN 加载失败打开浏览器 Network 面板看 echarts.min.js 是否返回 200换 CDN 或下载本地 echarts.min.js 引用筛选器不联动JS 事件绑定缺失或作用域错误查看 Console 是否有 change 事件相关报错使用 addEventListener 绑定确保绑定发生在图表初始化后数据不更新setOption 使用了 oldData没有用新筛选数据在 setOption 前打印新数据确认筛选函数正确重新计算筛选后数据再调用 setOption中文字符乱码HTML 没有声明 charset或文件保存时编码不是 UTF-8查看页面头部 meta charset加meta charsetUTF-8保存时选择 UTF-8生成的代码被截断AI 输出长度限制提示词中要求继续输出分两步先生成页面框架再让 AI 补充图表和数据图表渲染后模糊Canvas 在高分屏上未适配检查 ECharts renderer 和 devicePixelRatio设置devicePixelRatio: 2API 批量生成时返回空接口鉴权失败、输入 prompt 过长、触发了平台限流打印接口返回详情逐个排查Key 是否正确、请求频率是否过高、prompt 是否被截断双击打开时 fetch 请求失败file:// 协议下浏览器禁止跨域请求查看 Network 面板启动本地 HTTP 服务不要用 file:// 打开所有图表都在但数据怪异演示数据缺失业务逻辑对比原始 CSV 与 HTML 内嵌 JSON检查字段映射确认数值单位统一注意如果本地部署开源模型后出现显存不足第一优先级是降低模型尺寸或使用量化版本具体做法取决于模型和部署框架不能一概而论。9. 最佳实践与使用建议9.1 提示词模板化把可复用的提示词做成模板文件用占位符替换门店、日期、指标。推荐使用 Markdown 文件保存例如dashboard_prompt_template.md以后每次只需替换关键词。模板结构建议角色{role} 场景{scene} 数据字段{fields} 布局要求{layout} 交互要求{interaction} 示例数据{sample_data} 约束{constraints}9.2 建立数据校验规则AI 生成的演示数据不一定准确真实数据替换后要重点检查销售额是否都大于 0。客单价是否等于销售额除以客流量。毛利率是否在 0 到 1 之间。日期是否连续是否存在重复日期。门店名称是否有多余空格。建议在替换数据时用 Python 工具生成 JSON而不是手工粘贴。9.3 对零售数据做脱敏处理在把数据发给 AI 之前建议将门店名称和敏感指标做以下处理真实门店名可以映射为“门店A、门店B”。会员号、电话、地址等一律不进入提示词。销售金额如果允许可用“万元”为单位降低精度。指标占比尽量保留有效数字去掉多余小数。这样既不影响看板效果又能降低数据泄露风险。9.4 分阶段生成避免一次生成过复杂内容一次让 AI 生成“带登录、含三个 Tab、十几个图表、联动大屏”的系统很容易翻车。建议拆解成两步先生成单页基础版KPI 卡片 三个图表 两个筛选器。再在基础版上追加新增图表、Tab 切换、导出功能。每一步都验证一次能显著提高成功率。9.5 输出结果的版本管理AI 生成代码迭代很快同一天可能修改十几版。建议每个版本保存为独立文件例如dashboard_v1.html、dashboard_v2.html。或者使用 Git 管理 HTML 文件。在文件顶部加注释记录生成时间、使用的提示词版本、数据来源。9.6 页面发布与访问控制内部使用可以直接打开本地文件。如果需要团队共享推荐部署到内网 Web 服务同时限制访问 IP。不推荐把未做权限控制的看板直接放到公网。部署方式示例# 把看板目录放到 Nginx 静态目录 sudo cp retail_dashboard.html /var/www/html/ # 重启 Nginx sudo systemctl restart nginx访问地址http://server-ip/retail_dashboard.html9.7 合规提醒涉及零售数据可视化时明确确认数据使用范围内部经营分析数据需要在公司制度允许范围内使用。外部展示场景需要经过数据负责人审批。涉及顾客个人信息、敏感商业数据应遵循相关法律法规。10. 小结与下一步建议AI 提示词生成可交互业绩看板核心不是让 AI 替你做所有事而是把需求描述清楚让 AI 把你的业务语言转成前端代码。零售行业里门店多、指标多、更新频繁这套方法能快速生成可复用的看板模板尤其适合没有专职前端的数据团队。你先做的事很简单准备一份字段清晰的门店数据粘贴本文的通用提示词到任意一个 AI 对话工具里生成 HTML 文件后本地打开。一旦验证了“筛选器切换图表联动”这套流程就可以推广到更多门店。最容易踩的坑有两个一是提示词里没定义字段导致 AI 生成的图表和你的数据对不上二是代码复制不完整页面空白后不知道先看浏览器控制台。把这两点记住至少能避免一半的返工。后续可以继续扩展的方向包括接入公司数据接口实现自动更新、用 Python 脚本批量生成多门店看板、把看板嵌入内部系统的 iframe、进一步用大模型做指标异常自动解读。只要数据边界和合规问题守住这套组合拳在零售分析场景里有很强的实用性。