企业官网建设流程全解析

AI写代码这事儿，两年前我是当成段子看的。直到有一次，我把一份杭州亚运会的奖牌数据丢给大模型，随口说了句"帮我做个柱状图加折线图，看看历届金牌数的变化"，它居然真的给了我一个完整的HTML文件，存下来双击打开，图表就在那儿了。整个过程，从整理数据到最终出图，不到5分钟。用自然语言直接驱动数据可视化，从那天起就不再是玩票，而是我处理临时图表需求的首选方案。这篇文章会完整拆解我是怎么用AI把亚运会公开数据变成一张可交互图表，包括直接复制就能用的Prompt模板、完整代码、以及几轮迭代中踩过的坑。

1. 整体思路：为什么"自然语言写可视化"这事能成立

1.1 从"手工调代码"到"对话生成"的路径变化

如果你以前做过数据可视化，大概能理解那种"想画一张图，但力气全花在工具上"的体验。用Excel吧，拖拽字段简单，但一涉及自定义配色、动效、大屏展示就抓瞎；用Python的matplotlib吧，环境装半天，出的图还一股学术味儿；用前端ECharts吧，学习成本不算高，但光是把option那个配置对象调明白，就够搜一下午。

大模型出来之后，这条链路被压缩成了很人性化的一步：你用自然语言描述"我想要一张什么图、数据是什么、风格怎么样"，AI直接给你一段可以运行的代码。关键是，这一步在ECharts这类声明式前端框架上成功率极高。为什么？因为ECharts本身就是"你告诉我数据和图表形态，我自己负责渲染"的配置型框架，天然适合被AI翻译。换句话说，AI不是在做架构设计，它是在做翻译——把一句口语化描述，翻译成一个结构化的option对象。而翻译，恰恰是现在大模型最擅长的事情。

我做这个项目时虽然只有一份奖牌数据，但稍微试了一下，AI同样能生成词云、桑基图、地图热力图，原理完全一样。你要做的只是把"描述"说得足够清楚，把"数据"准备得足够干净。剩下的活，它干得比多数新手熟练。

1.2 适用场景与边界：别指望AI什么都对

这个方案的适用面其实很清晰：

• 一次性或者少次数的图表展示，不想为了一张图去学一个BI工具。
• 数据量不大，几千行结构化数据以内，不需要后端参与。
• 需要快速出效果、快速改需求，"今天下班前给我一张图"的场景。
• 素材是公开数据或者你自己整理好的数据，只需要"翻译"成图。

但有些边界得提前说清楚。如果你要的是超大数据量的实时渲染、复杂的下钻联动、多用户权限控制，那AI生成的单文件HTML是撑不住的，那属于专业BI平台和后端架构的活儿，别硬让一个网页扛。另外，AI的记忆不靠谱。它可能记得"亚运会大概有十几个项目"，但它不会记得"2014年仁川亚运会中国拿了151枚金牌"这种具体数字。在这个项目里，数据准确性必须自己把关，AI只负责"把数据变成图"，不负责"回忆事实"。记住这个分工，后面会少踩很多坑。

2. 数据准备：把亚运会数据喂给AI前，先做好这一步

2.1 数据来源与初步清洗

我这次演示用的是"历届亚运会中国代表团金牌数"这个公开数据。注意，是公开的体育赛事奖牌数据，来源是历届亚运会官方奖牌榜的公开汇总，我人工整理核对过一遍，确保年份和金牌数对得上。这活儿看着简单，其实最费事的就是这里，因为AI不认识这些数字，你给它错误数据，它只会把错误的图画得更漂亮。

最终我整理成了这样一份二维表：

清洗的时候有三个细节值得说。第一，全角符号和空格必须清干净，特别是年份前后不要留空格，否则AI在生成代码时会把数字当成字符串处理，图里出来就是NaN。第二，要明确口径，我这个数据只统计金牌数，不是奖牌总数，所以在Prompt里必须写清楚"此数据为金牌数"，否则AI可能自作聪明去猜你的口径。第三，如果有缺失年份或者说明性注释，直接写进数据文件的备注里，不要只在自己脑子里记着，AI没有读心术。

