---
title: "数据可视化快速开始"
description: "从零配置图表：添加图表区块、配置数据查询（度量/维度）、运行查询、字段映射、预览与保存，5 步完成首个可视化面板。"
keywords: "数据可视化快速开始,图表配置,度量,维度,字段映射,快速入门,NocoBase"
---

# 快速开始

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

前置准备：
- 已配置好数据源与集合（数据表），并具有读取权限。

## 添加图表区块

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

![clipboard-image-1761554593](https://static-docs.nocobase.com/clipboard-image-1761554593.png)

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

![clipboard-image-1761554709](https://static-docs.nocobase.com/clipboard-image-1761554709.png)

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

![clipboard-image-1761554848](https://static-docs.nocobase.com/clipboard-image-1761554848.png)

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

- 首先选择数据源与集合
  - 在“数据查询”面板选择数据源与集合作为查询基础。
  - 集合不可选或为空，优先检查是否已创建与当前用户权限。

- 配置度量（Measures）
  - 选择一个或多个数值字段作为度量。
  - 为每个度量设置聚合：Sum / Count / Avg / Max / Min。

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

![clipboard-image-1761555060](https://static-docs.nocobase.com/clipboard-image-1761555060.png)

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


## 运行查询并查看数据

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

![clipboard-image-1761555228](https://static-docs.nocobase.com/clipboard-image-1761555228.png)

## 配置图表选项

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

- 首先选择图表类型（折线/面积、柱状/条形、饼/环形、散点等）。
- 完成核心字段映射：
  - 折线/面积/柱状/条形：`xField`（维度）、`yField`（度量）、`seriesField`（系列，可选）
  - 饼/环形：`Category`（分类维度）、`Value`（度量）
  - 散点：`xField`、`yField`（两个度量或维度）
  - 更多图形等更多配置可以参考 Echarts 文档 [Axis](https://echarts.apache.org/handbook/en/concepts/axis)
- 前面点击”运行查询“后，字段映射默认会自动完成；变更维度/度量后请重新确认映射。

![clipboard-image-1761555586](https://static-docs.nocobase.com/clipboard-image-1761555586.png)

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

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

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

![clipboard-image-1761555803](https://static-docs.nocobase.com/clipboard-image-1761555803.png)

## 常见注意点

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