让 Agent 用自然语言生成 echarts 图表

结论先放:想让用户用一句话画个上半年销量柱状图就出图,最稳的路子:别让模型直接吐图片,让它生成一段 echarts 的 option 配置 JSON,前端拿去渲染。我这么干之后,出图准、可交互、还能改。下面是实操。思路模型不擅长直接画图,但很擅长写结构化的 JSON。echarts 的图表本质就是一个 option 对象。所以链路是:用户说画个柱状图,横轴月份纵轴销量后端先把对应的数据查出来把数据 用户意图喂给模型,让它吐一段 echarts option前端myChart.setOption(option)渲染模型只管生成配置,数据由代码可靠地准备好,各管一段。关键:别让模型同时编数据我犯过的最大错误,是把查数据和生成图表揉给模型一起干。结果模型为了图表好看,把销量数字给我编圆润了——明明真实数据是 3271,它生成的 option 里写了个 3000。改法:数据必须由代码查好,作为既定事实喂给模型,模型只负责把数据填进 option 结构里,一个数字都不许动。prompt 里我专门强调了这句:以下是已查询好的真实数据,请严格使用,不得修改任何数值: { 月份: [1月,2月,3月,4月,5月,6月], 销量: [3271, 2980, 4102, 3855, 5021, 4760] } 请生成 echarts 柱状图的 option 配置,JSON 格式, xAxis 用月份,yAxis 用销量,只输出 JSON,不要解释。模型回我的就是一段能直接 setOption 的配置:{ xAxis: { type: category, data: [1月,2月,3月,4月,5月,6月] }, yAxis: { type: value }, series: [{ type: bar, data: [3271, 2980, 4102, 3855, 5021, 4760] }] }落地我是在一个能拖低代码工作流的平台上搭的:第一个节点查数据,第二个节点让模型生成 option,出口把这段 JSON 返给前端。前端那边固定一个渲染容器,拿到 JSON 就 setOption。换图表类型(柱状改折线)也简单,改下 prompt 里那句类型描述就行,模型自己会调整 series.type。两个踩过的坑坑一:模型爱画蛇添足。不加约束的话,它会自作主张加一堆 title、legend、tooltip 的花活,有时还把字段名拼错导致渲染报错。我在 prompt 里写死只输出我要的 xAxis/yAxis/series 三块,其余别加,出错率才降下来。坑二:JSON 里混进解释文字。模型偶尔会在 JSON 前后带一句好的,这是您要的配置,前端 JSON.parse 直接崩。我的处理是用正则把第一个{到最后一个}抠出来再 parse,加了这道兜底就稳了。收尾这套跑顺之后,运营自己用大白话就能让 Agent 出图,不用再找前端排期。遗憾是复杂图表(双轴、堆叠、混合类型)模型生成的 option 还不够稳,大概七八成能一次画对,剩下的得人工修配置。简单的柱状、折线、饼图基本免修。模型那层我直接用讯飞星辰的大模型 API,现成服务调用,没自建算力,把心思都放在打磨这套数据归代码、配置归模型的分工上了。