2.2 两种喂数据的方式：文本表格或JSON

准备数据的形式，我试过两种，各有各的适用场景。

第一种是CSV/文本表格，适合一维或二维的简单数据，就像上面那种"年份加数值"的结构。直接把表格原样贴在Prompt里，AI理解起来几乎没有歧义，而且你人工核对的成本也低，扫一眼就能看出错漏。

第二种是JSON，适合有嵌套结构的数据。比如你要展示"各国奖牌榜，每个国家下面再有金银铜的项目分布"，这种层级用表格描述就会变得很长，而用JSON反而一目了然：

[ {"country": "中国", "gold": 201, "silver": 111, "bronze": 71}, {"country": "日本", "gold": 52, "silver": 67, "bronze": 69}, {"country": "韩国", "gold": 42, "silver": 59, "bronze": 89} ]

如果你是做企业数据看板，后续可能还要接接口，那我建议直接用JSON格式，因为AI生成代码的时候更容易把JSON映射到ECharts的series.data上，模板化程度更高，返工率更低。但如果你只是为自己做一张一次性的汇报图，文本表格就够了，别把自己绕进JSON的括号里。

用一句话总结这部分的经验：数据是你和AI协作的基础，基础脏了，后面全白搭。花3分钟清洗数据，比花30分钟和AI来回纠错要值太多。

3. 核心环节：完整Prompt怎么写才能一次出好东西

3.1 完整Prompt模板（可直接复制）

现在到了整篇文章最关键的部分。直接给出一套我调试过很多轮、实测成功率极高的Prompt模板。

我习惯把它拆成三段：身份与任务、数据、输出约束。

请你作为资深前端开发工程师，帮我生成一个数据可视化网页。 任务要求： 我提供了一份"历届亚运会中国代表团金牌数"的数据，请基于这些数据生成一张柱状图叠加折线图。 数据（不要修改数据，直接使用）： 年份,金牌数 1982,61 1986,94 1990,183 1994,125 1998,129 2002,150 2006,165 2010,199 2014,151 2018,132 2023,201 图表与页面要求： - 使用ECharts 5版本，通过CDN引入 - 柱状图展示每届金牌数，颜色使用蓝色渐变 - 折线图叠加在柱状图之上，展示金牌数变化趋势，颜色使用金色 - 柱子上方显示对应的数值标签 - 标题为"历届亚运会中国代表团金牌数"，副标题为"数据来源：历届亚运会官方奖牌榜公开数据" - 图表区域宽度900px，高度500px，居中显示，页面整体浅灰背景，卡片式白色圆角容器 - 鼠标悬浮时显示详情提示 输出约束： - 直接输出一个完整可运行的HTML文件，所有CSS和JavaScript内联 - 代码中不要使用省略号，不要省略任何代码 - 不要在代码开头或结尾添加任何解释性文字 - 如果数据点过多，X轴标签自动设置45度倾斜，避免重叠

就这么写。你把这段整体复制给AI，它基本能一次生成可运行的页面。我实测中，如果数据稍微复杂一点（比如多维指标），适当加一句"图例（legend）放在底部"，AI也能自动处理布局。这套模板的点就在于：你提前替AI把所有决策都做完了，它只需要按部就班翻译成代码。

3.2 为什么这些"关键配置项"一个都不能少

很多人用AI生成图表失败，不是AI不行，是Prompt里漏了几句话。我拆开说说。

角色设定为什么要写"资深前端工程师"？因为大模型在不同角色设定下，输出的代码质量会有明显差异。设定为资深工程师，它会倾向于输出更规范、更完整的工程化代码；不设定角色，它可能给你一段"教学示例"，简化到只剩核心配置，跑倒是能跑，但样式丑得没法看。

"不要修改数据"这句是血泪教训。有一次我把数据交给AI后，它擅自把1990年的183改成了182，理由是"可能笔误"。当时我没有核对，就这么交出去了，结果被指出来数据对不上。从那以后我必加这句"不要修改数据，直接使用"，AI就不会画蛇添足。

