企业官网建设流程全解析

做零售数据分析的同学应该都有这种感受：每天早晨开完例会，领导要的“昨天销售怎么样”往往不是一句话能说清的。要用 Excel 一张张做透视表、插入图表、再手动更新数据；要不就得上 BI 工具，申请账号、拖拽建模，一套流程走下来小半天就没了。如果是中小型零售企业，没有专门的数据团队，这块工作通常落在运营或店长身上，大家被 Excel 折腾得够呛。AI 提示词的出现，其实是把这个链条大大缩短了：你不需要先学会多少前端知识，也不需要懂复杂的图表库，只要会描述业务需求、会写提示词，就能让 AI 直接生成一个可以点击、可以筛选、可以悬停查看数据的交互式业绩看板。本文将围绕这个主题，完整拆解一套“AI 提示词 → 可交互业绩看板”的实操方案，包括提示词设计思路、完整代码示例、运行验证方法，以及常见的报错和排查方案。无论你是零售运营、数据分析师，还是想给门店做销量看板的开发同学，都可以直接参考这套流程。

1. 背景与核心概念

1.1 什么是可交互业绩看板

业绩看板，本质上是一个把销售、订单、客单价、退货率等核心指标集中展示的可视化页面。传统做法是写字楼里常见的“一张大屏挂了几个固定图表”，但那种通常是只读的，领导想看某个月的数据还得喊开发改参数。可交互业绩看板则不一样，它允许使用者通过鼠标点击、滑动、勾选等方式自行探索数据。

举个例子。你做了一个“门店销售趋势”折线图，交互式看板可以实现：

• 鼠标悬停时显示某一天的具体销售额；
• 点击图例中的“线上门店”，可以单独隐藏或显示对应曲线；
• 通过底部滑块缩放时间范围，只看近 7 天或近 30 天；
• 顶部的 KPI 卡片会跟着筛选条件联动变化。

这种交互能力，对于零售业务的分析场景特别重要。因为管理者和运营人员往往不是带着固定问题来看报表的，而是在查看过程中不断产生新问题：“A 门店为什么这几天掉得厉害？”“这个品类占比是稳定的还是在变化？”交互式看板给了他们自己动手找答案的可能。

从技术实现角度看，交互式看板通常由三部分组成：数据层（存销售明细或聚合结果）、前端页面（负责展示和交互）、图表库（负责渲染图表）。本文要讲的是其中前端页面的部分，并且是通过 AI 提示词自动生成的方式来实现。

1.2 AI 提示词在看板生成中扮演什么角色

所谓 AI 提示词，就是用户提供给大语言模型的自然语言指令。它决定了 AI 理解你的需求有多准确，也决定了生成代码的质量。很多人以为提示词就是“帮我写一个好看的页面”这种一句话需求，实际上这种模糊描述生成出来的代码往往只能用“能看”来形容，离“能用”还差很多。

在生成业绩看板这个场景里，AI 提示词需要承担四个任务：

第一，让 AI 理解你的业务角色。你是在做零售行业的分析，而不是在做天气预警或者股票行情，业务背景不同，图表选择和指标口径就完全不同。

第二，让 AI 知道你要展示哪些指标。零售业最常用的是总销售额、订单量、客单价、退货率，或者更细一点的品类销售排行、门店销售对比、时段销售分布。提示词里要明确写出来。

第三，让 AI 知道你要什么交互能力。是要 Tab 切换、时间筛选、还是图表内联动？这决定了 AI 在前端代码中要不要引入事件监听、数据状态变量等逻辑。

第四，让 AI 知道代码的运行环境。本文要落地的是一个纯前端 HTML 文件，数据以静态变量形式存在页面里，那提示词里最好写清楚“生成一个 HTML 文件，使用 ECharts 图表库，数据写在前端变量中”。

所以，AI 提示词的核心价值是降低沟通的不确定性。你不一定需要写出最完美的一句话，但需要把需求说明白，之后通过迭代对话逐步完善，AI 就能生成相当可用的代码。

1.3 为什么零售行业非常适合这套方案

零售行业的业绩数据有以下几个特点：密级高但单项简单，结构固定而口径多样，报表需求频繁且变化快。

