如果你手里有一份亚运会的公开数据想在5分钟内把它变成一张能放到PPT、能点击、能导出图片的网页图表用AI自然语言做数据可视化可能是目前最快的方式。不需要手写复杂前端也不需要背ECharts配置项你只需要把需求讲清楚剩下的事情交给Prompt。这篇文章就把完整Prompt、实操步骤和避坑经验都整理出来照着抄就能跑通。1. 为什么自然语言能直接变成可视化页面1.1 传统流程的痛点出在“转换”环节过去做一张亚运会数据图表常规路径大概是找数据、清洗数据、打开Excel或Tableau、拖拽字段、选图表类型、调颜色、调坐标轴、导图。这套流程不是说不能做而是大多数时间都浪费在“把数据描述变成图形配置”这一步。尤其是你想做的是网页端可交互图表还得写HTML、CSS、JavaScript对非前端同学来说门槛很高。AI自然语言生成的思路是把“转换”这一步交给大模型。你告诉它我有一份数据包含运动大项、小项数量、历届参赛规模我想看分布和趋势。模型理解了你的意图后会直接产出ECharts代码你保存成HTML文件双击就能在浏览器里看到图表。整个链路里人只需要负责表达需求技术细节由AI补齐。1.2 一个完整的数据可视化闭环长什么样用自然语言驱动数据可视化核心闭环是这样你准备一份数据可以是表格、文本也可以是粘贴一段JSON。你写一段结构清晰的Prompt告诉AI数据内容、图表类型、页面布局、交互要求。AI返回一个完整的HTML文件内部使用ECharts库。你本地保存并打开浏览器图表渲染支持tooltip悬停、缩放、导出图片等交互。这个闭环之所以成立是因为ECharts的配置项高度结构化本质上是对象和数组的嵌套组合。大模型在训练阶段见过大量同类代码对这类模式的生成能力非常稳。换句话说数据可视化可能是目前最适合用AI生成代码的场景之一。2. 工具选型与数据准备先解决“数据从哪来”2.1 可视化库选ECharts的三个理由市面上可视化方案有很多我这里推荐ECharts不是因为它最强而是因为它最适合AI生成。第一ECharts配置项结构稳定。图表类型、坐标轴、系列数据、tooltip、legend这些都有固定的书写位置AI很容易输出符合预期的代码。第二中文文档和社区资料极其丰富大模型训练语料中相关内容多生成质量有保障。第三它可以纯静态运行用CDN引入即可不需要Node环境、不需要构建工具一个HTML文件就能跑。相比之下Tableau和Power BI更适合拖拽式操作但AI很难帮你生成一个桌面分析文件D3.js虽然灵活但对AI来说复杂度太高生成的代码经常因为API版本问题报错。ECharts正好处在“功能足够强结构足够简单”的位置。2.2 对话式AI工具怎么选主流的对话大模型基本都能完成这个任务比如通义千问、DeepSeek、智谱清言、豆包等。我用过的几个模型在生成ECharts页面方面都表现不错差异主要在细节比如是否会自动加上响应式resize、是否会把数据集中放在对象里。我的建议是优先选支持“输出完整代码块”且上下文长度足够的模型因为你得到的HTML可能有三五百行如果模型上下文太小生成到一半就截断很尴尬。另外如果你需要实时数据可以开启联网搜索但这个案例使用的是静态演示数据不联网完全不影响效果。还有一点值得提醒不要把单位内部报表或未公开数据直接粘贴进免费AI工具涉及隐私和合规风险公开体育数据则没有这个问题。2.3 准备一份可以直接丢给Prompt的样例数据由于AI能理解自然语言描述我们不需要真的准备CSV文件只需要把数据结构讲清楚。为了演示我准备了两组维度一组是“亚运会各运动大项的小项数量和运动员人次”另一组是“历届亚运会参赛规模”。第一组示例数据如下田径小项数量46运动员人次2100游泳小项数量41运动员人次1800射击小项数量33运动员人次1200体操小项数量18运动员人次700球类小项数量60运动员人次2600水上项目小项数量42运动员人次1900其他小项数量80运动员人次3600第二组示例数据如下第14届2002年44个代表团约11000名运动员第15届2006年45个代表团约12000名运动员第16届2010年45个代表团约14000名运动员第17届2014年45个代表团约13000名运动员第18届2018年45个代表团约17000名运动员我这里刻意没有用奖牌榜数据。因为奖牌统计口径在不同媒体和官方渠道有差异做演示项目时容易引入争议而比赛项目数、参赛规模这类数据相对客观适合作为教学案例。3. 提示词设计用一段Prompt把需求说清楚3.1 好的提示词至少包含四要素很多人用AI生成图表失败不是因为AI不行而是Prompt写得太含糊。比如只说“帮我做一个亚运会可视化”AI会懵不知道该用什么库、什么结构、什么数据。一个结构完整的Prompt应该包含四类信息任务、数据、约束、交付格式。任务要说明最终产出是什么比如“一个HTML页面”数据要把表格内容写清楚最好直接列出约束要写明白用什么图表库、什么交互效果交付格式要说明代码的组织方式比如“所有JavaScript写在script标签里”。越具体AI的输出越接近可直接使用的成品。3.2 完整Prompt模板复制即可用下面这段Prompt是我实际使用过的版本你可以直接复制到任意主流对话模型里实验。请用 ECharts 制作一个“亚运会数据可视化”的 HTML 页面。 数据内容如下 1. 各运动大项的小项数量和运动员人次 田径小项46人次2100 游泳小项41人次1800 射击小项33人次1200 体操小项18人次700 球类小项60人次2600 水上项目小项42人次1900 其他小项80人次3600 2. 历届亚运会参赛规模 第14届2002年44个代表团约11000名运动员 第15届2006年45个代表团约12000名运动员 第16届2010年45个代表团约14000名运动员 第17届2014年45个代表团约13000名运动员 第18届2018年45个代表团约17000名运动员 页面要求 - 使用 ECharts 5通过 CDN 引入不需要 npm 环境 - 页面布局为左侧说明文字右侧上下排列两张图表 - 上面柱状图展示“各运动大项的小项数量”柱体使用渐变色 - 下面折线图展示“历届亚运会运动员人数变化”线条平滑 - 柱状图和折线图都需要 tooltip悬停时显示具体数值 - 图表容器要自适应浏览器窗口变化 - 所有数据和配置集中写在 script 标签里数据统一放在一个 const data 对象中 - 输出一个完整 HTML 文件界面文字全部使用中文。这段Prompt看起来“啰嗦”但每一句都有作用。如果你不指定图表库AI可能生成表格或普通列表如果你不指定布局AI可能只提供一个孤零零的图表如果你不要求resize页面在手机端就会错位如果你不要求数据集中存放后续替换数据就会很麻烦。3.3 为什么Prompt要写得这么“啰嗦”从实战看Prompt里的每一句话都是在替AI“排雷”。比如“数据统一放在一个const data对象中”这个要求能让你后期修改数据时只动一处不用在代码里到处找。再比如“使用CDN引入”这个约束是确保你能在没有Node环境的电脑上直接跑通。这些细节看起来不起眼但它们决定了AI返回的结果是“能看”还是“能直接用”。我自己测试过省略其中任何一条后续都需要手工补代码不到5分钟的话术就变成了半小时的调试。与其事后折腾不如一开始在Prompt里多写两句。4. 实操过程从Prompt到可运行页面4.1 拿到AI输出后的三步检查复现时AI会返回一大段代码多半是一个HTML文件。拿到代码后不要直接复制到Word或现有页面里我建议按下面三步检查看是否以!DOCTYPE html开头是完整文件而不是片段看script标签是否引入了ECharts的CDN地址看script标签内是否定义了const data或类似的数据对象。确认后在本机新建一个文件命名成demo.html把代码粘贴进去保存时务必选择UTF-8编码。然后双击打开浏览器就会渲染出图表。如果页面是白屏优先按下一节的方法排查。4.2 核心代码长什么样AI生成的完整代码可能比较长但核心逻辑并不复杂。以柱状图为例关键部分是初始化ECharts实例和设置option对象const chart1 echarts.init(document.getElementById(chart1)); chart1.setOption({ tooltip: { trigger: axis }, grid: { left: 3%, right: 4%, bottom: 3%, containLabel: true }, xAxis: { type: category, data: data.sports.map(item item.name) }, yAxis: { type: value }, series: [{ name: 小项数量, type: bar, barWidth: 40%, data: data.sports.map(item item.events), itemStyle: { color: #3b82f6, borderRadius: [4, 4, 0, 0] } }] });折线图的写法同理只是series里type改成line并且加上smooth: true让线条更平滑。响应式处理也很关键。AI通常会生成下面这行代码window.addEventListener(resize, () { chart1.resize(); chart2.resize(); });如果没有这段代码浏览器窗口大小变化时图表不会跟着缩放这在做汇报投屏时非常难受。所以看到AI输出里缺少这段就让AI补上。4.3 如果AI生成的代码报错怎么处理我在测试中遇到过几次报错最常见的是打开页面后空白控制台提示echarts is not defined。这通常意味着CDN地址加载失败或者脚本顺序写错了。解决办法是换一个CDN源比如把jsdelivr换成unpkg或者用国内可达的公共CDN地址。还有一类错误是某个容器id对不上比如HTML里写的是chart1JavaScript里却初始化了chart2。这种问题肉眼不容易发现但在浏览器控制台会明确提示Cannot read properties of null。最简单的方法不是自己盯代码而是把报错信息复制回AI让它直接修复。AI对自己生成的代码做排查通常很快就能定位。5. 细节打磨让AI输出更像专业仪表盘5.1 增加工具栏让图表能导出图片基础图表跑通后下一步是加交互和导出能力。ECharts自带一个toolbox配置里面包含保存图片、数据视图、还原等工具。我可以直接在Prompt里追加一行要求加上toolbox并包含saveAsImage、dataView、restore三个功能。对应代码大致是这样toolbox: { show: true, feature: { saveAsImage: { title: 保存图片 }, dataView: { title: 数据视图, readOnly: false }, restore: { title: 还原 } } }有了这段配置图表右上角会出现一个小工具条看数据的人可以直接点击保存PNG也可以打开数据视图检查原始值。这个功能在汇报场景里非常实用能省掉“截图后重新标注”的步骤。5.2 统一配色和样式告别默认蓝ECharts默认配色虽然不难看但放在正式页面里缺乏设计感。想要更专业的视觉效果可以在Prompt里补充设计约束。我常用的做法是给出两个主色一个冷色一个暖色再指定背景色。比如柱状图使用#2563eb到#60a5fa的渐变折线图使用#f59e0b页面背景用#f8fafc图表卡片用白色带轻微阴影。AI会把这些约束落到itemStyle和CSS里整体观感立刻提升不少。5.3 双轴图解决“两个指标量级差太远”的问题上面样例数据里小项数量的量级是几十运动员人次是几百到几千。如果放在同一个坐标轴里柱状图会矮到看不见。这时候最好的办法是使用双Y轴一个Y轴对应小项数量另一个Y轴对应运动员人次。Prompt可以这样要求柱状图和折线图共用x轴但使用两个y轴左侧显示小项数量右侧显示人次。AI会生成类似这样的配置yAxis: [ { type: value, name: 小项数量 }, { type: value, name: 人次, splitLine: { show: false } } ], series: [ { name: 小项数量, type: bar, data: [...] }, { name: 运动员人次, type: line, yAxisIndex: 1, data: [...] } ]关键点在于第二条series里必须写yAxisIndex: 1否则折线图还会默认使用第一个Y轴双轴就没有意义了。6. 常见问题与避坑实录6.1 AI没有输出完整代码或者提示当前请求不合适偶尔会遇到AI返回一段文字而不是代码或者提示“当前请求可能不符合规范”。根据我的经验这时候先检查Prompt里是否包含了不必要的敏感词或隐私相关描述。如果只是简单数据可视化需求重新用更中性的表达问一次就好不需要刻意绕开平台限制合规使用是底线。另外不要在同一段Prompt里塞太多任务。比如既要求生成图表又要求顺便写一篇分析报告AI很容易顾此失彼。最稳妥的做法是先让它生成页面跑通后再让它单独补充说明文字。6.2 打开HTML文件白屏图表区域没有任何内容白屏的常见原因有三个。第一个是容器高度为0因为ECharts在初始化时需要容器有明确高度CSS里如果只写了宽度没有高度图表就渲染不出来。可以在样式里加上height: 60vh或者固定像素高度。第二个是CDN脚本没有加载成功检查网络或换CDN源。第三个是JavaScript报错后中止执行前面提到的echarts is not defined就是典型情况。本地直接双击打开HTML文件时不要用fetch去加载本地JSON数据浏览器会因为有跨域限制直接拦截。这个项目的解法是把数据全部写死在HTML里既避免了跨域问题也简化了部署。6.3 数据太多图表挤成一团如果你替换成真实数据后发现柱状图标签重叠可以考虑加dataZoom组件让用户可以拖动查看局部数据。在Prompt里写一句“增加dataZoom组件支持鼠标滚轮缩放”AI就能帮你实现。如果数据量不大但图表还是显得拥挤通常是grid留白不够。可以设置grid.containLabel为true这会让坐标轴标签有足够的空间不会和图表边缘贴合。6.4 中文乱码或数字格式不统一中文乱码大概率是文件编码问题确保HTML的meta charsetUTF-8存在且编辑器保存文件时选择UTF-8格式。数字格式问题则可以通过tooltip的formatter解决比如希望数字显示成“11,000”可以写tooltip: { valueFormatter: value Number(value).toLocaleString(zh-CN) }这样图表里的金额、人数、占比都能按当地习惯加千分位分隔符。7. 我的实际经验与后续扩展7.1 用同一套逻辑可以快速做其他数据可视化把这份Prompt里的“亚运会数据”替换成农产品价格、校园消费记录或网约车订单数据得到的页面结构依然是成立的。我曾经帮朋友做过一个农产品价格数据可视化的小项目当时也是用类似的Prompt让AI生成Flask模板里的HTML页面核心图表代码几乎没有改动只换了数据来源和页面标题。所以我的体会是这类AI生成可视化最值钱的部分不在“代码”而在“Prompt结构”。一旦你有了一个稳定的Prompt框架后续任何数据可视化需求都可以往里面套。甚至可以把数据换成JSON格式让AI先解析再生成图表效果会更好。7.2 如果后续要接入动态数据该怎么做当前方案是纯静态页面适合一次性展示。如果要做成动态更新的系统比如每天自动从接口拉取最新数据可以把这个HTML文件放到Flask的templates目录下然后用模板引擎渲染数据或者通过Ajax请求后端接口把JSON数据传给前端。ECharts本身支持setOption动态更新数据变化时只需要重新调用一次chart.setOption(newData)就能刷新图表。我个人的习惯是先用AI生成静态页面验证视觉和交互确认无误后再接入真实接口。这样既享受了AI的快速出图优势又保证了后续工程的可靠性。7.3 最后分享一个小技巧在所有Prompt里加一句“数据集中放在一个对象中样式集中放在一个CSS块中布局集中放在一个容器中”这句话能让你后面所有调整都变得轻松。我第一次没写这句话AI把数据散落在各个option里改一个数字要在代码里翻半天。加了这个要求后后续修改基本就是复制粘贴替换。这个习惯我到现在都在用很管用。