企业官网建设流程全解析

5分钟借助AI用自然语言完成亚运会数据可视化（附完整Prompt）

先说结论：这活儿真的能五分钟干完。不是“学完课程再花五小时”的那种五分钟，而是你打开一个AI对话窗口，把需求用大白话打进去，它把数据整理、Python/JS代码、ECharts图表配置全部生成好，你复制粘贴到本地，浏览器一开，图就出来了。核心关键词是AI、自然语言、数据可视化和Prompt——四样东西串起来，正好对应过去数据分析师半天到一天的工作量。这篇文章就把整个流程拆给你看，包括我踩过的坑和一份可以直接抄走的完整Prompt模板。适合谁看？不会写代码但想快速出图做汇报的业务同学，会写代码但不想在图表调样式上浪费时间的开发者，以及想给项目里加个可视化demo的在校学生。

1. 项目核心思路拆解：为什么自然语言能驱动数据可视化

1.1 传统做图流程和AI做图流程的本质区别

做数据可视化，传统路径是固定的：先拿数据，再选工具，再写代码，最后调样式。哪怕用Python的Matplotlib、Pyecharts，或者前端的ECharts，任何一个环节卡住，都得跑去翻文档。比如你想画一个亚运会金牌榜的柱状图，你至少得知道数据长什么样、用什么库、怎么写循环、怎么配置坐标轴、怎么加数值标签。这套流程下来，熟练工大概两小时，新手可能要折腾一整天。

AI介入之后，整个链路变成了“意图直达结果”。你只需要描述清楚“我要看什么”，模型负责翻译成代码、选择图表类型、填充数据、分发配置项。它就像一个既懂业务、又懂前端、还懂数据分析的实习生，你说一句“把金牌榜前五名的金银铜做成堆叠柱状图”，它直接给你一段能跑的HTML文件，里面ECharts的option配置全写好了。你不需要知道ECharts里series数组怎么定义、tooltip怎么格式化，因为模型已经替你完成了这些翻译工作。

这里面最关键的点是：自然语言变成了编程语言的上层入口。过去学编程是为了学会“怎么表达”，现在有了大模型，你要学的是“怎么把需求说清楚”。Prompt不是咒语，它是一种结构化的需求描述方式。你把背景、角色、数据、输出格式、约束条件一次性交代清楚，模型的产出质量会直线上升。这也就是为什么同一款AI工具，有的人用起来像神，有的人用起来像人工智障——差别不在模型，在提需求的方式。

1.2 为什么拿“亚运会”当案例最合适

选亚运会数据做演示，不是因为它有什么特别之处，而是因为它具备几个“教学友好”的特征：第一，公开、结构规整、有明确榜单维度，不需要处理脏数据；第二，体育赛事的观众认知门槛低，奖牌榜、金牌数、比赛项目，任何背景的人一看就懂；第三，它天然自带多维度的可视化想象空间——国家/地区的奖牌对比可以做柱状图或地图，各项目金牌分布可以做饼图和环形图，中国代表团每日夺金走势可以做折线图，甚至可以把游泳、田径、射击这些项目单独拆出来做雷达图。

换句话说，它的数据形态覆盖了图表选型中最常用的一批类型。你把这个例子跑通，等于把柱状图、饼图、折线图、地图的生成流程都练了一遍，之后换成电商销售数据、网站流量数据、校园大数据，逻辑完全一样。我文章里给的示例数据是演示用的整理版本，真要做正式汇报建议去对应官方渠道核对——不过这不影响整个流程的复现。

1.3 “5分钟”的时间预算到底怎么拆

很多读者看到“5分钟”第一反应是标题党，但其实算得过来。我用秒表实测过完整流程：

• 第0到1分钟：找一段合适的结构化数据（甚至是直接让AI“帮我整理一份亚运会金牌榜前10名的奖牌数据，输出JSON格式”）
• 第1到3分钟：输入Prompt，把需求描述完整，等模型输出代码
• 第3到4分钟：新建一个HTML文件，把代码粘贴进去保存，双击打开
• 第4到5分钟：看一眼是否报错，顺手改一处数据或者颜色参数

