企业官网建设流程全解析

1. 为什么我对"AI自然语言生成可视化"这件事态度转变了

先说个真实场景。前阵子公司要出一份亚运会赛后的数据简报，领导上午下的需求，中午就要看到图表。搁以前，我的流程是这样的：先从公开数据源把奖牌榜、项目分布、参赛人数之类的数据扒下来，整理成表格，然后打开代码编辑器，调ECharts的option配置，为个颜色和间距折腾一个多小时，最后导出截图放进PPT。这一套流程哪怕再熟练，没有四十到六十分钟也下不来，而且要懂点前端基础和JavaScript语法。

但现在不一样了。我只需要把"我想看什么"用自然语言描述清楚，剩下的HTML结构、图表初始化、ECharts配置、样式美化，AI全部帮我写好。我实际测下来，从数据准备到打开浏览器看到一张能交互的柱状图，五分钟确实够用，核心就是把Prompt写得足够精确，并且知道怎么让AI迭代修改。这篇文章就把整个链路完整拆给你看，包括我用的完整Prompt、运行调试的细节，以及几次踩坑后的修正方法，文中的方案主要面向运营、数据分析师和刚接触前端但想快速产出可视化页面的人，有一定的编程基础会更好上手，但即便完全零基础，只要会复制粘贴文件，一样能跑通。

文章里我会以2023年杭州亚运会的公开奖牌数据为例，因为近期亚运会相关的数据可视化需求在职场里确实高频，用它做示例最有说服力。你完全可以把它当成模板，换任何数据集都是一样的操作路径。我不打算给你铺一大堆"可视化是什么"的背景知识，直接进入正题，从准备数据开始说起。

2. 动手之前的准备：数据、工具和需求清单

2.1 确保你手里的数据是"干净的"

很多人一上来就急着打开AI对话框，这是错误的第一步。AI大模型本身的训练数据里确实会有一些亚运会相关的历史数据，但它很可能记错、记混，尤其是涉及具体国家/地区的奖牌数和项目分类时，"幻觉"概率一点不低。我的原则是：所有展示数据必须由我自己确认过再喂给AI，绝不让AI从记忆里猜。

这里以杭州亚运会公开可查的奖牌榜Top10数据为例，整理成一份最简单的结构，你直接复制就好：

这份数据不需要多复杂，够用来做一张柱状图和一张堆叠条形图就行。如果你的数据源是Excel或CSV，我建议在喂给AI之前就整理成这种Markdown表格或JSON数组的形态，而不是丢一个文件名过去。AI工具多数时候没法直接读你本地的Excel，你贴文字内容它才能理解。当然，ChatGPT的付费版和Claude的高级版支持附件上传，但为了流程通用，我统一采用"直接粘贴文字数据"的方式。

2.2 选哪种AI工具、用什么姿势问最稳

可选的对话型AI工具有很多，像ChatGPT、Claude、国内的文心一言、通义千问、Kimi之类都可以完成这个任务。实测下来，针对"生成ECharts前端页面"这类任务，我优先推荐Claude和ChatGPT，代码生成质量和一次通过率相对更高；国内大模型的效果也在快速追赶，如果访问方面有考量，用国内产品完全可行，只是个别样式细节可能需要多几轮调整。

一个容易被忽略的关键点是：同一套Prompt在不同工具里表现会有差异，这和模型对HTML代码的理解侧重有关。所以如果你在某个工具里生成出来的页面打开是白的，先别怀疑Prompt写得不好，换个工具或者换个大模型版本再试一次，很可能就正常了。我在文中演示的Prompt在多数主流大模型上都能出可用结果，你完全可以先按现成的跑一遍。

2.3 说清楚"你要做哪张图"比"随便看看"更有用

在打开AI对话框之前，先花30秒想清楚最终要产出的图表长什么样。哪个维度的数据是主角？用柱状图还是折线图？需要几个图表组合？要不要加数据筛选交互？

比如我这篇文章的目标就很明确：

• 第一张图：展示金牌数Top10国家/地区的对比，用横向柱状图，按金牌数降序排列
• 第二张图：展示Top6国家/地区的金、银、铜牌构成，用堆叠条形图或分组柱状图
• 页面整体风格：深色科技感，适合投在大屏或PPT里

这个"需求清单"就是Prompt的骨架。不要指望AI能替你定义清楚你想要的图表语义——它能帮你写代码，但没法帮你做业务上的思考。你想清楚一分钟，后面能省十分钟调试时间。

3. 核心环节：把需求翻译成Prompt，为什么每个句子都不能省

3.1 完整Prompt直接给到，拿走即用

下面这一段就是我这篇文章完整跑通的Prompt，你直接复制使用即可：