• 密级高但单项简单：每天的销售记录包括时间、门店、品类、销售额、订单数等字段，单看每一条记录很简单，但合在一起量很大。
• 结构固定而口径多样：同样一个“销售额”，不同部门可能会按含税、不含税、折扣后、实收等多个口径来定义。
• 报表需求频繁且变化快：月初、月中、月末关注的指标不一样；大促期间需要对比活动前后数据；新品上市要看品类动销。

这些特点决定了零售行业对“快速生成、灵活调整”的数据展示工具需求很强烈。传统开发模式下，业务提一个需求，排期少则两天多则一周。而用 AI 提示词生成看板，业务同学写好需求描述后，AI 可以在几十秒内生成一个可以运行的页面。如果指标有调整，直接用自然语言告诉 AI“帮我把退货率加到 KPI 卡片里”即可，不需要从头写代码。这种效率对零售行业快节奏的业务变化是非常有价值的。

2. 环境准备与工具选择

2.1 你需要准备什么

本文的实操案例是一个纯前端项目，所以环境要求非常低。你不需要安装数据库，也不需要配置后端服务，只要满足下面几点：

• 一台能正常上网的电脑；
• 一个现代浏览器，推荐 Chrome 或 Edge；
• 一个文本编辑器，VS Code、Notepad++，甚至直接用记事本都可以；
• 一个 AI 对话工具，这里不限定具体品牌，常见的如 ChatGPT、文心一言、通义千问等都可以。

具体版本没有强制要求。ECharts 库我们会通过 CDN 方式引入，需要联网才能正常加载。如果你所在的环境无法访问外网 CDN，可以把 ECharts 的 JS 文件先下载到本地，然后改成相对路径引入，后面会讲到这个细节。

2.2 图表库选择

前端实现交互看板，最常用的图表库是 ECharts 和 Chart.js。两者的风格差异比较大：

对于零售业绩看板这种场景，需要展示折线图、柱状图、饼图、KPI 卡片等混合图表，而且希望有 tooltip、图例切换、数据缩放等交互能力，ECharts 更合适一点。本文的示例将统一使用 ECharts。

如果你只是做一个非常简单的图表，用 Chart.js 也完全没有问题。给 AI 的提示词里写清楚用哪个库，AI 就会按对应的 API 去生成代码。

2.3 数据准备

在看板开发前，先明确一点：我们这篇文章演示的看板数据是模拟的。数据以 JavaScript 数组的形式直接写在 HTML 文件里。

模拟数据要尽量贴近真实零售场景，这样才能验证看板是否符合业务习惯。本文案例我会构造这样一份数据：时间跨度为 2024 年 8 月一整月，数据字段包括日期、门店、渠道、品类、销售额、订单量。

这样做的好处是：

• 有日期维度，可以做趋势分析；
• 有门店和渠道维度，可以做对比分析；
• 有品类维度，可以做占比分析；
• 有销售额和订单量，可以计算客单价。

在实际项目中，这些数据可以从 Excel 导出后，通过脚本转换成 JSON 格式，替换掉前端代码里的静态变量。这个方案虽然不是最专业的工程化做法，但对于没有后端团队的中小型零售企业来说，简单且有效。

3. 写好 AI 提示词：核心设计与模板

3.1 好的提示词要包含什么

给 AI 写提示词，和给产品经理写需求文档是一个道理：信息要完整、描述要准确、边界要清楚。一段合格的看板生成提示词，至少应该包含以下要素：

• 角色：告诉 AI 你希望它以什么身份来回答。比如“你是一名资深的前端开发工程师，擅长 ECharts 数据可视化”。角色设定能让 AI 在生成代码时调用更专业的知识。
• 背景：说明你所在行业和具体场景。零售行业的分析思路和工业、金融是不一样的，背景信息能让 AI 推荐的图表更合理。
• 任务：明确你要 AI 做什么。是“生成一个完整的 HTML 页面”，还是“只提供核心的 JS 配置片段”？任务要具体。
• 数据：给出数据结构说明，要么直接贴字段示例，要么描述字段类型。
• 交互要求：列出必须支持的交互行为。
• 输出约束：说明代码形式、使用什么库、是否要内联 CSS/JS 等。

