logologo
开始
手册
开发
插件
API
English
简体中文
开始
手册
开发
插件
API
English
简体中文
logologo
概述
快速开始

功能介绍

数据查询
图表选项
预览与保存
使用上下文环境变量
页面筛选器与联动

进阶

SQL 模式查询数据
自定义图表配置
自定义交互事件
常见问题
最佳实践
Previous Page概述
Next Page数据查询

#快速开始

让我们从零开始配置完成一个图表,会用到基础必要的功能,更多可选能力在后续章节展开。

前置准备:

  • 已配置好数据源与集合(数据表),并具有读取权限。

#添加图表区块

在页面设计器 点击“添加区块”,选择“图表”,添加一个图表区块。

clipboard-image-1761554593

添加后,点击区块右上角“配置”。

clipboard-image-1761554709

右侧打开图表的配置面板。包含 数据查询、图表选项、事件 三个部分。

clipboard-image-1761554848

#配置数据查询

在”数据查询“面板,可以配置数据源、查询过滤条件等。

  • 首先选择数据源与集合

    • 在“数据查询”面板选择数据源与集合作为查询基础。
    • 集合不可选或为空,优先检查是否已创建与当前用户权限。
  • 配置度量(Measures)

    • 选择一个或多个数值字段作为度量。
    • 为每个度量设置聚合:Sum / Count / Avg / Max / Min。
  • 配置维度(Dimensions)

    • 选择一个或多个字段作为分组维度(日期、品类、地区等)。
    • 日期/时间字段可设置格式(如 YYYY-MM、YYYY-MM-DD),便于统一展示。

clipboard-image-1761555060

其他条件:筛选、排序、分页 是可选的。

#运行查询并查看数据

  • 点击“运行查询”,会请求数据,并渲染预览图表(左边页面中直接预览)。
  • 可以点击 “查看数据” 预览返回的数据结果,支持切换 Table/JSON 格式。再次点击则收起数据预览。
  • 数据结果为空或不符合预期时,回到查询面板检查集合权限、度量/维度的字段映射与数据类型。

clipboard-image-1761555228

#配置图表选项

在“图表选项”面板,可以选择图表、配置图表选项。

  • 首先选择图表类型(折线/面积、柱状/条形、饼/环形、散点等)。
  • 完成核心字段映射:
    • 折线/面积/柱状/条形:xField(维度)、yField(度量)、seriesField(系列,可选)
    • 饼/环形:Category(分类维度)、Value(度量)
    • 散点:xField、yField(两个度量或维度)
    • 更多图形等更多配置可以参考 Echarts 文档 Axis
  • 前面点击”运行查询“后,字段映射默认会自动完成;变更维度/度量后请重新确认映射。

clipboard-image-1761555586

#预览与保存

配置的修改会默认自动实时更新预览,在左侧页面中可以查看图表。但是请注意在点击“保存”按钮前,所有的修改并没有被真的保存。

你也可以点击底部的按钮:

  • 预览:配置修改会自动实时刷新预览,你也可以点击底部“预览”按钮手动触发刷新。
  • 取消:如果当前的修改配置你不想要了,可以点击底部”取消“按钮,或刷新页面,则会撤销本次修改 回退到上次保存的状态。
  • 保存:点击“保存”将当前所有查询与图表配置真正保存到数据库中,对所有用户生效。

clipboard-image-1761555803

#常见注意点

  • 最小可用配置:选择集合 + 至少一个度量;建议添加维度便于分组展示。
  • 日期维度建议设置合适格式(如按月统计选择 YYYY-MM),避免横轴不连续或错乱。
  • 查询为空或图表未显示:
    • 检查集合/权限与字段映射;
    • 在“查看数据”确认列名与类型是否匹配图表映射。
  • 预览是临时态:仅用于验证与调整,点击“保存”后才会正式生效。