你是一名资深的前端数据可视化工程师，精通HTML5、CSS3和ECharts。请根据我提供的数据，生成一个完整的、可直接在浏览器中运行的HTML文件（单文件模式，所有样式和脚本内联，不依赖本地任何文件）。 【页面目标】 制作一个亚运会奖牌数据看板，包含2张图表，整体使用深色科技感风格，背景色为深蓝渐变，标题文字为白色，适合大屏展示。 【数据】 以下为第19届杭州亚运会部分国家/地区奖牌数据（金牌、银牌、铜牌、总数）： 中国 191 119 88 398 日本 52 67 69 188 韩国 42 59 89 190 印度 28 38 41 107 乌兹别克斯坦 22 18 31 71 伊朗 20 21 28 69 中国台北 19 20 28 67 泰国 12 14 32 58 巴林 10 3 6 19 哈萨克斯坦 9 21 27 57 【图表1要求】 横向柱状图，展示金牌数量Top10国家/地区。要求按金牌数从高到低排序，柱体使用渐变色（从金色到橙色），显示数据标签，图表标题为“亚运会金牌榜TOP10”。 【图表2要求】 堆叠条形图，展示排名前6的国家/地区金、银、铜牌构成。要求使用不同的颜色区分金、银、铜三种奖牌，显示图例和图例位置在顶部居中，数值标签显示在柱体内部，图表标题为“奖牌构成分布（TOP6）”。 【布局与交互要求】 两个图表上下排列，宽度自适应容器（宽度100%），每个图表高度不低于420像素。图表tooltip需完整显示国家/地区名称、各类奖牌数量和总数。页面上方添加一个大标题“第19届亚运会奖牌数据看板”以及一行说明文字“数据来源：公开赛事数据整理”。 【输出要求】 直接输出完整的HTML代码，不要输出解释性文字。代码中注释清晰，CSS部分对关键样式加注释，JS部分说明每个图表的配置要点。请使用ECharts的CDN链接（https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js）引入ECharts。所有中文文本确保使用UTF-8编码正常显示。

看出这段Prompt和随口一句"帮我做个亚运会图表"的区别了吗？区别非常大。它不是一句模糊的自然语言请求，而是一份结构化需求文档。下面我把每一段的用意拆开讲，这样你就能举一反三地改写成自己的任务。

3.2 Prompt的结构拆解：角色、数据、布局、输出约束

第一段先设定角色："你是一名资深的数据可视化工程师"。这么做不是玄学，而是利用了对话模型对角色提示非常敏感的特性。给模型一个明确的"资深工程师"人设，它生成的代码在规范性上明显强于不给定位的版本——变量命名、注释习惯、ECharts配置书写方式都会更接近有经验的开发者，而不是像新手教程里那种能跑但极其粗糙的写法。

紧接着是"页面目标"和"样式基调"：深色科技感、深蓝渐变、大屏展示。ECharts默认的主题是白底黑字，如果不指定风格，AI大概率生成一个普通的白色页面。你直接说清楚"深色背景、白色文字、大屏风格"，它就会在option里主动配置好深色背景和适配的主题色，省去后续手动调样式。

"数据"部分为什么要用"中国 191 119 88 398"这样一行一条的格式，而不是塞一个长长的JSON数组？因为这种结构对人来说是表格，对模型来说也足够简单清晰，解析不容易出错。数据行数和字段都一目了然，模型在处理时会把每一行对应成一条记录，而不是在复杂嵌套结构里丢失字段。

图表要求拆成两张图分别说明，是另一个关键技巧。如果只说"做一个奖牌看板"，模型不知道哪张图更重要、哪张图放上面、具体展示哪个字段。我明确指定了图表1用横向柱状图实现金牌Top10、图表2用堆叠条形图展示前6名奖牌构成，并且补充了排序要求、颜色渐变、数据标签、图例位置这些细节。你越细致，返回结果越不用返工。

最后一段"输出要求"同样重要。我明确要求"直接输出完整的HTML代码，不要输出解释性文字"，这能防止AI在代码前后添加一大段"以下是根据您的需求生成的代码"这类废话。同时指定了ECharts的CDN来源和"单文件模式"，这决定了你拿到的是一个可以直接保存运行的独立HTML文件，而不需要额外安装Node包或构建工具。

提示：不建议把"帮我调整一下颜色"这类开放式修改放在同一个Prompt里。一次只完成一项任务，让AI先产出基础版本，再通过后续对话迭代，成功率会高得多。

4. 完整执行流程：从Prompt到页面运行的全过程记录

4.1 第一次运行：用它生成的HTML文件，直接浏览器打开

把上面那段Prompt粘贴到AI对话框并提交，等它输出代码。以我的实测经验，Claude和ChatGPT通常会在几十秒内返回一整个HTML文件，大约300到500行不等，包含完整的HTML结构、CSS样式和两个ECharts图表的JS初始化代码。