"直接输出完整可运行的HTML文件""不要使用省略号"这两句也是关键。AI输出长代码时非常喜欢用"..."把重复部分省略掉，一旦省略，你复制过去就是语法错误。加了"不要省略任何代码"之后，它再怎么长也会老老实实全量输出。而且"不要在代码开头或结尾添加任何解释性文字"这句能帮你省掉大量清理解释文字的时间，直接复制粘贴就能用。

指定ECharts版本也很重要。ECharts 4和5的配置差异不算小，比如5.x里部分API不再兼容旧写法。如果Prompt里明确"ECharts 5"，AI就会按5.x的标准来写，你后续查资料、搜报错也对得上号。这个细节能避免很多"为什么别人能跑我不能跑"的困惑。

4. 实操过程：从自然语言到可运行的ECharts页面

4.1 实际对话演示：5分钟是怎么花掉的

我按真实操作的时间线走一遍，你感受一下。

第0-1分钟：整理数据。就是把上表那11行数据从公开资料里核对好，复制到Prompt模板里。因为这个数据我提前清洗过，实际只花了几十秒。

第1-2分钟：把上面那段完整Prompt发给AI对话窗口。注意我有一个习惯：每次发都会重新粘贴完整Prompt和完整数据，而不是靠上一条消息的上下文让AI"记住"。这看起来有点笨，但有两个好处：一是降低AI在多轮对话中"遗忘约束"的概率，二是保存下来的聊天记录本身就是一份可复现的文档。

第3分钟：AI输出HTML代码。如果它输出正常，直接整块复制。

第4分钟：打开任意文本编辑器（我用的VS Code，实际上Windows自带的记事本也行），粘贴，另存为sql.html，文件编码记得选UTF-8，避免中文乱码。然后双击用浏览器打开。

第5分钟：如果页面正常渲染，那就完成了。如果出现空白，打开F12控制台看一眼报错。大部分情况是CDN没加载出来或者script标签放在了DOM节点之前，后面我会专门说排查。

4.2 AI产出的完整代码长什么样

