1. 为什么我对AI自然语言生成可视化这件事态度转变了先说个真实场景。前阵子公司要出一份亚运会赛后的数据简报领导上午下的需求中午就要看到图表。搁以前我的流程是这样的先从公开数据源把奖牌榜、项目分布、参赛人数之类的数据扒下来整理成表格然后打开代码编辑器调ECharts的option配置为个颜色和间距折腾一个多小时最后导出截图放进PPT。这一套流程哪怕再熟练没有四十到六十分钟也下不来而且要懂点前端基础和JavaScript语法。但现在不一样了。我只需要把我想看什么用自然语言描述清楚剩下的HTML结构、图表初始化、ECharts配置、样式美化AI全部帮我写好。我实际测下来从数据准备到打开浏览器看到一张能交互的柱状图五分钟确实够用核心就是把Prompt写得足够精确并且知道怎么让AI迭代修改。这篇文章就把整个链路完整拆给你看包括我用的完整Prompt、运行调试的细节以及几次踩坑后的修正方法文中的方案主要面向运营、数据分析师和刚接触前端但想快速产出可视化页面的人有一定的编程基础会更好上手但即便完全零基础只要会复制粘贴文件一样能跑通。文章里我会以2023年杭州亚运会的公开奖牌数据为例因为近期亚运会相关的数据可视化需求在职场里确实高频用它做示例最有说服力。你完全可以把它当成模板换任何数据集都是一样的操作路径。我不打算给你铺一大堆可视化是什么的背景知识直接进入正题从准备数据开始说起。2. 动手之前的准备数据、工具和需求清单2.1 确保你手里的数据是干净的很多人一上来就急着打开AI对话框这是错误的第一步。AI大模型本身的训练数据里确实会有一些亚运会相关的历史数据但它很可能记错、记混尤其是涉及具体国家/地区的奖牌数和项目分类时幻觉概率一点不低。我的原则是所有展示数据必须由我自己确认过再喂给AI绝不让AI从记忆里猜。这里以杭州亚运会公开可查的奖牌榜Top10数据为例整理成一份最简单的结构你直接复制就好排名国家/地区金牌银牌铜牌总数1中国191119883982日本5267691883韩国4259891904印度2838411075乌兹别克斯坦221831716伊朗202128697中国台北192028678泰国121432589巴林10361910哈萨克斯坦9212757这份数据不需要多复杂够用来做一张柱状图和一张堆叠条形图就行。如果你的数据源是Excel或CSV我建议在喂给AI之前就整理成这种Markdown表格或JSON数组的形态而不是丢一个文件名过去。AI工具多数时候没法直接读你本地的Excel你贴文字内容它才能理解。当然ChatGPT的付费版和Claude的高级版支持附件上传但为了流程通用我统一采用直接粘贴文字数据的方式。2.2 选哪种AI工具、用什么姿势问最稳可选的对话型AI工具有很多像ChatGPT、Claude、国内的文心一言、通义千问、Kimi之类都可以完成这个任务。实测下来针对生成ECharts前端页面这类任务我优先推荐Claude和ChatGPT代码生成质量和一次通过率相对更高国内大模型的效果也在快速追赶如果访问方面有考量用国内产品完全可行只是个别样式细节可能需要多几轮调整。一个容易被忽略的关键点是同一套Prompt在不同工具里表现会有差异这和模型对HTML代码的理解侧重有关。所以如果你在某个工具里生成出来的页面打开是白的先别怀疑Prompt写得不好换个工具或者换个大模型版本再试一次很可能就正常了。我在文中演示的Prompt在多数主流大模型上都能出可用结果你完全可以先按现成的跑一遍。2.3 说清楚你要做哪张图比随便看看更有用在打开AI对话框之前先花30秒想清楚最终要产出的图表长什么样。哪个维度的数据是主角用柱状图还是折线图需要几个图表组合要不要加数据筛选交互比如我这篇文章的目标就很明确第一张图展示金牌数Top10国家/地区的对比用横向柱状图按金牌数降序排列第二张图展示Top6国家/地区的金、银、铜牌构成用堆叠条形图或分组柱状图页面整体风格深色科技感适合投在大屏或PPT里这个需求清单就是Prompt的骨架。不要指望AI能替你定义清楚你想要的图表语义——它能帮你写代码但没法帮你做业务上的思考。你想清楚一分钟后面能省十分钟调试时间。3. 核心环节把需求翻译成Prompt为什么每个句子都不能省3.1 完整Prompt直接给到拿走即用下面这一段就是我这篇文章完整跑通的Prompt你直接复制使用即可你是一名资深的前端数据可视化工程师精通HTML5、CSS3和ECharts。请根据我提供的数据生成一个完整的、可直接在浏览器中运行的HTML文件单文件模式所有样式和脚本内联不依赖本地任何文件。 【页面目标】 制作一个亚运会奖牌数据看板包含2张图表整体使用深色科技感风格背景色为深蓝渐变标题文字为白色适合大屏展示。 【数据】 以下为第19届杭州亚运会部分国家/地区奖牌数据金牌、银牌、铜牌、总数 中国 191 119 88 398 日本 52 67 69 188 韩国 42 59 89 190 印度 28 38 41 107 乌兹别克斯坦 22 18 31 71 伊朗 20 21 28 69 中国台北 19 20 28 67 泰国 12 14 32 58 巴林 10 3 6 19 哈萨克斯坦 9 21 27 57 【图表1要求】 横向柱状图展示金牌数量Top10国家/地区。要求按金牌数从高到低排序柱体使用渐变色从金色到橙色显示数据标签图表标题为“亚运会金牌榜TOP10”。 【图表2要求】 堆叠条形图展示排名前6的国家/地区金、银、铜牌构成。要求使用不同的颜色区分金、银、铜三种奖牌显示图例和图例位置在顶部居中数值标签显示在柱体内部图表标题为“奖牌构成分布TOP6”。 【布局与交互要求】 两个图表上下排列宽度自适应容器宽度100%每个图表高度不低于420像素。图表tooltip需完整显示国家/地区名称、各类奖牌数量和总数。页面上方添加一个大标题“第19届亚运会奖牌数据看板”以及一行说明文字“数据来源公开赛事数据整理”。 【输出要求】 直接输出完整的HTML代码不要输出解释性文字。代码中注释清晰CSS部分对关键样式加注释JS部分说明每个图表的配置要点。请使用ECharts的CDN链接https://cdn.jsdelivr.net/npm/echarts5/dist/echarts.min.js引入ECharts。所有中文文本确保使用UTF-8编码正常显示。看出这段Prompt和随口一句帮我做个亚运会图表的区别了吗区别非常大。它不是一句模糊的自然语言请求而是一份结构化需求文档。下面我把每一段的用意拆开讲这样你就能举一反三地改写成自己的任务。3.2 Prompt的结构拆解角色、数据、布局、输出约束第一段先设定角色你是一名资深的数据可视化工程师。这么做不是玄学而是利用了对话模型对角色提示非常敏感的特性。给模型一个明确的资深工程师人设它生成的代码在规范性上明显强于不给定位的版本——变量命名、注释习惯、ECharts配置书写方式都会更接近有经验的开发者而不是像新手教程里那种能跑但极其粗糙的写法。紧接着是页面目标和样式基调深色科技感、深蓝渐变、大屏展示。ECharts默认的主题是白底黑字如果不指定风格AI大概率生成一个普通的白色页面。你直接说清楚深色背景、白色文字、大屏风格它就会在option里主动配置好深色背景和适配的主题色省去后续手动调样式。数据部分为什么要用中国 191 119 88 398这样一行一条的格式而不是塞一个长长的JSON数组因为这种结构对人来说是表格对模型来说也足够简单清晰解析不容易出错。数据行数和字段都一目了然模型在处理时会把每一行对应成一条记录而不是在复杂嵌套结构里丢失字段。图表要求拆成两张图分别说明是另一个关键技巧。如果只说做一个奖牌看板模型不知道哪张图更重要、哪张图放上面、具体展示哪个字段。我明确指定了图表1用横向柱状图实现金牌Top10、图表2用堆叠条形图展示前6名奖牌构成并且补充了排序要求、颜色渐变、数据标签、图例位置这些细节。你越细致返回结果越不用返工。最后一段输出要求同样重要。我明确要求直接输出完整的HTML代码不要输出解释性文字这能防止AI在代码前后添加一大段以下是根据您的需求生成的代码这类废话。同时指定了ECharts的CDN来源和单文件模式这决定了你拿到的是一个可以直接保存运行的独立HTML文件而不需要额外安装Node包或构建工具。提示不建议把帮我调整一下颜色这类开放式修改放在同一个Prompt里。一次只完成一项任务让AI先产出基础版本再通过后续对话迭代成功率会高得多。4. 完整执行流程从Prompt到页面运行的全过程记录4.1 第一次运行用它生成的HTML文件直接浏览器打开把上面那段Prompt粘贴到AI对话框并提交等它输出代码。以我的实测经验Claude和ChatGPT通常会在几十秒内返回一整个HTML文件大约300到500行不等包含完整的HTML结构、CSS样式和两个ECharts图表的JS初始化代码。现在你需要在电脑上建一个文件夹比如叫yayun-dashboard在里面新建一个文本文件把AI返回的代码全部粘贴进去保存时文件名写成index.html。注意保存的编码格式Windows自带的记事本默认可能是GBK编码如果页面上的中文变成乱码要在另存为对话框里把编码改成UTF-8再保存。这一步很关键等你在浏览器里看到满屏乱码再反应就晚了。保存完成后双击打开这个HTML文件你的默认浏览器会加载它。正常情况下你应该能看到一个深蓝色背景的页面顶部是第19届亚运会奖牌数据看板标题下方依次是金牌榜Top10横向柱状图、奖牌构成堆叠条形图。如果一切正常五分钟的承诺已经兑现了——但你大概率还需要解决下面这些常见问题。4.2 页面空白、图表不显示的排查链路我第一次跑这个方案的时候双击文件之后页面是全白的控制台报错ECharts is not defined。原因是官方CDN在那个网络环境下的加载超时了。遇到这种情况排查思路按顺序走打开浏览器的开发者工具F12切到Console标签页看有没有红色的报错信息如果报错指向echarts.min.js加载失败说明CDN路径不可达换一个CDN源就行常用的备选CDN有等也可以在页面中配置多个script标签做fallback但注意别重复初始化ECharts还有一种典型的图表区域空白页面背景和标题都显示正常但图表所在区域一片空白。这时候多半是容器高度的问题。ECharts在初始化时如果发现挂载它的DOM元素高度为0图表就不会渲染出来。我在Prompt里专门写了每个图表高度不低于420像素就是为了规避这个问题但AI偶尔会漏掉检查一下html里的chart容器是不是设置了height: 420px这类的样式如果没设置手动加上即可。4.3 为什么推荐用VSCode Live Server而不是直接双击双击打开也能看但这里有一个体验上的坑本地文件直接打开时ECharts的代码通常没问题但一旦涉及后续通过fetch或XMLHttpRequest请求外部数据比如把数据放到JSON文件里浏览器会拦截本地跨域请求导致页面数据加载不出来。如果你想在这个项目上继续迭代我建议换成VSCode配Live Server插件理由有三个通过本地服务器访问页面后续即使加了数据请求功能也不会跨域报错页面改动保存后浏览器自动刷新省去手动刷新的重复动作在浏览器里用F12调试绝对比反复双击文件顺畅得多操作步骤也不复杂下载安装VSCode在扩展市场里搜索Live Server并安装然后用VSCode打开你存放index.html的那个文件夹右键点击HTML文件选择Open with Live Server浏览器会自动打开一个http://127.0.0.1:5500/index.html的地址。这个过程不需要懂Node或npm照做即可。5. 生成之后还要调试一些AI不会主动告诉你的优化细节5.1 深色主题下的视觉协调背景、文字、坐标轴AI一次生成的图表视觉上往往是能看但不精致。比如深色背景下的坐标轴文字颜色它可能默认用了深灰色和背景融在一起看不清。我的习惯是在拿到底稿后打开开发者工具看看当前option里这些字段的实际表现xAxis.axisLabel.color坐标轴文字的字体颜色 yAxis.axisLabel.color另一个维度的坐标轴文字颜色 legend.textStyle.color图例文字颜色 tooltip.backgroundColor / textStyle提示框的背景色和文字色对于深色背景的页面一套我常用的配色方案是坐标轴文字用rgba(255,255,255,0.75)图例文字用白色tooltip背景用rgba(0,0,0,0.8)带一点边框色。你完全可以在后续对话里把这段需求直接发给AI说把坐标轴文字改为rgba(255,255,255,0.75)图例文字改为白色tooltip背景改为半透明黑色它改起来很快比自己在代码里翻选项要高效。但前提是你得知道这些配置项叫什么。这里给零基础的朋友一个速成思路ECharts的所有视觉细节都是由option对象控制的你不需要背配置项只需要能描述哪里不好看然后让AI把它翻译成配置项。5.2 数据更新时别重新生成整个页面学会在对话里局部修改在职场里数据变动是最常见的事。亚运会最终奖牌榜公布后你之前用的临时数据可能就要替换成精确版本了。这种时候千万别重新复制整个Prompt再让AI从头生成一遍效率太低而且可能把之前调好的样式又弄丢了。正确做法是在AI的对话窗口里直接追加一条新指令把新数据粘贴进去然后这样说我更新了数据请只修改图表代码里的数据区部分把旧的奖牌数据替换成我下面提供的这些新数据。其他样式、布局和配置保持不变。多数情况下AI只会更新你指定的数据区段周围的代码保持原样。这种持续对话而不是每次重新新开的工作方式是AI辅助编程效能提升的关键习惯也最贴近真实工作流。5.3 增强交互细节给图表加一点能点的东西纯静态图表在PPT里够用但如果这份看板是放在大屏上给领导看动态效果的我会再追加几个迭代指令给图表1加一个dataZoom组件让柱状图可以通过下方的滚动条滑动查看给两个图表都加上动画效果把animationDuration设为1500animationEasing设为cubicOut在大标题右侧加一个当前日期显示格式为2023年X月X日这些追加功能用自然语言描述即可AI会在原有代码基础上增量修改。不过要提醒一点如果追加了太多功能导致页面运行异常优先查看F12的Console报错常见的问题是在ECharts初始化时配置了不存在的组件名比如使用了未引入的dataZoom依赖。ECharts 5通过CDN引入的全量包这些组件默认都包含所以通常不至于出错但遇到问题先确认这个方向总没错。6. AI生成可视化的边界什么能依赖它什么必须自己守住6.1 AI会一本正经地编数据数据核验必须由你完成我前面反复强调数据要自己准备这里用实际例子说明原因。有一次我偷懒直接让AI生成2018年亚运会奖牌榜前10名柱状图它给了一组非常像样的数据排名和数量看起来都很合理。我拿公开资料一核对发现第7名、第9名的奖牌总数和真实数据对不上。大语言模型的训练数据里确实存在大量公开知识但它没有检索能力多数工具即便有联网功能默认也不开启它的回答本质上是在猜一个最可能的序列。所以记住这条铁律凡是展示数据一律以你确认过的数据源为准AI只负责代码和样式不负责数据真实性。6.2 代码也要审查能跑不代表逻辑正确AI生成的代码能运行不代表它准确实现了你的业务逻辑。举个例子它可能把金牌榜Top10实现成了总奖牌数Top10由于这个样例数据里韩国和日本的总奖牌数排序和金牌排序不完全一致图表呈现出来可能和你预想的按金牌排有细微出入。审查时重点看三样东西数据数组的顺序是否和你的要求一致比如是否做了降序序列series里的name字段和图例是否对应你提供的维度和指标tooltip里的格式化函数是否输出了正确的单位我在Prompt里写了按金牌数从高到低排序并且因为数据本身就是降序给出的AI没有绕弯。但你如果给出乱序数据又没强调排序AI很可能会保持你提供的原始顺序你需要根据业务需求逐项检查。6.3 别把敏感业务数据灌进公开AI工具这一点值得踩一脚刹车。AI工具在帮助你高效产出的同时也可能把输入内容纳入服务方的数据体系。你自己玩玩亚运会奖牌数据没问题但如果是公司内部销售数据、用户明细、未公开的经营指标都往公开AI对话框里贴这是有数据合规风险的。我的处理习惯是先在内部脱敏把字段改成代称、数值做偏移或者直接随机生成一组结构相似的数据等代码调通后再替换回真实数据。这一步不能省。6.4 审美天花板AI的初稿通常只是60分你要把它改到80分最后聊个软性但重要的事。AI生成的图表视觉上往往缺乏一种设计感。它能把所有配置项都摆到正确的位置但不会主动帮你考虑品牌色、字重层级、图表之间的间距节奏。你可能要追加好几轮把标题改成24px加粗两个图表之间加40px间距柱状图的圆角设为8px这类细节调整。这并非缺陷而是工具使用方式的区别——AI能快速替你完成从0到60分的搭建但从60到80分的审美打磨仍然需要你的判断力。善用反向提问也很有效比如让AI从视觉层级角度检查一下当前页面有什么问题它有时给出的改进建议会超出你的预期。整个方案跑通后我最大的体会是AI不是替你思考而是替你执行。它把从需求到代码之间那段最耗时的翻译过程压缩到了分钟级但需求定义、数据核验、审美判断这些事情反而变得更重要了。把这个Prompt存成自己的模板以后不管是换个城市数据、换个体育赛事还是整理部门月度业务指标你只需要替换数据区域和图表需求描述十分钟内产出一个能直接演示的看板页面是完全可行的。
1. 为什么我对AI自然语言生成可视化这件事态度转变了先说个真实场景。前阵子公司要出一份亚运会赛后的数据简报领导上午下的需求中午就要看到图表。搁以前我的流程是这样的先从公开数据源把奖牌榜、项目分布、参赛人数之类的数据扒下来整理成表格然后打开代码编辑器调ECharts的option配置为个颜色和间距折腾一个多小时最后导出截图放进PPT。这一套流程哪怕再熟练没有四十到六十分钟也下不来而且要懂点前端基础和JavaScript语法。但现在不一样了。我只需要把我想看什么用自然语言描述清楚剩下的HTML结构、图表初始化、ECharts配置、样式美化AI全部帮我写好。我实际测下来从数据准备到打开浏览器看到一张能交互的柱状图五分钟确实够用核心就是把Prompt写得足够精确并且知道怎么让AI迭代修改。这篇文章就把整个链路完整拆给你看包括我用的完整Prompt、运行调试的细节以及几次踩坑后的修正方法文中的方案主要面向运营、数据分析师和刚接触前端但想快速产出可视化页面的人有一定的编程基础会更好上手但即便完全零基础只要会复制粘贴文件一样能跑通。文章里我会以2023年杭州亚运会的公开奖牌数据为例因为近期亚运会相关的数据可视化需求在职场里确实高频用它做示例最有说服力。你完全可以把它当成模板换任何数据集都是一样的操作路径。我不打算给你铺一大堆可视化是什么的背景知识直接进入正题从准备数据开始说起。2. 动手之前的准备数据、工具和需求清单2.1 确保你手里的数据是干净的很多人一上来就急着打开AI对话框这是错误的第一步。AI大模型本身的训练数据里确实会有一些亚运会相关的历史数据但它很可能记错、记混尤其是涉及具体国家/地区的奖牌数和项目分类时幻觉概率一点不低。我的原则是所有展示数据必须由我自己确认过再喂给AI绝不让AI从记忆里猜。这里以杭州亚运会公开可查的奖牌榜Top10数据为例整理成一份最简单的结构你直接复制就好排名国家/地区金牌银牌铜牌总数1中国191119883982日本5267691883韩国4259891904印度2838411075乌兹别克斯坦221831716伊朗202128697中国台北192028678泰国121432589巴林10361910哈萨克斯坦9212757这份数据不需要多复杂够用来做一张柱状图和一张堆叠条形图就行。如果你的数据源是Excel或CSV我建议在喂给AI之前就整理成这种Markdown表格或JSON数组的形态而不是丢一个文件名过去。AI工具多数时候没法直接读你本地的Excel你贴文字内容它才能理解。当然ChatGPT的付费版和Claude的高级版支持附件上传但为了流程通用我统一采用直接粘贴文字数据的方式。2.2 选哪种AI工具、用什么姿势问最稳可选的对话型AI工具有很多像ChatGPT、Claude、国内的文心一言、通义千问、Kimi之类都可以完成这个任务。实测下来针对生成ECharts前端页面这类任务我优先推荐Claude和ChatGPT代码生成质量和一次通过率相对更高国内大模型的效果也在快速追赶如果访问方面有考量用国内产品完全可行只是个别样式细节可能需要多几轮调整。一个容易被忽略的关键点是同一套Prompt在不同工具里表现会有差异这和模型对HTML代码的理解侧重有关。所以如果你在某个工具里生成出来的页面打开是白的先别怀疑Prompt写得不好换个工具或者换个大模型版本再试一次很可能就正常了。我在文中演示的Prompt在多数主流大模型上都能出可用结果你完全可以先按现成的跑一遍。2.3 说清楚你要做哪张图比随便看看更有用在打开AI对话框之前先花30秒想清楚最终要产出的图表长什么样。哪个维度的数据是主角用柱状图还是折线图需要几个图表组合要不要加数据筛选交互比如我这篇文章的目标就很明确第一张图展示金牌数Top10国家/地区的对比用横向柱状图按金牌数降序排列第二张图展示Top6国家/地区的金、银、铜牌构成用堆叠条形图或分组柱状图页面整体风格深色科技感适合投在大屏或PPT里这个需求清单就是Prompt的骨架。不要指望AI能替你定义清楚你想要的图表语义——它能帮你写代码但没法帮你做业务上的思考。你想清楚一分钟后面能省十分钟调试时间。3. 核心环节把需求翻译成Prompt为什么每个句子都不能省3.1 完整Prompt直接给到拿走即用下面这一段就是我这篇文章完整跑通的Prompt你直接复制使用即可你是一名资深的前端数据可视化工程师精通HTML5、CSS3和ECharts。请根据我提供的数据生成一个完整的、可直接在浏览器中运行的HTML文件单文件模式所有样式和脚本内联不依赖本地任何文件。 【页面目标】 制作一个亚运会奖牌数据看板包含2张图表整体使用深色科技感风格背景色为深蓝渐变标题文字为白色适合大屏展示。 【数据】 以下为第19届杭州亚运会部分国家/地区奖牌数据金牌、银牌、铜牌、总数 中国 191 119 88 398 日本 52 67 69 188 韩国 42 59 89 190 印度 28 38 41 107 乌兹别克斯坦 22 18 31 71 伊朗 20 21 28 69 中国台北 19 20 28 67 泰国 12 14 32 58 巴林 10 3 6 19 哈萨克斯坦 9 21 27 57 【图表1要求】 横向柱状图展示金牌数量Top10国家/地区。要求按金牌数从高到低排序柱体使用渐变色从金色到橙色显示数据标签图表标题为“亚运会金牌榜TOP10”。 【图表2要求】 堆叠条形图展示排名前6的国家/地区金、银、铜牌构成。要求使用不同的颜色区分金、银、铜三种奖牌显示图例和图例位置在顶部居中数值标签显示在柱体内部图表标题为“奖牌构成分布TOP6”。 【布局与交互要求】 两个图表上下排列宽度自适应容器宽度100%每个图表高度不低于420像素。图表tooltip需完整显示国家/地区名称、各类奖牌数量和总数。页面上方添加一个大标题“第19届亚运会奖牌数据看板”以及一行说明文字“数据来源公开赛事数据整理”。 【输出要求】 直接输出完整的HTML代码不要输出解释性文字。代码中注释清晰CSS部分对关键样式加注释JS部分说明每个图表的配置要点。请使用ECharts的CDN链接https://cdn.jsdelivr.net/npm/echarts5/dist/echarts.min.js引入ECharts。所有中文文本确保使用UTF-8编码正常显示。看出这段Prompt和随口一句帮我做个亚运会图表的区别了吗区别非常大。它不是一句模糊的自然语言请求而是一份结构化需求文档。下面我把每一段的用意拆开讲这样你就能举一反三地改写成自己的任务。3.2 Prompt的结构拆解角色、数据、布局、输出约束第一段先设定角色你是一名资深的数据可视化工程师。这么做不是玄学而是利用了对话模型对角色提示非常敏感的特性。给模型一个明确的资深工程师人设它生成的代码在规范性上明显强于不给定位的版本——变量命名、注释习惯、ECharts配置书写方式都会更接近有经验的开发者而不是像新手教程里那种能跑但极其粗糙的写法。紧接着是页面目标和样式基调深色科技感、深蓝渐变、大屏展示。ECharts默认的主题是白底黑字如果不指定风格AI大概率生成一个普通的白色页面。你直接说清楚深色背景、白色文字、大屏风格它就会在option里主动配置好深色背景和适配的主题色省去后续手动调样式。数据部分为什么要用中国 191 119 88 398这样一行一条的格式而不是塞一个长长的JSON数组因为这种结构对人来说是表格对模型来说也足够简单清晰解析不容易出错。数据行数和字段都一目了然模型在处理时会把每一行对应成一条记录而不是在复杂嵌套结构里丢失字段。图表要求拆成两张图分别说明是另一个关键技巧。如果只说做一个奖牌看板模型不知道哪张图更重要、哪张图放上面、具体展示哪个字段。我明确指定了图表1用横向柱状图实现金牌Top10、图表2用堆叠条形图展示前6名奖牌构成并且补充了排序要求、颜色渐变、数据标签、图例位置这些细节。你越细致返回结果越不用返工。最后一段输出要求同样重要。我明确要求直接输出完整的HTML代码不要输出解释性文字这能防止AI在代码前后添加一大段以下是根据您的需求生成的代码这类废话。同时指定了ECharts的CDN来源和单文件模式这决定了你拿到的是一个可以直接保存运行的独立HTML文件而不需要额外安装Node包或构建工具。提示不建议把帮我调整一下颜色这类开放式修改放在同一个Prompt里。一次只完成一项任务让AI先产出基础版本再通过后续对话迭代成功率会高得多。4. 完整执行流程从Prompt到页面运行的全过程记录4.1 第一次运行用它生成的HTML文件直接浏览器打开把上面那段Prompt粘贴到AI对话框并提交等它输出代码。以我的实测经验Claude和ChatGPT通常会在几十秒内返回一整个HTML文件大约300到500行不等包含完整的HTML结构、CSS样式和两个ECharts图表的JS初始化代码。现在你需要在电脑上建一个文件夹比如叫yayun-dashboard在里面新建一个文本文件把AI返回的代码全部粘贴进去保存时文件名写成index.html。注意保存的编码格式Windows自带的记事本默认可能是GBK编码如果页面上的中文变成乱码要在另存为对话框里把编码改成UTF-8再保存。这一步很关键等你在浏览器里看到满屏乱码再反应就晚了。保存完成后双击打开这个HTML文件你的默认浏览器会加载它。正常情况下你应该能看到一个深蓝色背景的页面顶部是第19届亚运会奖牌数据看板标题下方依次是金牌榜Top10横向柱状图、奖牌构成堆叠条形图。如果一切正常五分钟的承诺已经兑现了——但你大概率还需要解决下面这些常见问题。4.2 页面空白、图表不显示的排查链路我第一次跑这个方案的时候双击文件之后页面是全白的控制台报错ECharts is not defined。原因是官方CDN在那个网络环境下的加载超时了。遇到这种情况排查思路按顺序走打开浏览器的开发者工具F12切到Console标签页看有没有红色的报错信息如果报错指向echarts.min.js加载失败说明CDN路径不可达换一个CDN源就行常用的备选CDN有等也可以在页面中配置多个script标签做fallback但注意别重复初始化ECharts还有一种典型的图表区域空白页面背景和标题都显示正常但图表所在区域一片空白。这时候多半是容器高度的问题。ECharts在初始化时如果发现挂载它的DOM元素高度为0图表就不会渲染出来。我在Prompt里专门写了每个图表高度不低于420像素就是为了规避这个问题但AI偶尔会漏掉检查一下html里的chart容器是不是设置了height: 420px这类的样式如果没设置手动加上即可。4.3 为什么推荐用VSCode Live Server而不是直接双击双击打开也能看但这里有一个体验上的坑本地文件直接打开时ECharts的代码通常没问题但一旦涉及后续通过fetch或XMLHttpRequest请求外部数据比如把数据放到JSON文件里浏览器会拦截本地跨域请求导致页面数据加载不出来。如果你想在这个项目上继续迭代我建议换成VSCode配Live Server插件理由有三个通过本地服务器访问页面后续即使加了数据请求功能也不会跨域报错页面改动保存后浏览器自动刷新省去手动刷新的重复动作在浏览器里用F12调试绝对比反复双击文件顺畅得多操作步骤也不复杂下载安装VSCode在扩展市场里搜索Live Server并安装然后用VSCode打开你存放index.html的那个文件夹右键点击HTML文件选择Open with Live Server浏览器会自动打开一个http://127.0.0.1:5500/index.html的地址。这个过程不需要懂Node或npm照做即可。5. 生成之后还要调试一些AI不会主动告诉你的优化细节5.1 深色主题下的视觉协调背景、文字、坐标轴AI一次生成的图表视觉上往往是能看但不精致。比如深色背景下的坐标轴文字颜色它可能默认用了深灰色和背景融在一起看不清。我的习惯是在拿到底稿后打开开发者工具看看当前option里这些字段的实际表现xAxis.axisLabel.color坐标轴文字的字体颜色 yAxis.axisLabel.color另一个维度的坐标轴文字颜色 legend.textStyle.color图例文字颜色 tooltip.backgroundColor / textStyle提示框的背景色和文字色对于深色背景的页面一套我常用的配色方案是坐标轴文字用rgba(255,255,255,0.75)图例文字用白色tooltip背景用rgba(0,0,0,0.8)带一点边框色。你完全可以在后续对话里把这段需求直接发给AI说把坐标轴文字改为rgba(255,255,255,0.75)图例文字改为白色tooltip背景改为半透明黑色它改起来很快比自己在代码里翻选项要高效。但前提是你得知道这些配置项叫什么。这里给零基础的朋友一个速成思路ECharts的所有视觉细节都是由option对象控制的你不需要背配置项只需要能描述哪里不好看然后让AI把它翻译成配置项。5.2 数据更新时别重新生成整个页面学会在对话里局部修改在职场里数据变动是最常见的事。亚运会最终奖牌榜公布后你之前用的临时数据可能就要替换成精确版本了。这种时候千万别重新复制整个Prompt再让AI从头生成一遍效率太低而且可能把之前调好的样式又弄丢了。正确做法是在AI的对话窗口里直接追加一条新指令把新数据粘贴进去然后这样说我更新了数据请只修改图表代码里的数据区部分把旧的奖牌数据替换成我下面提供的这些新数据。其他样式、布局和配置保持不变。多数情况下AI只会更新你指定的数据区段周围的代码保持原样。这种持续对话而不是每次重新新开的工作方式是AI辅助编程效能提升的关键习惯也最贴近真实工作流。5.3 增强交互细节给图表加一点能点的东西纯静态图表在PPT里够用但如果这份看板是放在大屏上给领导看动态效果的我会再追加几个迭代指令给图表1加一个dataZoom组件让柱状图可以通过下方的滚动条滑动查看给两个图表都加上动画效果把animationDuration设为1500animationEasing设为cubicOut在大标题右侧加一个当前日期显示格式为2023年X月X日这些追加功能用自然语言描述即可AI会在原有代码基础上增量修改。不过要提醒一点如果追加了太多功能导致页面运行异常优先查看F12的Console报错常见的问题是在ECharts初始化时配置了不存在的组件名比如使用了未引入的dataZoom依赖。ECharts 5通过CDN引入的全量包这些组件默认都包含所以通常不至于出错但遇到问题先确认这个方向总没错。6. AI生成可视化的边界什么能依赖它什么必须自己守住6.1 AI会一本正经地编数据数据核验必须由你完成我前面反复强调数据要自己准备这里用实际例子说明原因。有一次我偷懒直接让AI生成2018年亚运会奖牌榜前10名柱状图它给了一组非常像样的数据排名和数量看起来都很合理。我拿公开资料一核对发现第7名、第9名的奖牌总数和真实数据对不上。大语言模型的训练数据里确实存在大量公开知识但它没有检索能力多数工具即便有联网功能默认也不开启它的回答本质上是在猜一个最可能的序列。所以记住这条铁律凡是展示数据一律以你确认过的数据源为准AI只负责代码和样式不负责数据真实性。6.2 代码也要审查能跑不代表逻辑正确AI生成的代码能运行不代表它准确实现了你的业务逻辑。举个例子它可能把金牌榜Top10实现成了总奖牌数Top10由于这个样例数据里韩国和日本的总奖牌数排序和金牌排序不完全一致图表呈现出来可能和你预想的按金牌排有细微出入。审查时重点看三样东西数据数组的顺序是否和你的要求一致比如是否做了降序序列series里的name字段和图例是否对应你提供的维度和指标tooltip里的格式化函数是否输出了正确的单位我在Prompt里写了按金牌数从高到低排序并且因为数据本身就是降序给出的AI没有绕弯。但你如果给出乱序数据又没强调排序AI很可能会保持你提供的原始顺序你需要根据业务需求逐项检查。6.3 别把敏感业务数据灌进公开AI工具这一点值得踩一脚刹车。AI工具在帮助你高效产出的同时也可能把输入内容纳入服务方的数据体系。你自己玩玩亚运会奖牌数据没问题但如果是公司内部销售数据、用户明细、未公开的经营指标都往公开AI对话框里贴这是有数据合规风险的。我的处理习惯是先在内部脱敏把字段改成代称、数值做偏移或者直接随机生成一组结构相似的数据等代码调通后再替换回真实数据。这一步不能省。6.4 审美天花板AI的初稿通常只是60分你要把它改到80分最后聊个软性但重要的事。AI生成的图表视觉上往往缺乏一种设计感。它能把所有配置项都摆到正确的位置但不会主动帮你考虑品牌色、字重层级、图表之间的间距节奏。你可能要追加好几轮把标题改成24px加粗两个图表之间加40px间距柱状图的圆角设为8px这类细节调整。这并非缺陷而是工具使用方式的区别——AI能快速替你完成从0到60分的搭建但从60到80分的审美打磨仍然需要你的判断力。善用反向提问也很有效比如让AI从视觉层级角度检查一下当前页面有什么问题它有时给出的改进建议会超出你的预期。整个方案跑通后我最大的体会是AI不是替你思考而是替你执行。它把从需求到代码之间那段最耗时的翻译过程压缩到了分钟级但需求定义、数据核验、审美判断这些事情反而变得更重要了。把这个Prompt存成自己的模板以后不管是换个城市数据、换个体育赛事还是整理部门月度业务指标你只需要替换数据区域和图表需求描述十分钟内产出一个能直接演示的看板页面是完全可行的。