现在你需要在电脑上建一个文件夹，比如叫yayun-dashboard，在里面新建一个文本文件，把AI返回的代码全部粘贴进去，保存时文件名写成index.html。注意保存的编码格式，Windows自带的记事本默认可能是GBK编码，如果页面上的中文变成乱码，要在"另存为"对话框里把编码改成UTF-8再保存。这一步很关键，等你在浏览器里看到满屏乱码再反应就晚了。

保存完成后，双击打开这个HTML文件，你的默认浏览器会加载它。正常情况下你应该能看到一个深蓝色背景的页面，顶部是"第19届亚运会奖牌数据看板"标题，下方依次是金牌榜Top10横向柱状图、奖牌构成堆叠条形图。如果一切正常，五分钟的承诺已经兑现了——但你大概率还需要解决下面这些常见问题。

4.2 页面空白、图表不显示的排查链路

我第一次跑这个方案的时候，双击文件之后页面是全白的，控制台报错"ECharts is not defined"。原因是官方CDN在那个网络环境下的加载超时了。遇到这种情况，排查思路按顺序走：

• 打开浏览器的开发者工具（F12），切到Console标签页，看有没有红色的报错信息
• 如果报错指向echarts.min.js加载失败，说明CDN路径不可达，换一个CDN源就行
• 常用的备选CDN有等，也可以在页面中配置多个script标签做fallback（但注意别重复初始化ECharts）

还有一种典型的"图表区域空白"：页面背景和标题都显示正常，但图表所在区域一片空白。这时候多半是容器高度的问题。ECharts在初始化时，如果发现挂载它的DOM元素高度为0，图表就不会渲染出来。我在Prompt里专门写了"每个图表高度不低于420像素"，就是为了规避这个问题，但AI偶尔会漏掉，检查一下html里的chart容器是不是设置了height: 420px这类的样式，如果没设置，手动加上即可。

4.3 为什么推荐用VSCode + Live Server而不是直接双击

双击打开也能看，但这里有一个体验上的坑：本地文件直接打开时，ECharts的代码通常没问题，但一旦涉及后续通过fetch或XMLHttpRequest请求外部数据（比如把数据放到JSON文件里），浏览器会拦截本地跨域请求，导致页面数据加载不出来。如果你想在这个项目上继续迭代，我建议换成VSCode配Live Server插件，理由有三个：

• 通过本地服务器访问页面，后续即使加了数据请求功能也不会跨域报错
• 页面改动保存后浏览器自动刷新，省去手动刷新的重复动作
• 在浏览器里用F12调试绝对比反复双击文件顺畅得多

操作步骤也不复杂：下载安装VSCode，在扩展市场里搜索"Live Server"并安装，然后用VSCode打开你存放index.html的那个文件夹，右键点击HTML文件，选择"Open with Live Server"，浏览器会自动打开一个http://127.0.0.1:5500/index.html的地址。这个过程不需要懂Node或npm，照做即可。

5. 生成之后还要调试：一些AI不会主动告诉你的优化细节

5.1 深色主题下的视觉协调：背景、文字、坐标轴

AI一次生成的图表，视觉上往往是"能看但不精致"。比如深色背景下的坐标轴文字颜色，它可能默认用了深灰色，和背景融在一起看不清。我的习惯是在拿到底稿后，打开开发者工具，看看当前option里这些字段的实际表现：

xAxis.axisLabel.color：坐标轴文字的字体颜色 yAxis.axisLabel.color：另一个维度的坐标轴文字颜色 legend.textStyle.color：图例文字颜色 tooltip.backgroundColor / textStyle：提示框的背景色和文字色

对于深色背景的页面，一套我常用的配色方案是：坐标轴文字用rgba(255,255,255,0.75)，图例文字用白色，tooltip背景用rgba(0,0,0,0.8)带一点边框色。你完全可以在后续对话里把这段需求直接发给AI，说"把坐标轴文字改为rgba(255,255,255,0.75)，图例文字改为白色，tooltip背景改为半透明黑色"，它改起来很快，比自己在代码里翻选项要高效。

但前提是你得知道这些配置项叫什么。这里给零基础的朋友一个速成思路：ECharts的所有视觉细节都是由option对象控制的，你不需要背配置项，只需要能描述"哪里不好看"，然后让AI把它翻译成配置项。

5.2 数据更新时别重新生成整个页面，学会在对话里"局部修改"

在职场里，数据变动是最常见的事。亚运会最终奖牌榜公布后，你之前用的临时数据可能就要替换成精确版本了。这种时候千万别重新复制整个Prompt再让AI从头生成一遍，效率太低，而且可能把之前调好的样式又弄丢了。

