1. 先把“自然语言做可视化”这件事说清楚
你随便找个做数据可视化的人问一句：接到一个“把亚运会奖牌数据做成图表”的需求，第一反应是什么？十有八九是打开编辑器、翻ECharts文档、开始写option配置。写配置本身不难，难的是你脑子里清楚要什么图，手却记不住series里该填type: 'bar'还是type: 'line'，xAxis.data和dataset.source哪个才是数据入口，tooltip.formatter的模板字符串要不要转义。这些琐碎细节，恰恰是拖慢效率的最大原因。
我最近用自然语言配合AI做了不少亚运会相关的数据可视化，从“把奖牌榜做成柱状图”到“按比赛日画趋势折线图”，再到“把各代表团的奖牌结构做成玫瑰图”，基本能做到5分钟内出第一版可用的图表。这篇文章就是把完整的操作链路和Prompt模板摊开来讲，适合数据分析师、前端开发者、产品经理，以及任何需要“快速把一堆数字变成图”的人。核心就一句话：把需求用自然语言讲清楚，让AI生成ECharts代码，你只需要负责校验数据和调样式。
有人可能会问，ECharts官方文档难道不香吗？香，但文档是给“已经知道要查什么”的人用的。自然语言工作流的优势在于，你不需要知道具体某个配置项叫什么，只需要描述“柱状图、横轴是国家/地区、纵轴是金牌数、颜色偏蓝、鼠标放上去显示具体数值”，AI就能把对应的配置代码给你拼好。这个体验差别，就像查字典和问旁边的老同事的区别，后者往往还能顺手帮你把坑填了。
1.1 传统可视化开发到底慢在哪
传统流程大概是这样的：拿到需求后，先找数据源，再把数据清洗成结构化的JSON或表格格式，然后打开ECharts官网翻示例，找一个接近的图表模板，复制下来改数据、改颜色、改标题。听起来不复杂，但每一步都可能卡住。
举例来说，你想做一个亚运会金牌榜TOP10柱状图。先要找到一份完整的奖牌数据，可能是网页表格，可能是Excel，你得把它复制出来，清洗掉多余字段，转成数组。然后你翻到ECharts的“柱状图”示例，发现默认示例是GDP数据，你要把data替换成自己的奖牌数，把xAxis改成国家/地区名称，再把tooltip改成显示“金牌数”。这些操作本身不难，但每个字段、每个逗号都要小心，一旦数据里有个空值，图表就可能渲染成一片空白或者显示undefined。
更麻烦的是多图表场景。如果你想做一个完整的亚运会数据看板，包含金牌榜、奖牌结构、每日趋势、项目分布，那就不是复制一个示例那么简单了。每个图表都有不同的数据形态，有的一维数组、有的二维数组、有的是对象嵌套，你得手动维护四五份配置，还要保证它们之间样式统一。这套流程走下来，即使熟练的开发者，通常也要小半天。
1.2 AI能够覆盖哪些环节，哪些环节还得靠人
用AI辅助之后，流程发生了明显变化。原来“查文档、拼配置、调试报错”的时间，被压缩成“写Prompt、检查输出、局部修正”的时间。AI擅长的是把自然语言需求映射到结构化的ECharts配置里，尤其是那些“我知道大概长什么样，但记不住配置项”的图表，它几乎能一次生成对。
但要说清楚边界：AI并不能凭空拿到真实数据。它不像搜索引擎，不会自动知道杭州亚运会的最终奖牌榜。你必须把数据喂给它，或者让它生成一段SQL去数据库里查，然后你自己确认查询结果。此外，AI生成的代码偶尔会有字段名不匹配、坐标轴类型错误、数据格式不对这类问题，这些需要人工检查。简单说，AI负责“写代码”，你负责“给数据和把关”。
2. 实操复现：从一句人话到一张可用的ECharts图表
我先带你完整走一遍流程。这次用第19届杭州亚运会的奖牌数据做示例，目标是一张“金牌榜TOP10柱状图”。我选这个场景是因为它足够典型：二维数据（国家/地区 + 金牌数）、单一对比关系、输出标准形状的柱状图，非常适合验证“AI能不能听懂人话”。
2.1 准备数据：先把亚运会奖牌数据整理成AI认得的样子
虽然标题说“自然语言完成可视化”，但数据准备这一步没办法完全省略。不过好消息是，你不需要写代码去处理数据，只需要把数据整理成AI能读懂的格式。
我通常用JSON格式，因为ECharts原生支持JSON。比如下面这样：
[ {"country": "中国", "gold": 201, "silver": 111, "bronze": 71}, {"country": "日本", "gold": 52, "silver": 67, "bronze": 69}, {"country": "韩国", "gold": 42, "silver": 59, "gold_bronze": 89}, {"country": "印度", "gold": 28, "silver": 38, "bronze": 41}, {"country": "伊朗", "gold": 13, "silver": 21, "bronze": 20}, {"country": "泰国", "gold": 12, "silver": 14, "bronze": 32} ]注意，这个示例里我故意把韩国的字段名写成gold_bronze，后面用来演示AI如何发现并修正字段名不一致的问题。你实际使用的时候把字段名写规范即可。
如果你手上的数据在Excel里，也没关系，可以直接让AI帮你转换格式。Prompt写：“我有一份表格数据，第一行是 国家/地区,金牌,银牌,铜牌，后面是数据行，请帮我转换成JSON数组，字段名用country、gold、silver、bronze。”AI会返回结构化的JSON，你直接复制粘贴就能喂给下一个Prompt。这个“数据前置处理”的思路，可以大大降低你手工整理数据的成本。
2.2 写Prompt的关键动作：把需求翻译成AI能理解的约束
数据备好之后，真正的核心动作是写Prompt。自然语言写Prompt容易，但写清楚不容易。我的经验是，描述需求时，把“结果”和“限制条件”分开讲。先说清楚要什么结果，再说清楚有哪些限制。
以柱状图为例，这样写：
请使用 ECharts 生成一个柱状图，渲染在 HTML 页面中。 数据如下（JSON格式）： [粘贴上面的JSON] 要求： 1. X轴为国家/地区名称，展示金牌数； 2. 标题为“第19届杭州亚运会金牌榜TOP6”； 3. 柱子颜色使用深蓝色，从浅到深渐变； 4. tooltip显示：国家/地区名 + 金牌数； 5. 图表宽度自适应页面，字体默认； 6. 直接输出完整HTML代码，不要解释。这里有个细节值得展开说：“X轴为国家/地区名称，展示金牌数”这句话，比“用柱状图展示数据”要好得多。因为AI接收到“展示数据”这种宽泛表述时，可能默认把所有字段都展示出来，到时候图表上除了金牌数还有银牌数和铜牌数，反而要返工。越明确越好，别怕啰嗦。
另一个有用的写法是“负向约束”，也就是告诉AI“不要做什么”。比如：“不要引入ECharts以外的库，不要使用CDN之外的资源，不要生成交互式地图，不要加我不需要的图例。”负向约束能有效防止AI自作主张，生成一些花哨但你可能不需要的元素。
2.3 拿到代码后的四个检查点
AI生成代码后，我建议不要直接贴到项目里，先花一分钟检查四个地方。
第一，数据字段名是否和数据源一致。这一步最常见的问题是AI以为字段叫name，你的数据里却叫country。看代码里xAxis.data或dataset.source的取值，如果发现字段对不上，要么改代码，要么改JSON，二选一，别迁就。
第二，坐标轴类型是否正确。柱状图的类目轴应该是type: 'category'，数值轴是type: 'value'。AI偶尔会把金牌数这个数值字段放进类目轴，图表出来后会变成每个金牌数都是一个柱，完全没有对比意义，一秒钟就能看出来不对劲。
第三，标题和tooltip是否按你说的来。很多用户拿到代码后，发现标题变了，tooltip的提示文字不完整。这不是AI笨，而是你的Prompt里“标题写什么”没讲清楚。所以上面Prompt里我明确写了标题的具体文案。
第四，在浏览器里实际跑一遍。把HTML代码保存成文件，双击打开验证效果。别嫌这步骤土，“看着代码就觉得没问题”是新手最容易踩的坑。
我实际跑这个Prompt时，AI生成的代码基本可用，唯一的问题是把银牌、铜牌也一起展示在了柱状图上。原因是我的数据里包含三个数值字段，而我只说了“展示金牌数”，没有明确说“忽略银牌和铜牌”。加上“只展示金牌数，忽略银牌和铜牌”之后，代码一下就对了。这个案例说明，写Prompt的时候要做“最小约束”，把你要展示的字段逐个列清楚。
3. 可以直接抄作业的亚运会可视化Prompt全集
前面那套流程是基础模板，但实际需求一般不止柱状图。这一节我按不同图表类型，给出几个可以直接复制使用的Prompt，每个都附上了关键说明。你稍微改一改数据就能套用到自己的场景里。
3.1 金牌榜TOP10柱状图Prompt
这个最经典，适合展示排行对比。
请使用 ECharts 生成一个横向柱状图（bar），渲染在 HTML 页面中。 数据如下： [你的JSON数据] 要求： 1. Y轴是国家/地区名称（注意是Y轴），X轴是金牌数量； 2. 按金牌数从高到低排序展示前10名； 3. 标题为“杭州亚运会金牌榜TOP10”； 4. 柱子颜色使用渐变色，从橙色到红色； 5. 横轴的刻度线显示具体数字； 6. tooltip显示：“国家/地区名：X枚金牌”； 7. 只展示金牌数，不要展示银牌和铜牌； 8. 直接输出完整HTML代码。这里我特意写了“方向反着来”，用横向柱状图。横向柱状图的好处是国家/地区名称不会被挤压成斜着的文字，尤其当名称较长时，阅读体验好很多。你要是想要常规纵向柱状图，把第1条改成“X轴是国家/地区名称，Y轴是金牌数量”即可。
3.2 奖牌结构玫瑰图/饼图Prompt
当你想展示“总奖牌数中各国家/地区的金牌占比”时，饼图或玫瑰图比柱状图更直观。注意：饼图一般不直接放原始数据框，而是用AI转换好的键值对。
请使用 ECharts 生成一个玫瑰图（roseType为'radius'），渲染在 HTML 页面中。 根据以下数据，计算“金牌总数占比”并绘制： [国家/地区, 金牌数] 中国,201 日本,52 韩国,42 印度,28 伊朗,13 泰国,12 要求： 1. 饼图的每个扇形代表一个国家/地区； 2. 扇区大小按照金牌数量占比自动计算； 3. 标题为“亚运会金牌数占比分布”； 4. 每个扇区旁边显示国家/地区名称和百分比，保留一位小数； 5. 颜色使用由暖到冷的渐变色系； 6. 图例显示在底部，横向排列； 7. 直接输出完整HTML代码。这个Prompt里我用了简单的键值对文本，而不是JSON数组。原因是饼图的数据结构本来就是[{name: '中国', value: 201}]，你给AI一个两列的表格文本，它自己就能转换成需要的结构。当然你给JSON也行。
3.3 单日奖牌趋势折线图Prompt
如果是展示“比赛日每天新增的金牌数变化趋势”，折线图更合适。这个场景一般会带日期字段。
请使用 ECharts 生成一个折线图（line），渲染在 HTML 页面中。 数据如下（日期, 当日新增金牌数）： 2023-09-24, 20 2023-09-25, 16 2023-09-26, 14 2023-09-27, 22 2023-09-28, 9 2023-09-29, 12 2023-09-30, 18 2023-10-01, 8 要求： 1. X轴为日期，Y轴为当日新增金牌数； 2. 线条颜色为蓝色，粗细适中； 3. 使用平滑曲线（smooth: true）； 4. 面积填充，填充色用浅蓝色半透明； 5. 标题为“亚运会每日新增金牌数趋势”； 6. tooltip显示“日期：X，新增金牌：Y枚”； 7. Y轴从0开始； 8. 直接输出完整HTML代码。这里有个比较隐蔽的坑：日期作为X轴时，如果你不指定type: 'time'，ECharts会把它当做类目轴，横轴上每个日期都只是一个个格子，不会自动按时间间隔排列。AI生成的代码默认可能是type: 'category'，这样也能显示，但如果你有缺了某一天的数据，图表上就不会出现这一天的空档，视觉上不够准确。遇到这种情况，Prompt里加一句“X轴类型使用time，时间格式为YYYY-MM-DD”，问题就解决了。
3.4 让AI写SQL查奖牌数据的Prompt
有时候你的数据不是提前准备好的JSON，而是躺在数据库里。这种情况下，可以让AI直接生成SQL查询，而不是先导出数据再写图表。
我有一张数据库表，结构如下： CREATE TABLE medal ( id INT PRIMARY KEY, country VARCHAR(50), sport VARCHAR(50), medal_type VARCHAR(10), date DATE ); 其中 medal_type 的值为 'Gold'、'Silver'、'Bronze'。 请根据以下需求生成SQL查询： 1. 查出每个国家/地区的金牌数量，按金牌数降序排列，取前10名； 2. 如果我需要按日期查看某一天的新增金牌数，怎么写？ 3. 如果我要统计每个比赛项目的奖牌总数，怎么写？ 要求： - 每个查询都要有注释； - 使用标准SQL语法； - 如果表结构与上述不一致，请告诉我需要修改哪些字段。让AI写SQL和让AI写图表代码，核心流程是一样的：给出结构、给出需求、给出输出约束。真正的数据校验、执行SQL还是要你自己来。这也是我一直强调的：AI生成SQL只是帮你省掉“回忆语法”的时间，不能替代你去确认查询结果是否符合预期。
4. AI生成ECharts代码的高频翻车现场与修复链路
用AI做可视化，快是快，但翻车也是常态。关键是翻车之后能不能快速修复。这节我把我自己遇到过的三类高频问题拆开讲，附上完整的排查思路。
4.1 最常见的三个翻车原因
第一个原因是字段名不一致。比如数据里是country，AI生成代码里却引用了name。这种现象在AI“自作主张重命名字段”时特别常见，尤其当你给的JSON字段名不够常见时。遇到这个问题，不要只改一两个字段名，建议把所有字段的引用位置都搜一遍，确认没有遗漏。
第二个原因是坐标轴类型错乱。类目轴（category）和数值轴（value）被搞混。典型表现是柱状图把数值当成了X轴标签，图表上没几个柱子，而是密密麻麻的刻度。这是因为AI没有区分“作为分类的东西”和“作为数值的东西”。修复方法是明确写上xAxis.type: 'category'和yAxis.type: 'value'，并把对应的字段名告诉AI。
第三个原因是数据的key排列顺序和AI处理顺序不一致。比如你的数据是 {country, gold, silver, bronze}，AI可能在生成dataset时把order换成了 {country, bronze, silver, gold}，导致柱子的展示顺序不对。这种问题很隐蔽，因为代码能跑、图表能出，只有仔细对照原始数据才能发现。我建议生成代码后，用一个“不按原始顺序”的数据样例做个测试，看图表是否会错乱。
4.2 “报错信息+当前代码+修复指令”三段式调试法
AI生成的代码第一次就能完美运行是理想情况。更多时候，你需要粘贴到HTML里试跑，然后发现控制台报错。常见的报错包括series not found、data is not defined、Cannot read properties of undefined。这时候我的做法是，不要自己去疯狂翻文档，而是把报错原样复制给AI，用三段式消息：
报错信息： [粘贴控制台完整报错] 当前代码： [粘贴AI生成的完整HTML代码] 请修复这段代码，只输出修复后的完整HTML，不要解释。这个三段式非常有效，因为AI可以从报错信息中定位问题，再从代码里看到上下文。用了这个模式后，大部分配置类问题都能在两次对话内解决。需要提醒一点：如果报错信息很长，不要截断，尽量全部粘贴，AI对错误定位的能力和信息的完整性成正比。
还有一种情况，代码没有报错，但图表空白。这种“无报错问题”反而更难排查，因为AI拿不到错误提示。这时候我会在JSON数据上做手脚，比如把某个值改成0，看看图表有没有变化。如果改成0之后柱子消失，说明数据映射是通的，只是某些值过大或过小导致视觉上不明显。如果完全没变化，那基本可以断定数据没有进到series里，需要检查是否漏了dataset或series.data的赋值。
4.3 防止AI“编造”数据的硬性约束
这是我认为最重要、也最容易被忽略的一个点。AI在信息不足时会“脑补”。比如你给它一份只有5个国家的数据，它可能在柱状图里额外加上第6个、第7个国家，因为它觉得“排行榜TOP10”就应该有10条柱子。问题在于，这些额外的国家数据完全是它编的，这在大屏展示或对外汇报的时候是绝对不能接受的。
防止“编造数据”最有效的方法，是在Prompt里做硬性约束，比如：
你必须严格使用我提供的数据，禁止添加任何我没有提供的数据条目。 如果我的数据不足10条，就展示实际条数，不要自动补全。这句话最好放在Prompt的末尾，并且用肯定+否定双重表达。肯定表达是“只使用我提供的数据”，否定表达是“不要生成任何额外的数据条目”。两条同时给，AI就不会“自由发挥”了。
另外，如果是让AI生成SQL，也要在Prompt里加一句：“我只会执行你生成的SQL，请确保查询结果不包含任何假设数据。”本质上，AI只是一个“根据你的描述推测你意图”的工具，你不加限制，它就会用最可能的推测去补全信息。而数据可视化这个场景，最怕的就是“看起来很合理，但数据是错的”。
5. 从单张图表到一套看板：AI辅助可视化的进阶玩法
单张图表做出来后，很多人会想：能不能让AI直接帮我搭一个完整的数据看板，把金牌榜、奖牌结构、每日趋势都放到一个页面上？答案是“能”，但要想清楚做这件事的正确姿势。
5.1 让AI先画框架，再分图表逐个填坑
如果你一上来就要求AI“生成一个完整的亚运会数据看板”，AI往往会在一个HTML页面里塞入多个ECharts实例。它确实能做到，但至少在我的实测里，一次性生成的多图表页面，经常出现至少一个图表的数据没对齐、一个图表的宽度溢出、一个图表的标题错乱。这时候整个页面的排查成本，反而比分步做要高。
更稳妥的方案是分两步走。第一步，让AI生成页面骨架：
请生成一个HTML页面框架，包含三个图表的容器，分别用 id="chart1"、id="chart2"、id="chart3" 标识。 页面引用ECharts CDN，提供每个容器的CSS样式（左列柱状图占40%宽度，右列上方饼图、下方折线图）。 不要填充任何图表配置，只给HTML结构和CSS。拿到框架后，第二步才是分别让AI生成三个图表的option配置。你可以用前文那种单图表的Prompt，把生成的结果分别粘贴到chart1、chart2、chart3对应的初始化代码里。这么做的好处是，每个图表都可以单独调优，不会互相影响。如果你对ECharts比较熟，也可以让AI生成option1、option2、option3三个变量，最后手动组合。组合这个动作建议人来做，因为“把散装代码拼进一个大HTML”这种任务，AI做得并不出色，它经常把变量名弄混。
5.2 多个图表联动：AI生成骨架，手工补交互
看板的高级玩法是联动：点击柱状图里的某个代表团，饼图和折线图自动筛选该代表团的数据。ECharts官方叫dispatchAction和connect，还有myChart.on('click')事件监听。对于联动逻辑，我建议不要指望AI一次写对，而是让AI生成事件监听的骨架。
请生成一段ECharts点击事件代码： 当用户点击 chart1 的柱子时，获取该柱子的类目名称，并把它作为选中条件，用于过滤 chart2 和 chart3 的数据。 要求： 1. 使用 chart1.on('click', params) 写法； 2. 通过 params.name 获取用户点击的国家/地区名称； 3. 在回调函数中，根据这个名称更新 chart2 和 chart3 的 series.data； 4. 如果图表没有对应的数据，显示空数组并给出提示； 5. 输出JavaScript代码片段即可，不要输出完整HTML。这段Prompt生成的是一种“交互骨架”。你会发现它生成的代码里，数据过滤逻辑通常是一个filter函数。你可以在这个函数里填入真正的数据，或者对接后端接口。这套模式的好处是，AI帮你把“事件监听→筛选逻辑→更新图表”这条链路打通了，你只需要替换数据源。交互逻辑里的细节（比如点击后高亮柱子、再次点击取消筛选）可以后续再让AI做一次增强，每次都提出具体的交互需求，比让AI“自由发挥”可控得多。
5.3 沉淀自己的Prompt模板库
用过一段时间AI辅助可视化之后，我有一个很深的体会：真正高效的人，不是每次重新写Prompt，而是维护一个自己的模板库。
我的模板库里通常存几类东西。一类是数据准备模板，比如“把Excel表格内容转成JSON、SQL建表语句、Python字典”这类转换类Prompt，配合你的数据格式使用。二是图表生成模板，按柱状图、折线图、饼图、散点图、地图分类存放，每个模板都写好“期望的结构、字段、颜色、标题、tooltip”这些固定偏好。三是调试模板，也就是前面说的“报错信息+当前代码+修复指令”三段式，任何一次图表调试都用这个模式。
沉淀模板的好处不止是节省时间，更是保证一致性。同一家公司或者同一个项目里，图表风格统一很重要：标题字号、颜色主题、tooltip格式，最好每次都一样。有了模板，你只需要改数据和关键字段，输出结果风格是完全统一的。我的做法是每个月都会把“本周用到的有效Prompt”回填进模板库，把那些失效的、效果差的Prompt删掉，保持模板库精简可用。
还有一个实用小技巧：模板里尽量使用“占位符”写法。比如：
请使用 ECharts 生成一个[图表类型]，渲染在 HTML 页面中。 数据如下： [数据] 要求： 1. [X轴字段]为[国家/地区]，[Y轴字段]为[数值]; 2. 标题为“[标题文案]”; 3. 柱子颜色为[颜色描述]; 4. tooltip显示“国家/地区：数值”； 5. 直接输出完整HTML代码。用方括号括起来的“待填项”，让自己每次使用模板时一眼扫到哪些位置需要修改，比把整段Prompt重新敲一遍快得多。这种模板思维，从数据可视化延伸到日常其他场景也照样适用——AI给我们的不是某个具体答案，而是一套可以反复复用的工作方式。
