快速开始

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

前置准备:

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

添加图表区块

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

clipboard-image-1761554593

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

clipboard-image-1761554709

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

clipboard-image-1761554848

配置数据查询

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

  • 首先选择数据源与集合

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

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

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

clipboard-image-1761555060

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

运行查询并查看数据

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

clipboard-image-1761555228

配置图表选项

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

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

clipboard-image-1761555586

预览与保存

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

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

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

clipboard-image-1761555803

常见注意点

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