这里有个很实用的技巧：把提示词当成一个“填空题模板”来用。每个场景的差异点主要集中在数据、指标和交互要求上，其他部分可以固定下来，这样可以保证生成结果的稳定性。

3.2 零售业绩看板提示词模板

下面我写一个相对完整的提示词模板，你可以直接复制替换其中的业务参数来使用。

你是一名资深的前端开发工程师，擅长使用 ECharts 构建零售行业数据可视化看板。 请帮我生成一个完整的 HTML 页面，用于零售门店的月度业绩分析。 业务背景： - 我是某连锁零售品牌的数据运营人员； - 需要关注全渠道销售表现，包括线下门店和线上小程序； - 分析维度包括时间趋势、品类结构、门店对比、渠道占比； - 核心指标为销售额、订单量、客单价、退货率。 数据说明： - 数据以 JavaScript 数组形式写在页面内的变量中； - 每条记录字段为：日期（YYYY-MM-DD）、门店名称、渠道（线下/线上）、品类（休闲零食/饮料冲调/粮油调味/个人护理）、销售额（单位：元）、订单量（单位：单）； - 日期范围为 2024年8月1日到2024年8月31日。 页面需求： 1. 顶部展示 4 个 KPI 卡片：总销售额、总订单量、整体客单价、整体退货率； 2. 中间区域展示一张销售额与订单量的双轴趋势图； 3. 下方左侧展示一张品类销售额占比饼图； 4. 下方右侧展示一张各门店销售额对比柱状图； 5. 所有图表需要支持鼠标悬停查看数值； 6. 顶部提供渠道筛选按钮（全部/线下/线上），点击后所有图表和 KPI 卡片联动更新； 7. 页面风格简洁专业，适合在办公大屏和电脑浏览器上查看。 输出约束： - 输出一个完整的 HTML 文件，CSS 写在 style 标签中，JS 写在 script 标签中； - 使用 ECharts 最新版 CDN 引入方式； - 保留模拟数据，不用调用后端接口； - 代码中添加必要的中文注释，方便我后续自行修改。

这个模板基本覆盖了生成看板所需的全部信息。你可能会担心这么长的提示词 AI 能理解吗？实际上，大语言模型对结构化文本的理解能力相当好，反而是简短但含糊的指令更容易让模型“自由发挥”跑偏。模板写清楚后，AI 生成的代码在结构和交互逻辑上会稳定很多。

3.3 提示词迭代：从能用到好用

第一版提示词生成的页面，大概率能满足基本需求，但离“好用”还会有距离。比如 KPI 卡片的样式不够精致、图表的颜色不够统一、切换渠道按钮点击后动画不够流畅等。这些问题的解决方式不是重新写一遍提示词，而是基于现状继续提需求。

这里就涉及到 AI 提示词的迭代思维：把 AI 当成一个实习生，你给出修改意见，它负责改代码。常见的迭代指令有：

• “KPI 卡片数字太多，请把销售额格式化为带千分位和 ‘万’ 单位的展示”；
• “把品类占比饼图放大会挡住右侧柱状图，请调整布局为上下结构”；
• “渠道筛选按钮点击后，折线图数据变化太快，请加过渡动画”；
• “图表标题字体太小，请统一设置为 16px 且加粗”。

每提出一个需求，AI 就会改动对应的代码片段。只要初始代码的结构是清晰的，这种改动通常不会破坏其他功能。

所以你记住了：写完第一版提示词只是开始，后续的“修改式对话”才是让看板符合业务细节的关键。

4. 实战：生成可交互零售业绩看板

接下来进入今天的主角环节。我会带你完整走一遍从数据准备、提示词调用到运行验证的过程。这里的模拟数据只做演示，你可以换成自己门店的真实数据。

4.1 数据准备：构造模拟零售销售数据

为了让 AI 生成看板时数据完整可用，我们需要先在 Excel 或者文本编辑器里构造一份模拟数据。

下面这份表格是简化后的销售明细数据，共 31 天，覆盖 3 个门店、2 个渠道、4 个品类。你可以按这个结构准备自己的数据。

