自然语言驱动AI生成ECharts可视化：亚运会数据图表Prompt实战

1. 先把“自然语言做可视化”这件事说清楚你随便找个做数据可视化的人问一句接到一个“把亚运会奖牌数据做成图表”的需求第一反应是什么十有八九是打开编辑器、翻ECharts文档、开始写option配置。写配置本身不难难的是你脑子里清楚要什么图手却记不住series里该填type: bar还是type: linexAxis.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: timeECharts会把它当做类目轴横轴上每个日期都只是一个个格子不会自动按时间间隔排列。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 最常见的三个翻车原因第一个原因是字段名不一致。比如数据里是countryAI生成代码里却引用了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页面框架包含三个图表的容器分别用 idchart1、idchart2、idchart3 标识。 页面引用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给我们的不是某个具体答案而是一套可以反复复用的工作方式。