先说个结论单纯做一张可用的数据可视化我现在基本都是先把需求扔给AI让它生成代码我再花两分钟调样式和数据。整个过程很少超过5分钟尤其像亚运会这种赛事数据的临时看板非常吃这个流程。传统做法是打开编辑器从零写Echarts配置、查文档、改参数、刷新页面半天过去可能还在调坐标轴。但用自然语言描述需求配上一份结构合理的PromptAI能在几十秒内给你生成一套可运行的HTMLEcharts可视化页面你要做的只是复制、粘贴、运行。这篇文章会把整套流程拆开讲包括我整理好的Prompt模板、亚运会数据示例、常见报错和解决思路。无论你是开发者、数据分析师还是只想快速出一张图表的产品运营都能直接抄作业。1. 整体设计与思路拆解1.1 为什么用“自然语言 AI”做可视化过去我们做数据可视化至少要过三关。第一关是数据数据从哪来、要清洗成什么格式第二关是图表选型对比图用柱状还是条形趋势图用折线还是面积第三关是实现写代码、调样式、部署页面。对很多非前端同学来说第三关最劝退。AI把第三关变成了对话。你用自然语言把你的需求讲清楚比如“画一个各竞赛项目的总奖牌数柱状图按从高到低排序颜色渐变”AI就会生成对应的Echarts代码。这不等于完全不需要人工能力相反它对前两关的要求更高了。因为你必须知道自己要表达什么并且能判断AI输出的结果对不对。但门槛确实降了一大截这也是我建议每个人都把Prompt工程捡起来的原因。用AI做可视化本质上不是“让AI替你思考”而是“你把思考结果用语言表达清楚后让AI执行”。语言表达越精准执行偏差就越小。1.2 技术方案选型Echarts Flask是稳妥组合做Web端数据可视化市面上选择很多。Matplotlib适合数据分析阶段的探索图表但交互能力弱Tableau、PowerBI适合企业内部数据分析和报表但需要授权、不够灵活而到了网页端、大屏、看板这类场景Echarts是绕不开的主流方案。它图表类型丰富、交互默认就做得很好而且社区资料多、兼容性强。再配一个轻量的后端服务Flask是我这几年用得最顺手的选择。它不需要复杂配置几行代码就能起一个HTTP接口把数据从CSV或数据库里吐给前端。亚运会这类临时看板数据量不大、更新频率也不高FlaskEcharts足够能打。甚至很多企业级数据可视化项目内部原型也是这么搭的。这里顺手整理一张对比表方便你根据场景选型方案典型场景优点短板Matplotlib/Pandas数据分析、论文图表与Python生态无缝衔接出图快交互弱、不适合网页EchartsWeb看板、大屏图表丰富、交互强、社区活跃需要写前端代码Tableau企业BI报表拖拽操作、适合业务人员收费、部署重Flask Echarts轻量数据产品、原型逻辑清晰、灵活可控前后端复杂度高于纯静态本篇文章的核心演示我采用“单HTML文件内嵌Echarts CDN”的方式因为这样5分钟真的能跑通如果数据需要动态更新再把Flask加上我在第三部分会给出升级方案。1.3 为什么强调Prompt很多人在用AI干活时效果不稳定根源不是模型不行而是指令太含糊。同样的工具“帮我画个图”和“你是资深前端根据这份CSV生成一个包含三个Echarts图表的HTML页面数据内嵌、容器高度400px、只输出代码”产出质量天差地别。Prompt本质是把你的真实需求翻译成模型能准确执行的任务说明书。现在大家常说的Prompt工程做的就是这件事。这篇文章的核心资产就是后面的那份完整Prompt。它不是一句提示词而是一个可复用的模板你只需要替换数据、图表类型就能应用到任何数据可视化任务上。2. 核心细节解析与实操要点2.1 高可用Prompt的五个构成要素我在长期使用中总结出一份高可用Prompt至少包含五类信息。这五类不是可有可无而是不同维度上的约束要素说明示例角色设定告诉AI以什么身份回答问题你是一位资深前端工程师任务目标说明你要什么、给谁用生成亚运会赛事数据看板页面数据输入把数据结构化嵌入Prompt使用CSV数据字段如下...输出格式限定输出的载体和形态只输出完整HTML代码不使用Markdown包裹功能约束明确图表类型、样式、技术要求用Echarts 5容器高度400px中文字体为什么角色设定有用因为模型在生成回复时会尽量贴合给定身份的知识体系。你说它是前端工程师它就更倾向输出带样式的HTML你说它是数据分析师它可能先用文字分析图表。任务目标要包含使用场景比如“给运营同学做临时看板”模型就能在配色和图表类型上更贴近业务。输出格式往往决定你能否直接复制执行。功能约束是避免它自由发挥的后门。2.2 三个容易被忽略的Prompt陷阱实践中我踩过不少坑这里挑三个最常见的。一个是“只有需求没有格式”。比如问“帮我画一个亚运会项目数据图表”AI可能输出一段分析文字甚至Markdown表格而不是可运行代码。解决办法是命令式地写上“只输出完整HTML代码”。第二个是“数据格式混乱”。有些同学把Excel截图塞进PromptAI没法拿到结构化内容。正确做法是转为CSV或JSON最好先聚合到几十行以内。第三个是“忘记限制容器高度”。Echarts图表很容易出现“渲染了但看不见”的情况因为外层div高度为0。在Prompt里加上“容器固定高度400px”能省去不少排查时间。这些坑看起来小但在5分钟流程里任何一个都会让时间翻倍。所以模板里我已经为你避开了。2.3 亚运会数据可视化场景的Prompt模板可直接复制下面这份模板是我实际测试后固定下来的版本。数据我用的是亚运会赛事的基础统计信息设计上避免了代表团排名这类容易带出敏感信息的内容纯粹展示比赛项目、场馆、日期和观赛数据。如果你手头有更合适的数据直接替换即可。你是一位资深前端工程师擅长用Echarts做数据可视化。 请根据以下亚运会赛事统计信息生成一个可运行的HTML页面。 要求 1. 页面标题为“亚运会赛事数据看板”使用中文。 2. 使用Echarts 5通过CDN引入jsdelivr上的echarts.min.js。 3. 页面中包含三个图表 - 柱状图展示各竞赛项目的总奖牌数量按总奖牌数从高到低排列 - 饼图展示各场馆举办的赛事场次占比 - 折线图展示每日比赛场次的变化趋势。 4. 图表布局采用Flexbox三张图并排一列每个图表容器高度固定为400px宽度自适应。 5. 数据直接写在HTML的script标签中不要从外部接口读取。 6. 只输出完整HTML代码不要任何解释说明不要用Markdown代码块包裹。 数据如下CSV格式 日期,项目,场次,观众人数,场馆,金牌,银牌,铜牌 2023-09-23,足球,2,26800,主体育场,1,1,0 2023-09-23,游泳,4,15200,游泳馆,6,4,5 2023-09-24,游泳,8,32800,游泳馆,8,8,8 2023-09-24,田径,6,42500,主体育场,6,6,6 2023-09-24,体操,4,9800,综合体育馆,4,4,4 2023-09-25,羽毛球,6,18200,综合体育馆,5,5,5 2023-09-25,乒乓球,4,10600,乒乓球馆,4,4,4 2023-09-25,篮球,6,36800,篮球馆,3,3,3 2023-09-26,举重,3,8500,举重馆,3,3,3 2023-09-26,击剑,5,7600,击剑馆,3,3,3这份Prompt特意让图表类型和字段一一对应AI不会猜错。如果你换成自己的数据也要把字段名和图表映射关系写清楚。比如“总奖牌数”就是金牌银牌铜牌加总“场馆赛事场次占比”就是按场馆汇总场次。2.4 数据预处理让AI稳定输出的关键技巧Prompt里嵌数据不是什么都能塞。大多数AI对话工具对单条消息长度有限制数据一多生成质量就会下降。所以给AI之前先做一次聚合。比如想看各项目总奖牌数就把每日明细按项目sum一下想看每日趋势就按日期sum。Excel透视表、Python的groupby都可以。import pandas as pd df pd.read_csv(asia_games_data.csv) daily df.groupby(日期)[场次].sum().reset_index() project_total df.groupby(项目)[[金牌, 银牌, 铜牌]].sum() project_total[总奖牌数] project_total.sum(axis1)然后只把聚合后的十几行数据放进Prompt这样AI生成代码时不容易出错输出也不会被截断。这也是为什么我说5分钟可以完成因为大部分时间其实在整理数据而不是等AI生成。3. 实操过程与核心环节实现3.1 准备工作数据、工具与目录结构我们先列一下需要准备的东西手里的AI对话工具ChatGPT、Claude或者国内产品都可以一个浏览器用于预览一个文本编辑器VS Code、Sublime Text都行可选Python环境如果后续要接Flask。目录结构建议这样asia_games_dashboard/ ├── data.csv # 原始数据可留档 ├── dashboard.html # AI生成的页面 └── app.py # 如果需要动态接口如果只是快速看效果只要data.csv和dashboard.html就够了。3.2 5分钟跑通完整流程分步演示第一步约1分钟整理CSV数据。把原始数据用Excel或Python聚合按上文的模板格式整理。字段名要清晰不要出现空值。这一步决定后续生成是否正确。第二步约1分钟复制Prompt并替换数据。将前面的模板整体复制在本地把CSV数据替换成你自己的数据。注意保持字段名一致AI才能正确识别。如果数据行数很多只保留聚合后的结果。第三步约2分钟把完整Prompt发给AI等它输出。生成后新建dashboard.html把AI给的代码粘贴进去并保存。如果AI返回的是Markdown代码块手动去掉首尾的三反引号。第四步约1分钟预览和微调。用浏览器直接打开dashboard.html检查图表是否显示。常见问题包括CDN加载失败、数据没渲染、柱状图排序不是降序。此时不需要重新生成可以直接在代码里调整sort函数或样式。3.3 从Prompt到代码AI生成结果示例为了让你知道最终效果长什么样我把AI生成后的一份代码做了精简保留核心结构和三张图。完整版你按模板就能得到这里只演示可运行的样子。!DOCTYPE html html langzh-CN head meta charsetUTF-8 title亚运会赛事数据看板/title script srchttps://cdn.jsdelivr.net/npm/echarts5.5.0/dist/echarts.min.js/script style html,body{margin:0;padding:0;font-family:Microsoft YaHei,sans-serif;background:#f4f6f9} h2{padding:16px 24px;margin:0;background:#0b6cff;color:#fff} .charts{display:flex;flex-wrap:wrap;gap:20px;padding:20px} .chart{width:calc(33.333% - 20px);height:400px;background:#fff;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.08)} media(max-width:900px){.chart{width:100%;height:360px}} /style /head body h2亚运会赛事数据看板/h2 div classcharts div idbar classchart/div div idpie classchart/div div idline classchart/div /div script var projectData [ {name:游泳, total:39}, {name:田径, total:18}, {name:羽毛球, total:15}, {name:乒乓球, total:12}, {name:体操, total:12} ]; var venueData [ {name:主体育场, count:8}, {name:游泳馆, count:12}, {name:综合体育馆, count:10} ]; var dailyData [ {date:09-23, count:6}, {date:09-24, count:18}, {date:09-25, count:16} ]; var bar echarts.init(document.getElementById(bar)); bar.setOption({ title:{text:各竞赛项目总奖牌数}, tooltip:{trigger:axis}, xAxis:{type:category, data:projectData.map(function(v){return v.name})}, yAxis:{type:value}, series:[{type:bar, data:projectData.map(function(v){return v.total}), itemStyle:{color:#0b6cff}}] }); var pie echarts.init(document.getElementById(pie)); pie.setOption({ title:{text:各场馆赛事场次占比}, tooltip:{trigger:item}, series:[{type:pie, radius:[40%,70%], data:venueData.map(function(v){return {name:v.name, value:v.count}})}] }); var line echarts.init(document.getElementById(line)); line.setOption({ title:{text:每日比赛场次变化}, tooltip:{trigger:axis}, xAxis:{type:category, data:dailyData.map(function(v){return v.date})}, yAxis:{type:value}, series:[{type:line, smooth:true, data:dailyData.map(function(v){return v.count}), areaStyle:{color:rgba(11,108,255,0.15)}}] }); /script /body /html这段代码体现了Echarts的主要用法初始化图表、配置option、setOption。CDN引入后div容器必须有明确高度否则初始化后也会空白。AI通常能正确生成但偶尔会把数据字段名写错你需要对着控制台检查。3.4 动态数据场景给Flask加上接口如果数据在比赛期间每天变化建议上一个轻量Flask服务。其实仍是同一个页面只是把数据从内嵌JS改成fetch(/api/data)Flask负责返回JSON。下面是一个可参考的app.pyfrom flask import Flask, render_template, jsonify import pandas as pd app Flask(__name__) app.route(/) def index(): return render_template(index.html) app.route(/api/data) def data(): df pd.read_csv(data.csv) daily df.groupby(日期)[场次].sum().reset_index() project df.groupby(项目)[[金牌, 银牌, 铜牌]].sum() project[总奖牌数] project.sum(axis1) return jsonify({ daily: daily.to_dict(orientrecords), project: project.reset_index().to_dict(orientrecords) }) if __name__ __main__: app.run(port5000, debugTrue)前端用fetch读取这个接口替换写死的data变量其他逻辑不变。这样就把5分钟静态看板升级成一个可以每天更新数据的小系统。很多企业级数据可视化、校园大数据看板项目底层逻辑都是这样演进出来的。3.5 时间线回顾5分钟花在哪时间段操作说明0-1分钟聚合数据用Excel/Python把明细变成图表需要的聚合表1-2分钟组装Prompt复制模板替换数据确认字段名2-3分钟AI生成代码粘贴Prompt等待几十秒拿到HTML3-4分钟保存与预览新建html粘贴代码浏览器打开4-5分钟微调与修复看控制台调排序、颜色、容器高度这个时间分布基本就是我的常态。如果你AI生成后没跑通通常不是AI的问题而是数据没聚合好或漏看输出格式。4. 常见问题与排查技巧实录4.1 AI返回的是解释不是代码怎么办你发了一句“帮我画图”它回了一堆建议很正常。这时候在Prompt里加一句“只输出完整HTML代码不要解释不要使用Markdown代码块包裹”它就会照做。如果还是不听就追问“把上面这段描述变成可直接运行的HTML所有数据内嵌不要解释。”我实测这个操作基本100%有效。4.2 Echarts图表不显示页面一片空白很多新手第一次遇到第一反应是删除重来。其实按三步查就行。第一步按F12打开浏览器控制台看有没有红色报错。如果有通常是变量没定义或容器ID对不上。第二步在Network面板看echarts.min.js是否成功加载。如果状态码是红色把CDN链接换成https://cdn.jsdelivr.net/npm/echarts5/dist/echarts.min.js或本地文件。第三步检查每个图表div是否设置了高度。没有高度Echarts只会在console里提示“Cant get DOM width or height”。把这三步走完90%的问题能定位。4.3 收到“invalid prompt”或会话中断怎么办有些同学把Prompt写得太长或者夹带了一些模型不愿处理的内容。如果你收到类似“invalid prompt: your prompt was flagged as potentially violating our usage p”的提示说明请求被内容安全机制挡住了。解决思路很简单把请求描述得尽量技术化、业务化删掉所有可能越界的表达。比如把任务聚焦在“根据CSV生成HTML图表”少说无关的背景。另外超长Prompt也可能导致会话异常尤其是手机端直接分段粘贴可以避免。4.4 生成的图表类型和预期不符AI默认会选柱状图但你可能想要散点或雷达图。解决办法是别让它选直接在Prompt的约束里写清楚“第一个图用柱状图第二个图用饼图”。如果生成后还是不对就用追加指令“把饼图改成南丁格尔玫瑰图其他不动。”追加修改比重新生成一版更省时间。4.5 数据直接写死在页面里想动态更新怎么办回到第3.4节加一个Flask接口就够了。前端只需要把写在data里的内容换成fetch调用。AI可以帮你完成这部分改动但你需要把新的接口代码也发给它“请把以上HTML中的data改为从/api/data接口获取数据格式为JSON包含project和daily两个字段。”这种迭代式Prompt我在实践中用得最多。4.6 常见问题速查表问题原因解决方案AI输出解释而非代码指令中缺少格式约束增加“只输出完整HTML代码不要解释”页面空白容器高度为0/CDN加载失败设置图表容器高度检查Networkinvalid prompt请求内容触发安全机制删除越界表达聚焦技术任务图表类型不符没有指定图表类型在Prompt中明确或追加修改指令数据量过大被截断Prompt过长或过多先聚合数据只把图表所需摘要给AI这张表建议收藏。每次5分钟流程卡住先对照它找原因不要急着重新生成。5. 扩展方向从“5分钟看板”到“AI Agent工作流”5.1 我踩过的坑别把AI输出当成终版用AI做可视化久了我最大的体会是AI生成的是初稿不是终稿。它经常忽略业务背景比如你明明想突出观众人数峰值它却把金牌总量当主角。所以我会把数据、业务目标先想清楚再让AI执行。另外一次生成整个看板很容易出错不如分三步先让它生成一个图表跑通了再追加第二张。这个习惯让我的时间从10分钟缩短到5分钟。5.2 当AI Agent遇上数据可视化现在很多人把AI Agent挂在嘴边简单理解就是让模型不只做对话而是能调用工具完成任务。放到可视化场景里未来你只要说一句“分析亚运会比赛期间的观众人数趋势自动生成一份HTML报告”Agent会自己完成数据读取、清洗、选图、写代码、部署的全流程。Prompt工程仍然是Agent的地基——你描述目标的准确度决定了Agent执行的质量。所以即使工具再升级今天这篇的Prompt方法论也不会过时。5.3 同样的流程换到别的数据上不管是企业级数据可视化、校园大数据看板还是农产品价格数据可视化这套流程都可以复用。换数据、换图表约束、换标题一份通用Prompt模板就搞定了。我经常接到这类临时需求已经把它沉淀成自己的模板库遇到新数据改几个字段就交付。比如农产品价格把CSV换成日期,品类,市场,价格,销量图表换成折线图展示日均价、柱状图展示各市场销量、地图展示产地分布。步骤完全一致。最后再分享一个习惯每次拿到AI生成的代码我都会顺手在网页标题、配色、单位上改两笔让看板带有明确业务语义。这个动作看起来小但决定了它是“AI作品”还是“你的作品”。你越能在自然语言里把需求说清楚AI给你的初稿就越接近能用。5分钟做完一张图不是上限只是起点——把这份Prompt存进自己的笔记下次换数据就直接用你会回来感谢自己的。