前提是你不需要额外安装环境。ECharts走CDN引入，一张HTML网页就是全部交付物，浏览器是你的唯一运行环境。这个方案的最大价值在于：它把“可视化开发”的门槛从“懂前端+懂数据处理+懂部署”降到了“会打字+会打开浏览器”。

2. 工具选型与Prompt设计：5分钟快速实现的核心准备

2.1 主流AI对话模型怎么挑

市面上能生成ECharts代码的模型不少，通义千问、DeepSeek、Kimi、ChatGPT这些都用过，实话实说，在中文需求理解上各家都够用，但输出质量有差异，主要集中在三处：一是对中文语义里的“堆叠”“横向”“深色背景”这类词汇的理解准确度；二是ECharts API的熟悉程度，有些模型会把series的类型写成histogram这种根本不存在的值；三是输出稳定性，有的模型生成到一半会被截断。

我目前用得比较顺的是通义千问和DeepSeek，前者中文理解细腻，后者代码生成的完整度较高。如果你追求完全离线、数据敏感的场景，也可以用Ollama在本地跑一个模型——本地7B级别的小模型在复杂图表生成上能力有限，但做个柱状图、饼图完全没问题。对于追求“5分钟出图”的绝大多数场景，直接在网页端对话就够，不需要在本地部署上纠结。

2.2 一份能跑通全流程的完整Prompt

直接给模板，你拿去复制就能用。我用这种结构写Prompt的成功率接近百分百，关键是把“角色”“任务”“数据格式”“输出约束”拆开交代。

我实际使用过的完整Prompt如下（数据部分是示意，想换成别的直接替换）：

你是一名资深前端数据分析师，精通ECharts数据可视化。请根据我提供的数据，生成一份完整的可运行HTML网页代码。 数据（JSON格式）： [ {"代表团": "中国", "金牌": 201, "银牌": 111, "铜牌": 71}, {"代表团": "日本", "金牌": 52, "银牌": 67, "铜牌": 69}, {"代表团": "韩国", "金牌": 42, "银牌": 59, "铜牌": 90}, {"代表团": "印度", "金牌": 28, "银牌": 38, "铜牌": 41}, {"代表团": "乌兹别克斯坦", "金牌": 21, "银牌": 18, "铜牌": 31}, {"代表团": "伊朗", "金牌": 13, "银牌": 21, "铜牌": 20}, {"代表团": "泰国", "金牌": 12, "银牌": 14, "铜牌": 32}, {"代表团": "巴林", "金牌": 10, "银牌": 5, "铜牌": 9} ] 输出要求： 1. 生成一个完整HTML文件，使用ECharts的CDN地址（https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js），不依赖其他库。 2. 使用堆叠柱状图展示各代表团的金牌、银牌、铜牌数量，横向展示，按金牌数降序排列。 3. 图表标题为“亚运会奖牌榜TOP8”，副标题写“数据为演示用途非最终官方数据”。 4. 图表区域高度不低于500px，宽度自适应。 5. 图例和数值标签必须保留，tooltip显示完整信息。 6. 直接输出完整代码，不要省略任何部分，不要写解释文字，不要用markdown代码块包裹，直接输出可作为HTML文件的代码。

这个Prompt为什么有效？因为它把模糊的“帮我做个图”拆成了六个明确要求。尤其是第6条，直接决定你能否“复制即用”——很多模型默认会把代码用markdown代码块包起来，你要复制还得先去掉三对反引号，运气不好还给你中间省略一段“此处省略xx行”。这条约束加上之后，输出质量立刻稳定很多。

2.3 Prompt工程里的三个关键设置

第一是角色设定。告诉模型“你是资深前端数据分析师”，不是玄学，而是让模型自动激活记忆中与该角色相关的知识分布。模型检索知识时会偏向前端、ECharts、可视化最佳实践这些领域，输出风格也会更贴近代码交付，而不是论文式回答。

第二是数据内嵌。直接把JSON结构贴在Prompt里，模型就不需要“猜测”你的数据长什么样。很多人让AI做图表，只贴一句“根据亚运会数据画个图”，模型不知道数据细节，只能编一个结构，最后还得你手动改。把数据作为输入的一部分，相当于把AI从“猜你心思”变成“执行任务”。