这里给出AI当时生成的完整HTML文件（我加了几行注释方便你理解关键配置）。如果你想复现，直接用这个文件就能跑出效果：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>历届亚运会中国代表团金牌数</title> <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script> <style> body { margin: 0; padding: 40px; background: #f7f8fa; font-family: "Microsoft YaHei", sans-serif; } #chart { width: 900px; height: 500px; margin: 0 auto; background: #fff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); padding: 20px; box-sizing: border-box; } </style> </head> <body> <div id="chart"></div> <script> var chartDom = document.getElementById('chart'); var myChart = echarts.init(chartDom); var years = ['1982', '1986', '1990', '1994', '1998', '2002', '2006', '2010', '2014', '2018', '2023']; var medals = [61, 94, 183, 125, 129, 150, 165, 199, 151, 132, 201]; var option = { title: { text: '历届亚运会中国代表团金牌数', subtext: '数据来源：历届亚运会官方奖牌榜公开数据', left: 'center', textStyle: { fontSize: 22, color: '#333' }, subtextStyle: { fontSize: 12, color: '#999' } }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { bottom: 0, data: ['金牌数', '金牌趋势'] }, grid: { left: '8%', right: '5%', top: '18%', bottom: '12%' }, xAxis: { type: 'category', data: years, axisTick: { alignWithLabel: true }, axisLabel: { fontSize: 13 } }, yAxis: { type: 'value', name: '金牌数（枚）', min: 0, axisLabel: { fontSize: 12 } }, series: [ { name: '金牌数', type: 'bar', data: medals, barWidth: 40, itemStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: '#3a7bd5' }, { offset: 1, color: '#00b4d8' } ] }, borderRadius: [6, 6, 0, 0] }, label: { show: true, position: 'top', fontSize: 13, fontWeight: 'bold', color: '#333' } }, { name: '金牌趋势', type: 'line', data: medals, smooth: true, symbolSize: 8, lineStyle: { width: 3, color: '#f5b301' }, itemStyle: { color: '#f5b301' }, label: { show: false }, z: 2 } ] }; myChart.setOption(option); window.addEventListener('resize', function () { myChart.resize(); }); </script> </body> </html>

这段代码的运行效果：蓝色渐变柱状图清楚展示每一届的金牌绝对数量，金色折线叠加上去，让"趋势"变得一目了然。2010年广州亚运会和2023年杭州亚运会两个高点非常显眼，1994年仁川的数值回落也能直接看出来。鼠标悬浮时，ECharts的tooltip会同时显示柱子和折线的数值，对比很方便。

4.3 用自然语言做微调，比手改配置快得多

图表跑通之后，通常还要改几轮样式。以前改一个柱状图的圆角、渐变、间距，得去翻ECharts文档找属性名。现在你直接告诉AI就行。比如我嫌柱子的颜色有点普通，就对AI说："把柱状图改成从红色到橙色的渐变，并且柱子顶部圆角加大一点，突出2023年的数据，给2023年那根柱子单独设置一个高亮金色。"AI会直接把itemStyle和单独数据的itemStyle改好，你复制替换就行。

还有一次，我要把这张图嵌到汇报PPT里，就跟AI说"把背景改成深色，字色改成白色，适合大屏投影"。它很快调整了style和配色，深蓝背景、白字、金色折线，效果比我自己调20分钟还好。自然语言微调的核心价值在于：你不用理解CSS和ECharts配置的每个细节，只需要说清楚"我要什么感觉"，它负责翻译成配置。不过还是要复查一遍，特别是改完之后的代码能不能完整运行，别直接信"保证没问题"。

5. 常见问题与排查技巧实录

5.1 常见问题速查表：白屏、报错、NaN

AI生成页面出问题，翻来覆去就那几种，我整理成一个速查表，你照着查就行。

5.2 几个实践后才知道的独家避坑点

第一个是"新开对话，别用长上下文"。如果一次生成不满意，我建议开一个新对话，把Prompt完整重新发一遍，而不是在旧对话里说"刚才那个不对，改一下第3行"。因为新对话里的AI会严格执行你的完整约束，旧对话里它容易受前文错误代码的干扰，改着改着把其他配置也带偏了。实测下来，新开对话的成功率明显更高。

第二个是"验证数据准确性，别省这一步"。我在前面强调过，AI不会记数据，但你得防着它在讨论中"过度配合"。比如你说了句"杭州亚运会我们表现太好了"，AI可能就顺着话头把某个数据悄悄改大。任何从AI对话拿到的数值，都要以你贴进去的数据为准，不要以AI回复里复述的数值为准。

第三个是"本地保存一份echarts.min.js"。公共CDN偶尔会慢，或者在某些内网环境不可用。把echarts.min.js文件下载到项目目录，引入改成相对路径：

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

这样即使断网，你这个图表页面依然能打开。我因为吃过一次"演示现场CDN加载不出来"的亏，之后做重要演示前，所有依赖库都会提前下载到本地。顺便说一句，这种做法对任何前端项目都适用，不算额外负担。

6. 结语与我的真实体会

做完这个亚运会数据可视化的小项目，我最大的感受是：AI不会替你思考，但它能替你执行。

数据可视化这个领域，以前"思考"和"执行"绑得太紧。你想弄个渐变配色，就得去查colorStops；想加个平滑曲线，就得去查smooth属性。这些执行层面的琐碎细节，现在全都可以扔给AI，省下来的精力应该花在真正重要的地方——数据是否准确、图表形态是否匹配业务问题、结论是否站得住脚。就像你请了个熟练的装修工人，你只需要说清楚"想要什么风格"，他负责把墙刷好，但"为什么要刷这面墙"还是你自己要想清楚。

如果你也想动手试试，我个人建议别一上来就搞复杂数据。先拿这份亚运会金牌数据，把完整Prompt粘贴到AI对话里，让代码跑通，再试着改一次配色、改一次图表类型。这个"跑通-修改-再跑通"的过程，比你看十篇教程都有用。等这套流程顺了，你再把数据换成自己工作里的真实数据，比如月度销售、用户留存、项目排期，你会发现原来需要半天才能交付的图表，现在真的只要5分钟。

最后分享一个小技巧：把你自己调教好的Prompt模板存成一个备查文件，下次遇到类似需求，直接替换数据和标题就能复用。用得越多，你对"AI能做什么、不能做什么"的判断就越准，这才是这项技术真正值钱的地方。