企业官网建设流程全解析

做零售数据的人都有同感：门店日报、周报、月报看得多，真正能一眼看到问题和机会的看板反而少。很多团队喊着做“数据大屏”，要么卡在人力不足，要么卡在开发排期。但实际上，如果你会用 AI 提示词，完全可以绕过前端开发，让大模型直接生成一个带筛选器、图表联动、可交互的零售业绩看板。

这次我们来看一套经过验证的做法：用自然语言描述业务需求和看板布局，让 AI 输出可运行的 HTML + JavaScript + ECharts 代码，本地双击就能打开，改数据就能复用。整个过程不需要写复杂代码，也不需要申请专门的开发资源。

这套方案的核心特点很直接：零开发基础也能上手、支持门店/区域/日期多维筛选、图表之间自动联动、一个提示词换一个门店版本、输出是标准 Web 文件，能嵌入内部系统。本文会从提示词设计、代码生成、本地启动、功能验证、批量生成、常见问题排查六个方面完整演示，适合零售运营、数据分析师、信息化同事，以及所有想快速搭业务看板的同学。

1. 核心能力速览

从能力表能看出，这个方案最大的价值是把“开发工作”转化为“提示词工程”。过去做一个看板要走需求分析、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 平台

3.2 准备数据文件

推荐准备一份 CSV 或 Excel 数据，至少包含以下字段：

建议先做一次简单清洗：去掉空行、统一日期格式、统一金额单位，确认“销售额”“客流”等字段是数字类型。

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 提示词六要素

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 如果生成的效果不满意

第一次效果不理想很正常，建议按优先级排查：

1. 先看控制台是否有报错：浏览器按 F12，打开 Console，看红色报错。
2. 如果报错显示 ECharts 未加载，确认 HTML 中 script 引入的 CDN 地址能访问。
3. 如果筛选器不联动，检查 JS 中是否绑定了 change 事件，是否在 setOption 后执行了图表刷新。
4. 如果数据没显示，检查 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": f"Bearer {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, json=payload, headers=headers, timeout=180) 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(f"output/{file_name}", "w", encoding="utf-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?region=hua_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. 常见问题与排查方法

注意：如果本地部署开源模型后出现显存不足，第一优先级是降低模型尺寸或使用量化版本，具体做法取决于模型和部署框架，不能一概而论。

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、十几个图表、联动大屏”的系统，很容易翻车。建议拆解成两步：

1. 先生成单页基础版：KPI 卡片 + 三个图表 + 两个筛选器。
2. 再在基础版上追加：新增图表、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.html

9.7 合规提醒

涉及零售数据可视化时，明确确认数据使用范围：

• 内部经营分析数据，需要在公司制度允许范围内使用。
• 外部展示场景，需要经过数据负责人审批。
• 涉及顾客个人信息、敏感商业数据，应遵循相关法律法规。

10. 小结与下一步建议

AI 提示词生成可交互业绩看板，核心不是让 AI 替你做所有事，而是把需求描述清楚，让 AI 把你的业务语言转成前端代码。零售行业里，门店多、指标多、更新频繁，这套方法能快速生成可复用的看板模板，尤其适合没有专职前端的数据团队。

你先做的事很简单：准备一份字段清晰的门店数据，粘贴本文的通用提示词到任意一个 AI 对话工具里，生成 HTML 文件后本地打开。一旦验证了“筛选器切换，图表联动”，这套流程就可以推广到更多门店。

最容易踩的坑有两个：一是提示词里没定义字段，导致 AI 生成的图表和你的数据对不上；二是代码复制不完整，页面空白后不知道先看浏览器控制台。把这两点记住，至少能避免一半的返工。

后续可以继续扩展的方向包括：接入公司数据接口实现自动更新、用 Python 脚本批量生成多门店看板、把看板嵌入内部系统的 iframe、进一步用大模型做指标异常自动解读。只要数据边界和合规问题守住，这套组合拳在零售分析场景里有很强的实用性。