第三是输出格式强约束。HTML要完整、CDN地址要指定、不能省略、不要代码块包裹——这些约束要落到字面上。大模型的默认行为是“尽量帮到你”，但它的“尽量”未必是你想要的“尽量”。比如你不指定CDN地址，它可能用npm包的方式，或者干脆引入一个旧版本地址，运行起来全是兼容性问题。这些都要在Prompt阶段堵死。

3. 实操过程与核心环节实现：从自然语言到可运行图表的完整链路

3.1 数据准备：如何快速获得结构化数据

这个项目里最不需要费时间的环节就是数据。你可以自己去整理一份，也可以直接让AI帮你“整理成JSON”。我用后者比较多，写法是：“请把亚运会奖牌榜前8名的数据整理成JSON数组，字段为代表团、金牌、银牌、铜牌，只输出JSON不要其他内容。”这样一步就把数据切好，省去手动对表格的麻烦。

不过有一点要提醒：如果你让AI直接生成数据，它可能有记忆偏差，所以拿到数据之后眼睛扫一眼，国家名和奖牌数有没有明显不对。这种“人工复核”不是不信任AI，而是数据分析的基本素养——数据错了，图再好看也是错的。我在做的演示数据标注了“非官方”，就是提醒读者注意这个边界。

数据准备好之后，顺便检查一下JSON有没有语法问题。AI偶尔会漏掉逗号或者大括号不匹配，这会导致生成的JS代码里data字段解析失败。最简单的验证方法是丢到任意JSON在线格式化工具里看一眼，结构是否正常。这一步30秒就够，等于给后面的渲染过程上个保险。

3.2 核心实现：AI生成的HTML页面结构解析

把Prompt发给模型之后，返回的代码一般是一个完整的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> #chart { width: 100%; height: 520px; } </style> </head> <body> <div id="chart"></div> <script> var chartDom = document.getElementById('chart'); var myChart = echarts.init(chartDom); var option = { title: { text: '亚运会奖牌榜TOP8', subtext: '数据为演示用途非最终官方数据' }, tooltip: { trigger: 'axis' }, legend: { data: ['金牌', '银牌', '铜牌'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', data: ['中国', '日本', '韩国', '印度', '乌兹别克斯坦', '伊朗', '泰国', '巴林'] }, yAxis: { type: 'value' }, series: [ { name: '金牌', type: 'bar', stack: 'total', data: [201, 52, 42, 28, 21, 13, 12, 10] }, { name: '银牌', type: 'bar', stack: 'total', data: [111, 67, 59, 38, 18, 21, 14, 5] }, { name: '铜牌', type: 'bar', stack: 'total', data: [71, 69, 90, 41, 31, 20, 32, 9] } ] }; myChart.setOption(option); window.addEventListener('resize', function () { myChart.resize(); }); </script> </body> </html>

这段代码的关键在于option对象。xAxis是横轴类别，yAxis是数值轴，series定义了三个堆叠序列，stack字段相同表示堆叠，type是bar表示柱状图。你如果想要横向效果，把xAxis和yAxis的type对调——xAxis改成value，yAxis改成category，图表就横过来了。这种等价关系的理解，是你手动微调AI代码的基础能力。

3.3 本地运行与调试：双击打开的那一下

将代码保存为index.html，双击后浏览器默认打开。大多数模型生成的代码都能直接运行，但有几个高频坑要提前知道：

第一个坑是文件编码。如果HTML里中文显示成乱码，检查是不是缺少<meta charset="UTF-8">，或者文件被存成了GBK。我习惯让AI在head里带上一行meta标签，能省掉很多麻烦。

第二个坑是高度塌陷。ECharts初始化的时候，如果容器div没有固定高度，图表可能只有几十像素，甚至看不到。Prompt里明确写了“高度不低于500px”，就是为了规避这个问题。如果生成的代码用了百分比高度，父级又没有高度，图表也会挂掉，最稳的做法是像上面的代码一样给#chart写死一个520px。

第三个坑是CDN加载失败，表现为页面空白、控制台报“ECharts is not defined”。这种情况多半是网络问题，换一个CDN地址就行，比如jsdelivr换成unpkg，或者把ECharts文件下载到本地用相对路径引用。我一般建议本地项目直接下载echarts.min.js放同目录，彻底断掉网络依赖。

