NocoBase 数据可视化实战指南：如何从零搭建专业图表看板

NocoBase 数据可视化实战指南：如何从零搭建专业图表看板

【免费下载链接】nocobaseNocoBase is an open-source AI + no-code platform for building business systems fast. Instead of generating everything from scratch, AI works on top of production-proven infrastructure and a WYSIWYG no-code interface, so you get both speed and reliability.项目地址: https://gitcode.com/GitHub_Trending/no/nocobase

本文以 NocoBase 数据可视化为主线，讲清从数据接入、图表创建到发布验证的完整流程：你可以用 Builder 图形化模式或 SQL 模式配置数据查询，通过度量与维度做聚合统计，再映射到折线、柱状、饼图等 ECharts 图表。读完本文，你能独立搭建并发布第一张面向业务的图表看板，并知道图表为空、映射错位时如何排查。

成果预览：最终效果长什么样

先明确终点。完成本文操作后，你会得到一张可在页面中正常展示的数据看板，典型形态是：

• 一张折线图：按月统计订单金额，呈现销售趋势；
• 一张柱状图：按品类或地区对比金额总和；
• 一张饼图：展示各分类的占比构成。

三张图表共用同一份数据集合，各自配置独立的查询与字段映射。任何人打开页面即可看到数据，无需任何代码。

工作原理：它是怎么跑起来的

NocoBase 的数据可视化由两部分协作完成。核心是内置的 数据可视化插件，它提供页面中的「图表区块」组件；图表的渲染能力则由 ECharts 图表插件 提供，并可通过 charts 图表插件 扩展更多图形。

数据流向是一条单向链路：集合（数据表）→ 数据查询 → 结果列 → 字段映射 → 图表渲染。你在配置面板里先用 Builder 或 SQL 模式从指定集合查出数据；查询结果是一组行列，第一列通常作为维度，数值列作为度量；最后把结果列映射到xField、yField、Category等图表字段，前端才真正渲染出图。

配置面板分为三部分：数据查询（选数据源、集合，设度量/维度、过滤、排序）、图表选项（选图表类型、做字段映射、调整样式）、交互事件（点击高亮、下钻等）。预览只是临时效果，点击「保存」后配置才写入数据库并对所有人生效。

搭建路径：从 0 到 1

环境准备

用 Docker 是最快的方式：

• 在仓库根目录的 docker-compose.yml 基础上执行docker compose up -d，默认使用 SQLite，零额外依赖；
• 浏览器访问本地端口，用初始管理员账号登录；
• 确认「数据源」中存在一个可用的数据源，且你对目标集合有读取权限。集合不可选或为空时，优先排查权限。

数据接入

• 在「数据建模」中创建集合（例如order），定义字段：数值字段total_amount（金额）、日期字段order_date、分类字段category；
• 如果业务上集合之间存在关系（如一张订单表挂在客户表下），按一对多建立关联字段即可，关联关系会以图形化卡片呈现：

• 判断依据：在集合的表格视图中能看到真实数据行，说明数据接入完成，可以开始配图。

可视化创建

进入页面设计器，点击「添加区块」→ 选择「图表」，点击区块右上角「配置」，右侧打开配置面板：

• 数据查询：模式选 Builder（图形化）或 SQL（手写语句）。Builder 模式下依次选择数据源与集合，添加度量（如total_amount聚合为 Sum）、维度（如order_date，格式设为YYYY-MM）；
• 运行查询：执行后用「查看数据」切换 Table/JSON 确认返回的列名与类型。映射前务必先看清列名，这是避免空图最关键的一步；
• 图表选项：选择图表类型（折线/柱状/饼图等），完成字段映射——折线、柱状映射xField（维度）、yField（度量）；饼图映射Category（分类）、Value（值）。运行查询后映射通常会自动完成，变更维度/度量后请重新确认；
• 复杂统计可直接切到 SQL 模式，最小示例：

SELECT TO_CHAR(order_date, 'YYYY-MM') AS mon, SUM(total_amount) AS total FROM "order" GROUP BY mon ORDER BY mon LIMIT 100;

SQL 模式注意字段顺序：第一列会被默认识别为维度，所以维度字段（mon）放在SELECT第一位，度量列放后面。

发布与验证

• 修改内容会实时刷新左侧预览，但不点「保存」就没有真正生效；
• 点击「保存」，配置写入数据库，对所有用户生效；
• 验证方式：刷新页面、换一个普通账号访问，确认图表仍能正常出数；
• 若配置改错了，点击「取消」或刷新页面可回退到上次保存状态。

场景实战：按月统计订单金额趋势图

以「运营需要看每月销售额变化」为例，完整走一遍配置要点：

1. 数据准备：确认order集合有order_date、total_amount字段，且当月有数据；
2. 查询配置：Builder 模式下，度量选total_amount（Sum），维度选order_date并设格式YYYY-MM，过滤条件可加「已支付」状态，排序按日期升序；
3. 图表映射：选折线图，xField映射mon，yField映射total；在图表选项中开启平滑、图例与 tooltip，让趋势更可读；
4. 进阶联动：在页面顶部加一个「筛选器块」（如日期范围），它会合并进图表查询并联动刷新，一张图变成一个可交互的小看板。

达成效果：管理层打开页面即见月度金额曲线；换筛选条件即可按季度、按地区切片查看。

排障速查

扩展方向

• Custom 模式：在图表选项的 JS 编辑器中返回完整 EChartsoption，做复杂定制，见 自定义图表选项文档；
• 交互事件：用chart.on注册点击高亮、跳转、下钻，见 图表事件文档；
• 筛选器联动与上下文变量：页面级筛选统一驱动多图表刷新，见 筛选器与联动文档 和 上下文变量文档；
• 代码级扩展：参考 数据可视化插件源码 与 ECharts 插件源码 注册自定义图表类型；
• 完整入门路径：数据可视化快速开始 与 数据查询详解。

到这里，你已经掌握了 NocoBase 数据可视化从接入到发布的主链路。建议现在就打开你的实例，添加一个图表区块，先用 Builder 模式跑通「集合 → 度量 + 维度 → 保存」这条最短路径，再逐步叠加 SQL 查询与筛选器联动。

【免费下载链接】nocobaseNocoBase is an open-source AI + no-code platform for building business systems fast. Instead of generating everything from scratch, AI works on top of production-proven infrastructure and a WYSIWYG no-code interface, so you get both speed and reliability.项目地址: https://gitcode.com/GitHub_Trending/no/nocobase