正确做法是，在AI的对话窗口里直接追加一条新指令，把新数据粘贴进去，然后这样说：

我更新了数据，请只修改图表代码里的数据区部分，把旧的奖牌数据替换成我下面提供的这些新数据。其他样式、布局和配置保持不变。

多数情况下，AI只会更新你指定的数据区段，周围的代码保持原样。这种"持续对话而不是每次重新新开"的工作方式，是AI辅助编程效能提升的关键习惯，也最贴近真实工作流。

5.3 增强交互细节：给图表加一点"能点的东西"

纯静态图表在PPT里够用，但如果这份看板是放在大屏上给领导看动态效果的，我会再追加几个迭代指令：

• "给图表1加一个dataZoom组件，让柱状图可以通过下方的滚动条滑动查看"
• "给两个图表都加上动画效果，把animationDuration设为1500，animationEasing设为cubicOut"
• "在大标题右侧加一个当前日期显示，格式为2023年X月X日"

这些追加功能用自然语言描述即可，AI会在原有代码基础上增量修改。不过要提醒一点：如果追加了太多功能导致页面运行异常，优先查看F12的Console报错，常见的问题是在ECharts初始化时配置了不存在的组件名，比如使用了未引入的dataZoom依赖。ECharts 5通过CDN引入的全量包这些组件默认都包含，所以通常不至于出错，但遇到问题先确认这个方向总没错。

6. AI生成可视化的边界：什么能依赖它，什么必须自己守住

6.1 AI会一本正经地"编数据"，数据核验必须由你完成

我前面反复强调数据要自己准备，这里用实际例子说明原因。有一次我偷懒，直接让AI"生成2018年亚运会奖牌榜前10名柱状图"，它给了一组非常像样的数据，排名和数量看起来都很合理。我拿公开资料一核对，发现第7名、第9名的奖牌总数和真实数据对不上。大语言模型的训练数据里确实存在大量公开知识，但它没有检索能力（多数工具即便有联网功能，默认也不开启），它的回答本质上是在"猜"一个最可能的序列。所以记住这条铁律：凡是展示数据，一律以你确认过的数据源为准，AI只负责代码和样式，不负责数据真实性。

6.2 代码也要审查：能跑不代表逻辑正确

AI生成的代码能运行，不代表它准确实现了你的业务逻辑。举个例子，它可能把"金牌榜Top10"实现成了"总奖牌数Top10"，由于这个样例数据里韩国和日本的总奖牌数排序和金牌排序不完全一致，图表呈现出来可能和你预想的"按金牌排"有细微出入。审查时重点看三样东西：

• 数据数组的顺序是否和你的要求一致（比如是否做了降序）
• 序列（series）里的name字段和图例是否对应你提供的维度和指标
• tooltip里的格式化函数是否输出了正确的单位

我在Prompt里写了"按金牌数从高到低排序"，并且因为数据本身就是降序给出的，AI没有绕弯。但你如果给出乱序数据又没强调排序，AI很可能会保持你提供的原始顺序，你需要根据业务需求逐项检查。

6.3 别把敏感业务数据灌进公开AI工具

这一点值得踩一脚刹车。AI工具在帮助你高效产出的同时，也可能把输入内容纳入服务方的数据体系。你自己玩玩亚运会奖牌数据没问题，但如果是公司内部销售数据、用户明细、未公开的经营指标，都往公开AI对话框里贴，这是有数据合规风险的。我的处理习惯是：先在内部脱敏，把字段改成代称、数值做偏移，或者直接随机生成一组结构相似的数据，等代码调通后再替换回真实数据。这一步不能省。

6.4 审美天花板：AI的初稿通常只是60分，你要把它改到80分

最后聊个软性但重要的事。AI生成的图表，视觉上往往缺乏一种"设计感"。它能把所有配置项都摆到正确的位置，但不会主动帮你考虑品牌色、字重层级、图表之间的间距节奏。你可能要追加好几轮"把标题改成24px加粗""两个图表之间加40px间距""柱状图的圆角设为8px"这类细节调整。这并非缺陷，而是工具使用方式的区别——AI能快速替你完成"从0到60分"的搭建，但"从60到80分"的审美打磨仍然需要你的判断力。善用反向提问也很有效，比如让AI"从视觉层级角度检查一下当前页面有什么问题"，它有时给出的改进建议会超出你的预期。

整个方案跑通后，我最大的体会是：AI不是替你思考，而是替你执行。它把从需求到代码之间那段最耗时的翻译过程压缩到了分钟级，但需求定义、数据核验、审美判断这些事情反而变得更重要了。把这个Prompt存成自己的模板，以后不管是换个城市数据、换个体育赛事，还是整理部门月度业务指标，你只需要替换数据区域和图表需求描述，十分钟内产出一个能直接演示的看板页面是完全可行的。