整个过程不用编译、不用装包、不用起服务，保存即刷新，这个反馈速度很适合做日常探索。如果你追求更专业的效果，可以起一个本地静态服务用HTTP访问，但纯看图表，file协议完全够用。

4. 常见问题与排查技巧实录：生成失败与渲染报错的实战处理

4.1 AI生成代码时的典型翻车场景

用AI写代码不等于零错误，我这几个月试下来的翻车概率大约在15%左右，集中在以下几个场景。

第一是模型把数据截断了。当你贴的数据条目多、或者Prompt太长，AI生成到一半就停了，series里的数据缺了后几位。表面上看代码很完整，运行起来图表少了几根柱子。处理办法是让模型“继续输出”，或者把数据分组传给模型，每次只生成一个图表的series。

第二是把ECharts的API写错。我见过模型把type: 'bar'写成type: 'barchart'，把dataZoom拼成dataZoom大小写错误，甚至把xAxis写成XAxis。JS是大小写敏感的，这种错误直接导致图表白屏。你不需要记住所有API，但你要知道控制台报错是排查入口，F12打开浏览器开发者工具，看Console里红色报错信息是什么。

第三是模型自作主张改了你的设计意图。你说要堆叠柱状图，它给你输出分组柱状图；你说要横向，它给你纵向。这类情况本质上是自然语言理解偏差，解决方式是反过来引导——在Prompt里补充一句“编号为1的图表type设置为bar，同一stack的series堆叠显示，横向布局通过category轴和value轴切换实现”，用代码级描述去锁死设计意图。

第四是遇到“invalid prompt”这类返回。有些AI平台对输入内容有审核机制，偶尔会误伤正常的数据可视化请求。我的做法是把描述里的可能触发词换掉，比如“金牌榜前8名”改成“部分代表团排名示例数据”，或者干脆去掉具体国家名，用“代表团A、代表团B”代替。这不是回避什么，只是提醒你这类平台的输入是有边界的，合理调整措辞是正常操作。

4.2 图表渲染不出来：一张排查清单

我整理了一份自己用的排查清单，按顺序走下来，绝大多数白屏问题都能解决：

• 打开浏览器控制台（F12），看Console有没有红色报错。没有红色报错就说明JS执行层面没问题，问题多半在option配置逻辑。
• 如果报了Cannot read properties of null，说明document.getElementById('chart')找不到DOM节点。检查div的id和JS里用的id是否一致，比如HTML里是<div id="chart">，JS里写成了chart1，必然报这个错。
• 如果报ECharts is not defined，说明脚本没加载成功。Network标签页里看echarts.min.js的请求状态，200就正常，404或failed就换CDN。
• 如果页面有图形但数据没显示，检查series里的data数组长度和xAxis的data数组长度是否一致。少一个数，图标缺一个分类。
• 如果提示“初始化失败”且页面中存在多个图表，可能是你在同页面初始化了多次同一个id。一个id只能init一次，要么改id，要么用echarts.init之前先dispose旧的实例。

这套清单基本上是我过去调试前端图表项目的缩影。值得一提的是，现在很多AI对话工具本身就具备“根据报错信息修复代码”的能力——你把控制台的红色报错直接复制给AI，让它分析可能的原因并给出修正后的完整代码，比自己对着文档猜要快得多。这种“AI生成代码→浏览器报错→把报错喂回AI→再运行”的循环，就是当前时代的前端调试方式。

4.3 让图表从“能看”到“好看的”细节参数

代码跑通只是第一步，图表好不好看，取决于几个细节参数的打磨。这里说几个我常用的习惯，实测对视觉提升非常明显。

配色。ECharts默认的蓝红绿配色能用，但在演示场合显得略“工具人”。我一般会让AI加一句“使用金色、银色、铜色作为金牌银牌铜牌的系列颜色，金色用#F7B500，银色用#A6A6A6，铜色用#B87333”，这样一眼就能区分奖牌层级，语义感更强。颜色可以自己在在线取色器上挑，然后塞进Prompt里。

数值标签。堆叠柱状图如果只显示总数值，看不清金银铜各自的数。可以在series每项里加label: { show: true, position: 'inside' }，让每个分段都显示自己的数值。调的时候注意，堆叠图内标签会互相遮挡，分段多的时候改用position: 'inside'配合fontSize: 10。

