让 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,现成服务调用,没自建算力,把心思都放在打磨这套"数据归代码、配置归模型"的分工上了。