You need to enable JavaScript to run this app.
导航
参考:智能分析Agent OpenAPI 图表消费说明
最近更新时间:2025.10.09 17:39:33首次发布时间:2025.10.09 17:35:37
复制全文
我的收藏
有用
有用
无用
无用

使用OpenAPI方式进行数据查询时,您可以设置查询结果返回的图表格式(imageFormat参数),本文为您介绍不同类型的图表返回结果如何解析使用。

背景信息

在数据查询OpenAPI中,您可以设置imageFormat参数设置查询结果的图表格式,支持设置为:

返回图表格式类型

返回结果格式说明

适用场景

image_url

返回的是静态图片的 url 地址。

PC 端快速消费(无法交互),不做任何二次开发。

lark_fragment(推荐)

飞书格式富文本,返回结果是飞书原生片段格式。

飞书端消费,通过卡片等格式消息推送可交互图表,需要较少的二次开发

ark_image_key

飞书图片key,返回结果是飞书静态图片格式。

飞书端消费,通过卡片等格式消息推送静态图表图片(无法交互),需要较少的二次开发

vchart_schema

返回结果是 vchart 和 vtable 图表原生格式。

PC 端消费,需要较多的二次开发
返回的图表不是静态图片,而是可交互的真实图表,也可以自定义样式主题或数值格式化

运行数据查询OpenAPI后的返回结果中,charts字段即为返回的推荐图表列表,当前最多返回top4图表,即最符合场景的4个图表,优先推荐顺序是从上到下,即第一个是最推荐的。您可以通过设置入参 maxImageNumber 修改返回 topN图表数量。
Image

说明

当前支持的图表类型包括折线图、柱状图、饼图等多种类型,更多关于支持的图表类型和使用实践可参见最佳实践:支持的图表类型与使用实践

图表结果解析消费

image_url格式

当 OpenApi 传入的入参 imageFormat 为"image_url"时,返回图表为静态图片 url 地址格式,您可直接消费图片链接即可,无需其他处理。

lark_fragment格式

  • 返回结果示例:
    当 OpenApi 传入的入参 imageFormat 为"lark_fragment",返回图表为飞书原生片段格式,示例如下:
    Image

  • 消费使用:OpenAPI返回的 larkFragment 只是一个飞书原生片段,如果您希望最终展示在飞书应用中是消息卡片的样式,您需要将 OpenAPI 返回的 larkFragment 封装在此结构里。

    {
      "header": {
        "template": "blue",
        "title": {
          "content": "示例",
          "tag": "plain_text"
        }
      },
      "elements": [
        charts[0].larkFragment // dataagent OpenApi 返回图表内容
      ]
    }
    

    封装后的展示效果示例:
    Image

lark_image_key

  • 返回结果示例:
    当 OpenApi 传入的入参 imageFormat 为"lark_image_key",返回图表为飞书图片格式,示例如下:
    Image

  • 消费使用:OpenAPI返回的 imageLarkKey 只是一个飞书 image_key,如果您希望最终展示在飞书应用中是消息卡片的样式,您需要将 OpenAPI 返回的 larkFragment 封装在此结构里。

    {
        "header": {
            "template": "blue",
            "title": {
                "content": "lark_image_key 测试",
                "tag": "plain_text"
            }
        },
        "elements": [
            {
                "tag": "img",
                "img_key": charts[0].imageLarkKey, // dataagent OpenApi 返回图表内容
                "alt": {
                    "tag": "plain_text",
                    "content": "柱状图"
                }
            }
        ]
    }
    

    封装后的展示效果示例:
    Image

vchart_schema

当 OpenApi 传入的入参 imageFormat 为“vchart_schema”,返回图表为 vchartvtable 图表原生格式,业务的前端开发需要根据返回的 chartType,安装 vchartvtable 组件库实现真实渲染。各类图表的示例如下。

图表类型

OpenAPI返回结果示例

消费使用示例

饼图

Image

  1. 复制返回的 vchartSchema 内容
  2. 前端通过 vchart 消费

您可以通过 测试地址 对返回结果进行测试解析,消费结果示例如下。
Image

柱状图

Image

  1. 复制返回的 vchartSchema 内容
  2. 前端通过 vchart 消费

您可以通过 测试地址 对返回结果进行测试解析,消费结果示例如下。
Image

指标卡

暂无

  1. 复制返回的 vchartSchema 内容
  2. 前端通过 DOM 实现,没有依赖开源库

折线图

Image

  1. 复制返回的 vchartSchema 内容
  2. 前端通过 vchart 消费

您可以通过 测试地址 对返回结果进行测试解析,消费结果示例如下。
Image

双轴图

Image

  1. 复制返回的 vchartSchema 内容
  2. 前端通过 vchart 消费

您可以通过 测试地址 对返回结果进行测试解析,消费结果示例如下。
Image

组合图

Image

  1. 复制返回的 vchartSchema 内容
  2. 前端通过 vtable + vchart 消费

您可以通过 测试地址 对返回结果进行测试解析,消费结果示例如下。
Image

表格

Image

  1. 复制返回的 vchartSchema 内容
  2. 前端通过 vtable 消费

您可以通过 测试地址 对返回结果进行测试解析,消费结果示例如下。
Image