tooltip格式化。默认的tooltip是一列套路文案，不够直观。可以让AI把tooltip写成：

tooltip: { trigger: 'axis', formatter: function(params) { var str = params[0].name + '<br/>'; params.forEach(function(item) { str += item.marker + item.seriesName + ': ' + item.value + '<br/>'; }); return str; } }

这样悬停时能清晰看到每个奖项的数量，而不是滚动一长串。学会这两行formatter，你的图表质感会超出大多数演示页面。

间距和边距。图表默认的grid有时贴着边缘，文字会被截断。在option里加grid: { left: '3%', right: '5%', bottom: '5%', containLabel: true }，给标签留出呼吸空间。containLabel: true的意思是坐标轴标签计入grid内，不会溢出去，这个参数很多人忽略，但作用特别大。

5. 进阶玩法与扩展思路：从单图到仪表盘和动态数据

5.1 把单张图表扩展成多图表仪表盘

单张图跑通之后，下一步自然是把它扩展成仪表盘。多图表并排这个需求，用AI也能一次搞定。你可以在同一个Prompt里写：“生成一个页面，包含四个图表：奖牌榜横向堆叠柱状图、各项目金牌占比环形图、每日夺金数量折线图、代表团奖牌分布地图。布局采用2×2栅格，每个图表独立容器，id分别为chart1到chart4。”模型会直接生成四个div和对应的四个init逻辑。

这比你自己一个个写要快得多，但有个新问题：多个图表同时初始化时，要确保DOM渲染完之后再init。脚本位置放在body末尾，或者用window.onload包一下。不然可能初始化时容器还不存在，全部报错。

5.2 从固定数据到动态数据源

静态JSON数据适合演示，真正做项目时数据往往是接口返回的。你可以让AI一并生成一个Python的Flask后端，提供一个/api/medals接口，前端页面用fetch去拉数据再绘制图表。这个热词里提到的农产品价格可视化头歌项目、网约车大数据可视化项目，本质上就是这么做的：Flask提供数据接口，前端ECharts做渲染。

你不需要先学Flask再写代码，直接把需求丢给AI：“请给我一个Flask后端，提供一个返回奖牌榜JSON的接口，再给我一个前端页面，通过fetch请求这个接口并用ECharts渲染。”AI会把两端的代码都写出来，你要做的就是跑通flask run和访问本地页面。这套前后端分离的结构学一遍，基本就理解数据可视化项目的完整链路了。

5.3 在Prompt里把“大屏”风格一次性说清楚

企业里做数据大屏有一套约定俗成的风格：深色背景、发光边框、大字标题、紧凑布局。这个需求也可以在Prompt阶段直接限定。比如加上“使用深蓝色背景，图表配色使用科技蓝和霓虹紫渐变，标题使用大号白色字体，页面整体是大屏展示风格”。模型会基于这些描述调整CSS和配色参数，出来的效果比默认白底高出一个档次。

不过我实际操作中发现，大屏风格对模型的审美能力要求较高，有些模型生成的效果会有廉价感。折中方案是先让AI生成标准白底版本，确认数据逻辑没问题之后，再追加一个“修改样式”的对话，让AI只改颜色和背景，不动图表结构。两步走的成功率更高，也方便对比调试。

最后再分享一个经验作为这篇内容的落脚点。我刚开始用这种工作流时，也犯过一个低级错误：Prompt写得特别繁琐，把所有要求堆在一起，结果AI输出丢三落四。后来我养成了一个习惯——每次只增加一个变量，先让它跑出一个基础图表，然后再增量式地追加需求，比如“把背景改成深色”“把标签改成金色”“加一个数据缩放”。

这种增量式的对话方式比一次写一个巨型Prompt要稳定得多，也更适合排查问题。如果你拿到一份复杂的可视化需求，不要急着一次性写完整Prompt，先从一张最简单的图表开始，逐步加维度、加样式、加交互，每一步都验证一遍。这个习惯让我踩坑的概率降了一半，手里有一份稳定跑通的方案之后，再去做复杂的大屏项目，心里就有底了。