实际使用中，你可以直接在提示词里告诉 AI“数据格式为数组，每条对象包含 date、store、channel、category、sales、orders 六个字段”，AI 就会按照这个格式去构造模拟数据。

4.2 第一版提示词示例

这部分我给出一段可以直接复制到 AI 对话工具中使用的提示词。它比上一节的完整模板稍微简化一点，但保留了关键信息。

你是一名熟悉 ECharts 的前端开发工程师，请帮我生成一个零售业绩看板的 HTML 页面。 需求如下： 1. 页面顶部显示 4 个 KPI 卡片：总销售额、总订单量、客单价、退货率； 2. 中间展示折线图，显示每天销售额和订单量的变化，销售额用左轴，订单量用右轴； 3. 下方左侧是饼图，展示各品类销售额占比； 4. 下方右侧是柱状图，展示各门店销售额对比； 5. 页面顶部有两到三个渠道筛选按钮，点击后所有图表按渠道重新计算并更新； 6. 使用 ECharts 库，数据用 JavaScript 数组直接写在页面中； 7. 模拟数据格式：date, store, channel(category), category, sales, orders； 8. 生成完整 HTML 文件，代码加中文注释，样式美观专业。 数据时间范围是 2024年8月，请构造合理的模拟数据。

这一段提示词在细节上比完整模板少了一些，但仍然能生成不错的初版看板。你给 AI 越多约束，结果越稳定。等页面跑起来后，再逐步补上交互细节和样式优化。

4.3 AI 生成的完整代码示例

下面这段代码是模拟 AI 根据上述提示词生成的典型结果。为了保证文章可以直接运行，我把数据结构简化后完整写在 HTML 中。你复制这段代码保存为retail-dashboard.html，用浏览器打开就能看到效果。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>零售业绩看板</title> <!-- 引入 ECharts --> <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif; background-color: #f5f7fb; padding: 20px; } .dashboard { max-width: 1440px; margin: 0 auto; } .page-title { font-size: 24px; font-weight: 700; color: #1f2d3d; margin-bottom: 4px; } .page-subtitle { font-size: 14px; color: #8492a6; margin-bottom: 20px; } .filter-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } .filter-btn { padding: 8px 20px; border: 1px solid #d8dde5; border-radius: 6px; background: #ffffff; color: #3c4b5c; font-size: 14px; cursor: pointer; transition: all 0.3s; } .filter-btn.active { background: #2f6bff; color: #ffffff; border-color: #2f6bff; } .filter-btn:hover { border-color: #2f6bff; color: #2f6bff; } .filter-btn.active:hover { color: #ffffff; } .kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; } .kpi-card { background: #ffffff; border-radius: 10px; padding: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } .kpi-label { font-size: 13px; color: #8492a6; margin-bottom: 8px; } .kpi-value { font-size: 28px; font-weight: 700; color: #1f2d3d; } .kpi-sub { font-size: 12px; color: #13a06b; margin-top: 6px; } .chart-row { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; margin-bottom: 20px; } .chart-row.second-row { grid-template-columns: 1fr 1fr; } .chart-card { background: #ffffff; border-radius: 10px; padding: 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } .chart-title { font-size: 16px; font-weight: 600; color: #1f2d3d; margin-bottom: 12px; } .chart-container { width: 100%; height: 320px; } @media (max-width: 900px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } .chart-row, .chart-row.second-row { grid-template-columns: 1fr; } } </style> </head> <body> <div class="dashboard"> <div class="page-title">零售门店月度业绩看板</div> <div class="page-subtitle">数据范围：2024年8月1日 - 2024年8月31日</div> <!-- 渠道筛选 --> <div class="filter-bar"> <button class="filter-btn active">console.log("当前渠道：", currentChannel, "筛选后数据量：", filteredData.length);

如果控制台显示的数据量变化了，但图表没变，说明setOption()里的数据映射逻辑有问题；如果数据量根本没变，说明筛选条件没有生效。

6.3 数字太大挤在一起

当月销售额到几百万甚至上千万时，KPI 卡片上的数字会显示很长，影响美观。

解决方式是在提示词中增加格式化要求，或在 JS 中统一调用formatNumber()方法，把数字转换成 “128.45万” 这种格式。本文代码中已包含这个函数，你可以直接复用。

