先放结论这套路子我自己实测过很多次从拿到一份亚运会奖牌数据到浏览器里出现第一张能看的图表五分钟内真的能做到。而且全程不需要你手写一行 ECharts 配置也不需要懂 SQL你只需要像跟同事聊天一样把需求说清楚剩下的事交给大模型。今天这篇就把完整思路、Prompt 原文、踩过的坑一次讲透你照着抄就能复现。为什么这件事值得聊因为我见过太多人被数据可视化挡在门外要么卡在“不知道选什么图表”要么卡在“ECharts 配置看不懂”要么卡在“SQL 写不出来”。这些问题的本质不是你不会做图而是你被工具的语法绑架了。自然语言交互这几年成熟得很快大模型已经能把你嘴里的“我想看各国金牌对比”直接翻译成一份可运行的 ECharts option你只需要学会怎么把需求说准确以及怎么处理它偶尔犯的错。这篇文章适合三类人想快速出图但没系统学过前端的运营和产品刚接触 AI 编程想找落地场景的开发者以及所有想知道“Prompt 到底怎么写才不是玄学”的人。1. 为什么我用“自然语言大模型”做数据可视化1.1 传统可视化路径的三座大山以前做数据可视化常规路径基本是拿数据 → 写 SQL 或 Python 处理 → 选图表库 → 手写配置 → 调样式。这条链路每一步都有门槛。写 SQL 要懂表结构和聚合语法调 ECharts 要理解 option 里 axis、series、tooltip 这些概念关键是你花两小时调出来的图可能只是领导随口一句“换个颜色再看看”。这种挫败感我太熟悉了。更麻烦的是很多人其实卡在“不知道该用什么图”。柱状图、折线图、饼图、散点图、地图每种图表适合回答的问题完全不同对比看柱状趋势看折线占比看饼图分布看散点。工具用得再熟如果图表选型这一步就错了后面全是白费。而大模型恰好擅长这种“模糊需求 → 明确方案”的转化你只要说“我想对比各国金牌数”它会自动匹配成柱状图还会顺手把排序、颜色、标签都安排好。所以自然语言做可视化的核心价值不是替代专业工具而是把“从需求到图表”的中间环节压缩到几乎为零。以前从需求到成品需要“需求理解 → 方案设计 → 技术实现”三步现在大模型把这三步合成了一步。1.2 自然语言转图表的本质链路你可能会好奇大模型到底是怎么把一句话变成一张图的其实拆开看核心就三步。第一步是意图识别大模型从你的自然语言里提取出图表类型、数据维度和指标维度比如“各国金牌数对比”会被拆成“维度是国家、指标是金牌、动作是对比”。第二步是数据映射它把自己整理好的数据字段对应到图表的 x 轴、y 轴、系列这一步在技术上等价于自动生成一份映射配置。第三步是代码生成把映射结果翻译成 ECharts 的 option 对象。这三步对应到你们实际用的时候就是一次对话的事。你用自然语言描述需求大模型返回一段 JSON 格式的 ECharts 配置前端拿到配置直接渲染。整个过程里大模型充当的是“翻译官 配置工程师”的双重角色。补充一个细节很多人以为大模型是“会写代码所以能生成图表”其实更准确的说法是它在训练阶段见过海量的 ECharts 配置案例所以对 option 的结构规律掌握得非常好。这一点直接决定了后面的一个实操结论大模型写 ECharts 的成功率远高于它写某些冷门小众图表库的成功率。后面我还会细说。1.3 这条路的边界在哪里先把丑话说在前面自然语言可视化不是银弹它有明显的边界。第一个边界是数据量如果你的数据有几百万行让大模型直接生成完整配置就不现实正确做法是先聚合出几百行的汇总数据再让它画。第二个边界是复杂交互比如联动筛选、钻取、跨图表联动这种还是要靠前端代码实现大模型只能给你搭个架子。第三个边界是数据准确性大模型会一本正经地编数据所以“数据必须来自你提供的内容”这条约束要写死在 Prompt 里。但我的判断是在日常 80% 的可视化需求里这些边界你都碰不到。你要做的无非就是先聚合好数据写清楚需求拿到配置再微调。清楚了边界接下来就可以放心上手了。2. 先搭底子数据集选型与 ECharts 为什么是首选2.1 数据集怎么准备不要指望大模型自己“知道”亚运会的真实数据它可能会给你编一个奖牌榜出来看起来很专业实际全是幻觉。我的做法是数据完全由我提供让大模型只负责画图。这里强烈建议用 CSV 或 JSON 格式因为大模型对这两种格式的结构理解最稳定不容易解析错。我们这次用一份简化过的亚运会奖牌数据做演示结构如下国家,金牌,银牌,铜牌,总数 中国,201,111,71,383 韩国,42,59,89,190 日本,52,67,69,188 印度,28,38,41,107 乌兹别克斯坦,22,18,31,71 中华台北,19,20,28,67 伊朗,13,21,20,54 哈萨克斯坦,10,22,48,80这不是完整的真实榜单但用来演示完全够了。注意关键点数据量要控制在几十行以内列名一定要是中文或者清晰的英文标准化命名。列名直接决定了大模型对字段的理解我见过很多人数据没问题但列名是“a、b、c”结果大模型把金牌和银牌搞反。你说“金牌数”它找不到对应字段自然就瞎猜了。2.2 为什么是 ECharts 而不是其他库市面上图表库不少D3.js、Chart.js、Highcharts 都有人用但我个人做自然语言可视化时首选 ECharts原因有三个。第一option 是纯 JSON 对象这跟大模型的生成模式天然匹配。大模型本质上是在做“根据输入补全输出”JSON 结构对它来说是最容易生成、也最容易校验的格式。第二ECharts 的生态和社区案例极多它在训练语料里的出现频率远高于其他库这意味着大模型对它的了解更深生成配置的准确率更高。第三ECharts 在中文场景支持上做得很好坐标轴、图例、数据标签的中文渲染都不用额外折腾。Chart.js 我试过配置确实更简洁但自由度低复杂布局不好调D3.js 则完全不适合这个场景那是给专业开发者用的大模型生成的代码很难一次跑通。所以别犹豫做自然语言可视化就选 ECharts这是我在多个项目里对比出来的结论。2.3 大模型对 ECharts 的“偏见”反而是优势有个很有意思的现象大模型生成 ECharts 配置时会默认带上很多“标准答案”式的写法比如颜色用默认色板、标题居中、tooltip 用触发式。这看起来像偷懒但反而省事——因为它生成的默认配置通常已经达到了“能见人”的及格线你只需要在小处做个性化调整就行。比起从零写配置这种“有默认值可用”的体验才是 5 分钟出图的关键。所以我的建议是不要一上来就让大模型“自由发挥”而是明确告诉它用 ECharts并且给你完整的 option JSON。这一步选型对了后面所有流程都顺了。3. 核心干货5分钟实现亚运会数据可视化3.1 第一步用自然语言让 AI 出图附完整 Prompt直接上 Prompt这是我在多次实测后稳定可复制的版本你是一名资深数据可视化工程师精通 ECharts 配置。请根据我提供的数据和需求生成一份完整可用的 ECharts option 配置。 数据需求说明 1. 只能使用我提供的数据禁止编造任何数据。 2. 当我说“对比”时优先使用 bar柱状图说“趋势”时优先使用 line折线图说“占比”时优先使用 pie饼图。 3. 输出要求直接返回一个合法的 JSON 对象不要解释、不要 markdown 代码块标记、不要写多余文字。JSON 中必须包含 title、tooltip、legend、grid、xAxis、yAxis、series 字段。 4. 中文字体正常显示坐标轴和数据标签都显示中文。 5. series 数据直接内联在配置中不要用外部数据源。 数据如下CSV格式 国家,金牌,银牌,铜牌,总数 中国,201,111,71,383 韩国,42,59,89,190 日本,52,67,69,188 印度,28,38,41,107 乌兹别克斯坦,22,18,31,71 中华台北,19,20,28,67 伊朗,13,21,20,54 哈萨克斯坦,10,22,48,80 我的需求是用柱状图对比各国金牌数量按金牌数从高到低排序。把这个 Prompt 发给任意主流大模型对话工具正常情况下它会返回一份完整的 JSON 配置。如果你用的是 Claude 或 GPT直接复制使用即可如果是其他国内大模型也可以直接套用我现在日常主力用通义千问这套 Prompt 同样没问题。这里补充一个很多人不知道的细节Prompt 里那句“不要 markdown 代码块标记”非常重要。很多大模型默认会把 JSON 包在 json 代码块里你复制到前端时容易带出多余字符。一旦它输出格式不稳定前端的 JSON.parse 就会报错。你要求它“直接返回 JSON”能省掉后续很多麻烦。执行这一步时记得把数据量控制在 50 行以内。数据太长大模型容易中途截断或者生成的配置体积过大前端解析有压力。如果数据源很大先在 SQL 或 Excel 里聚合好再丢给它。3.2 第二步把输出接到 HTML 页面里大模型生成的是一段 JSON要让它变成浏览器里的图表还需要一个极简的 HTML 外壳。下面这堆代码就是我一直在用的模板你直接复制保存成 chart.html 就行!DOCTYPE html html langzh-CN head meta charsetUTF-8 title亚运会数据可视化/title script srchttps://cdn.jsdelivr.net/npm/echarts5/dist/echarts.min.js/script style #chart { width: 900px; height: 600px; margin: 40px auto; } /style /head body div idchart/div script // 把大模型返回的 JSON 对象粘贴到这里 const option { // ...这里是大模型生成的配置 }; const chartDom document.getElementById(chart); const myChart echarts.init(chartDom); myChart.setOption(option); /script /body /html关键就三步引入 ECharts 的 CDN 文件在指定 div 上初始化图表调用 setOption 塞入配置。整个过程不超过十行代码。你需要注意的是如果公司内网无法访问 CDN就把 echarts.min.js 下载到本地再引入否则图表会加载不出来。我实测下来大模型生成的 JSON 绝大多数情况下可以直接用。但偶尔也会有小毛病最常见的是多了一个逗号或者字段名写错。遇到这种问题先把 JSON 贴到任意 JSON 校验工具里看一眼别急着改代码。这一步能帮你快速定位是格式问题还是逻辑问题。3.3 第三步三个迭代优化指令让图表能见人第一次生成的配置通常能看但离“能发表”还有距离。这时候不要手改代码继续用自然语言迭代。根据我的经验下面三个优化指令几乎覆盖了 80% 的需求。指令一调整颜色和视觉风格。你可以说“把金牌对应的柱子颜色改为金黄色背景改为浅色系标题加粗。” 大模型会更新颜色值你只需要把新的 JSON 替换进去。这里有个细节如果你对配色有明确偏好直接给色号最稳妥比如“金牌用 #F5C242”不熟悉的读者可能会问为什么要自己给色号——因为大模型对“金黄色”的理解可能偏橙色或偏暗黄给具体色号能消除歧义。指令二调整布局和标签。比如“在柱子上方显示具体数字字体 12px坐标轴标签旋转 30 度防止重叠。” 这个指令能解决大多数数据标签拥挤的问题。特别是国家名较长时横轴的标签会叠在一起旋转角度或改成竖向排列是标准解法。指令三增加交互动效。你可以说“鼠标悬浮时显示国家名和各项奖牌数柱子入场时带一个动画效果。” 大模型会自动加上 tooltip 配置和 animation 相关字段。这也是自然语言可视化最爽的一点你不需要去文档查 animationDuration 是毫秒还是秒直接说需求就行它帮你换算好。我通常会在 2 到 3 轮对话内把图表调整到满意状态单轮耗时不到一分钟这就是“5分钟出图”的完整闭环。别急着用前端工具调试先通过对话把大方向定下来效率会高很多。3.4 一套可复用的 Prompt 模板长什么样上面那份完整的 Prompt 是“亚运会定制版”但你换个数据集、换个图表需求总不能每次从零写。所以我把这份 Prompt 拆成了一个可复用的模板框架五个变量填进去就能直接用变量位置内容说明角色定义“你是一名资深数据可视化工程师精通 ECharts 配置”给大模型设定身份生成结果更专业数据区CSV 或 JSON 格式的数据文本一定放在 Prompt 中段方便模型引用约束区“只能使用我提供的数据”“不要解释直接输出JSON”防止幻觉和格式问题图表偏好区“对比用 bar、趋势用 line、占比用 pie”让模型按规则选型减少返工需求区“用柱状图对比各国金牌数量按降序排列”最后的自然语言指令越具体越好这套模板我用了大半年从农产品价格趋势到校园大数据报表再到网约车订单分析本质上都没跳出这五个变量。你把数据换掉、需求换掉配置就直接出来了。记住一个原则模板负责控制大模型的输出格式需求句负责控制图表内容两者分开写后面调试才不混乱。再分享一个进阶小技巧如果你有多张图要做不要一次对话里让大模型全部生成。一次只生成一张图的配置质量最稳定。你想做一个可视化看板就一图一轮对话最后把几个 JSON 手动合并到一个 HTML 里这样出错也好排查。4. 常见问题与排查技巧实录4.1 JSON 被截断或格式坏掉了这是遇到最多的问题。大模型输出长度有限数据量大或者配置复杂时它可能会说一半就停了或者返回一串中间夹着多余文字的“伪 JSON”。我的处理流程分三步走。第一在 Prompt 里明确“只输出 JSON不要解释”这句话能生效大半。第二如果还是被截断把数据精简一下比如只保留前 8 个国家。第三把得到的 JSON 贴到在线 JSON 校验工具里看解析报错的位置是第几行第几列然后针对性修复。通常就是缺了一个引号、多了一个逗号、或者“undefined”出现在某个字段里。经验之谈别让大模型一次生成包含多个图表的 option特别是新手阶段。单个图表配置体积小截断概率低也容易排查。等你熟练了再挑战复合布局。4.2 图表类型不符合预期你明明要“对比各国金牌数量”它给你画了饼图或者折线图。这种问题八成是 Prompt 里没说清楚“对比”的含义。在图表偏好区写死规则是一种解法更好用的是加一句“图表类型请按我的要求来不要自作主张”。大模型对指令的遵循度通常很高只要规则清晰一般不会再跑偏。还有一种情况是图表类型对了但维度放错了位置。比如横轴应该是国家、纵轴应该是金牌数结果刚好反了。这时不用重新生成直接说“把国家改到 x 轴金牌数改到 y 轴”就行。这本质上是对配置的局部修改大模型处理这种微调非常擅长。4.3 大模型开始编数据如果 Prompt 里没有“只能使用我提供的数据”这句约束大模型很可能给你生成一个完全虚构的奖牌榜而且数字看起来特别合理。一旦你拿这个配置去交付就是事故。所以“禁止编造数据”这句话是必选项不是可选项。另外你还要在拿到配置后扫一眼 series 里的数据跟原始 CSV 对比一下最大值和最小值看数量级是否对得上。我认识好几个同行都遇到过“别的都对就某个数据差了10倍”的情况基本都是漏看导致的。这点疏忽很容易发生但多一眼对比就能避免。4.4 加了动画后页面卡顿这个问题比较隐蔽。大模型为了炫技可能会给你的配置加上大量动画字段比如每个柱子 delay 200ms共 50 根柱子打开页面就像放幻灯片。数据点几百个时这个问题尤其明显。解法有两个。第一直接用自然语言关掉动画说“去掉入场动画悬浮过渡时间减少到 200ms”。第二如果你自己知道 ECharts 配置结构直接定位到 animation 字段把 animation: false 写上去即可。我一般建议保留 tooltip 过渡动画去掉入场动画这样视觉效果好性能也稳。4.5 常见问题速查表问题现象根源解决方案图表没渲染页面空白CDN 加载失败换成本地 echarts.min.js 文件控制台报 Unexpected tokenJSON 带 markdown 代码块Prompt 加“不要代码块标记”数据显示顺序乱未指定排序规则提需求时加“按金牌数降序排序”中文标签显示为方块编码问题或字体缺失HTML 设置 charsetUTF-8柱状图柱子太宽未设置 barWidth说“柱子宽度改为宽度的40%”图例遮挡图表图例位置不合适说“图例改到右下角”大模型返回 Python 代码角色定义不清晰明确“只输出 ECharts option 配置”这张表是我踩坑总结速查版遇到问题先对号入座大部分都能快速定位。第 6 项图例遮挡图表其实很常见因为大模型默认把图例放在顶部居中当图表标题和数据类别多时视觉上会很拥挤改成右下角或者右上角通常是最舒服的。5. 这套玩法还能扩展到哪里5.1 换个数据集就是换个项目亚运会只是一块敲门砖。我后来用同一套模板做过农产品价格数据的可视化数据格式是“农产品名称,批发价,涨跌幅”需求是“展示涨跌幅排名前10的农产品”。大模型照样一次生成柱状图。又做过网约车订单量的“一天24小时趋势”折线图数据集只有一行 CSV它把 x 轴小时、y 轴订单量安排得恰到好处。这说明什么说明这套方法跟行业无关跟你准备的数据格式强相关。只要你有结构化的数据、有明确的需求走一遍 Prompt 模板图就能出来。你可能会顾虑如果我要做的是企业级的数据可视化看板而不是这种单图演示这套方法还适用吗我的看法是单图填空式生成看板搭建式的多图布局还需要人工编排。但你完全可以让大模型把每张图的 option 都生成好然后自己在 HTML 里用 grid 布局把它们拼起来。至少省掉了写配置的时间工作量能减少一半。我从“亚运会单图”走到“农产品多图看板”和“校园大数据报表”都是这个思路。5.2 从单图到看板让 AI 帮你起框架一段时间后你会发现大模型不仅能生成单图配置还能帮你写完整看板的 HTML 骨架。你可以这样提问“帮我用 ECharts 实现一个数据看板包含三个图表左侧柱状图展示各国金牌榜右上角饼图展示金/银/铜占比右下角折线图展示历届亚运会金牌趋势。数据我后面填先把结构和布局写出来。”它返回的 HTML 里通常会包含一个 flex 或 grid 布局三个 div 分别放三张图你只需要把之前生成的三个 JSON 配置替换进去。这是我认为大模型辅助开发最实用的场景之一它把你带到了“60分的看板”你只需要花心思把剩下的 40 分打磨好。5.3 从展示到分析让大模型解读图表进阶玩法是不仅让大模型画图还让它帮你解释。在图表生成后追加一句“请根据配置中的数据和图表类型用三句话总结主要洞察和异常值。” 它会基于数据本身输出简要分析。这个功能在写汇报材料时特别有用。但有一点要特别注意大模型的数据解读仅供参考它可能会从局部数据推出过度结论。比如看到“中国队金牌数远超其他国家”就写“中国队垄断优势”这种评论性表述在正式汇报里风险不小。所以我的习惯是只让它罗列“数据事实”不开放“价值判断”类的问题。一旦涉及评价我会自己把分析文案替换成更稳妥、中立的表述。最后再分享一个细节我前后用这套“自然语言 ECharts”工作流做了十几个可视化项目最大的感悟是Prompt 不需要写得像代码一样精准但一定要把“数据边界”和“输出格式”这两条线画清楚。数据边界是防止它编造内容输出格式是防止它答非所问。只要这两条守住剩下的大胆让它发挥就行。另外如果你打算在自己的电脑上跑这份亚运会 Demo建议把数据做一次简单清洗确认没有空值、没有多余空格之后再丢给大模型。很多时候图表和预期不一致锅不在大模型而是在数据的“脏”。这一步花不了 30 秒但能帮你省下至少一轮对话的返工时间。别把这套流程想得太复杂它本质上就是“把画图需求用中文说清楚再把生成结果粘贴到一个参考模板里”。跑通一次之后你会发现自己再也不想回到手写 ECharts 配置的老路上去了。