6.4 ECharts CDN 加载失败

如果在没有外网的环境运行，CDN 方式不可用。解决方式是把echarts.min.js文件下载到本地，放在和 HTML 同一个目录下，然后修改引入方式：

<script src="./echarts.min.js"></script>

这样即使断网也能正常运行。

6.5 图表数据更新时出现旧数据残留

ECharts 的setOption()默认是合并模式，如果新旧数据结构不一致，旧数据可能残留。解决方式是调用setOption时加上notMerge参数：

trendChart.setOption(option, true);

第二个参数true表示完全替换旧配置，而不是合并。

7. 最佳实践与工程建议

7.1 把提示词沉淀成团队模板

在实际工作中，不建议每次做看板都从零开始编提示词。第一次成功生成后，把提示词保存为团队内部的模板文档，后续做其他门店、其他月份的看板时，只需要替换数据字段和指标名称。

模板化的好处有两个：一是减少沟通成本，二是保证看板风格统一。业务团队每周都要看的数据，如果每次页面样式都不一样，会非常影响阅读效率。

7.2 从静态数据到动态接口

静态数据方案适合做演示和中小数据量场景，但严格来说，它不算真正的工程化看板。如果要长期使用，建议把看板部署到内网服务器上，并提供一个简单的 JSON 接口或本地 JSON 文件，让前端通过fetch请求动态数据。

这样做的优点是数据更新不用改代码，只需定时生成 JSON 文件即可。零售企业通常已经有报表导出或数仓同步的任务，在导出后追加一个 JSON 生成步骤，成本很低。

示例代码片段：

fetch("./data/daily_sales.json") .then(res => res.json()) .then(data => { rawData = data; updateDashboard(); });

7.3 数据安全与权限提示

业绩看板属于经营敏感数据。在实际部署时，要注意：

• 不要直接把看板暴露到公网，建议部署在公司内网或加了访问权限的平台；
• 如果使用 AI 工具生成代码或分析数据，注意脱敏处理，尤其是毛利、成本、会员隐私等敏感字段；
• 当前筛选功能只做了前端过滤，如果业务上需要严格的数据权限隔离（比如不同门店只能看自己店），需要由后端接口来保证，仅靠前端 JavaScript 是不安全的。

7.4 用 AI 生成代码时要验证

AI 生成代码虽然效率高，但也有可能出现图表数据计算错误、单位不统一、交互逻辑遗漏等问题。拿到代码后，建议先走一遍完整测试流程：KPI 数值是否匹配、筛选后数据是否一致、小数位数是否合理、图表有没有明显的显示异常。

数据准确性验证是最关键的一步。比如你可以用 Excel 透视表手动算一遍总销售额和订单量，和看板上的 KPI 卡片做对比。两边一致，才说明代码逻辑是对的。

7.5 扩展方向

如果你希望把这张看板做得更专业，可以考虑下面几个方向：

• 增加日期范围选择器，让用户可以自由选择查询区间；
• 增加门店维度筛选，聚焦某个单店的业绩；
• 对接企业微信机器人或钉钉机器人，每天早上自动推送看板截图；
• 增加导出功能，支持将当前筛选条件下的数据导出为 CSV；
• 把看板从单页 HTML 升级为 Vue 或 React 项目，方便多人协作维护。

每一步都是在现有基础上做增量，不需要推翻重来。

8. 写在最后

这整套“AI 提示词生成可交互业绩看板”的流程，对于零售行业的同学来说，最大的价值不是让你学会写前端代码，而是让你多了一种“用自然语言驱动技术工具”的能力。以前做一个看板，要等开发排期、要过需求评审；现在你自己就能生成一个初版页面，先跑起来看效果，再逐步调整指标和样式。这种工作方式的变化，在业务节奏快的零售行业里，尤其实用。

建议你先按照文章里的示例跑通一遍，然后尝试改改数据、换换指标，多和 AI 对话几轮。等你积累了自己的提示词库和代码片段库，再做其他分析看板就会非常快。如果这篇文章对你有帮助，可以收藏备用，后续遇到问题也可以在评论区交流。