纯前端、高性能、轻量级嵌入式微型 BI 分析套件与 VisActor Canvas 看板引擎。
零后端数仓依赖，仅需一份前端 JSON 流水数组，即可实现多维聚合、时间分桶、动态计算列、百万级表格与图表展示、同源交叉切片联动以及低代码可视化配置。
当前产品入口为模式一VChart图表配置与模式三受控表格配置。模式二自由设计器已移除，不读取或迁移其报表配置；模式三通过面板管理数据结构，保留Univer外观、静态内容与合并配置，正式表格由VTable展示。使用边界与最新验收见文档导航。
在传统业务或工业系统中，若想让用户自由分析数据，往往需要搭建繁重的 OLAP 数仓、购买沉重的商业 BI，或者手写大量重复的 ECharts / AntD 表格代码：
- ❌ 传统图表库（ECharts/Chart.js）：只负责绘制，不负责“数据清洗、时间汇总周期折叠、指标计算与多维透视”，业务方必须在后端写大量 SQL 或在前端写数百行胶水数据重组代码；
- ❌ 重型商业 BI（PowerBI/Tableau/FineBI）：部署繁琐、成本高昂、无法与自研 Web 业务系统深度融合与精准联动；
- ❌ 传统 DOM 表格：面对万级以上明细流水时 DOM 节点重排剧烈、性能断崖式下跌。
MicroBI 提供全新的轻量化破局解法：
- 纯前端内存即时算力：零后端依赖，直接在浏览器端实现多维聚合、时间周期切片与安全公式计算；
- 纯 Canvas 双引擎渲染：全链路统一基于字节跳动
@visactor/vtable+@visactor/vchart，十万至百万级明细极致流畅，原生支持双 Y 轴 Pareto 复合图与多维透视图； - 同源数据全卡片联动（Cross-Filtering）：任意看板中点击柱子、折点或表格单元格，全看板自动秒级完成切片过滤与重算；
- 低门槛交互式设计器：仅暴露纯配置面板组件，宿主自由决定弹窗或抽屉形态，业务人员 1 分钟上手配置分析规则。
npm install micro-bi如需使用可视化 UI 组件（DynamicDataView 或 DynamicDataConfigPanel），确保项目中已安装配套基础库：
npm install react@18.3.1 react-dom@18.3.1 antd@5.29.3 @ant-design/icons @visactor/vtable@1.26.8 @visactor/vchart dayjs使用表格Excel导出时，另安装与VTable配套的 @visactor/vtable-plugins@1.26.8。插件和ExcelJS在首次导出时加载，输出真实 .xlsx；只使用数据引擎无需安装UI和导出依赖。当前AntD要求 >=5.29.3 <6，VTable及导出插件要求 >=1.26.8 <2，建议二者保持相同版本。
┌──────────────────────────────────────────────────────────────┐
│ Host Application │
│ (MES / SCADA / ERP / SaaS CRM / Operations Dashboard) │
└──────────────┬───────────────────────────────┬───────────────┘
│ │
[ 配置态设计器 ] [ 运行时展示看板 ]
┌─────────────────────────────┐ ┌─────────────────────────────┐
│ DynamicDataConfigPanel │ │ DynamicDataView │
│ - 字段探查与纠偏 (Profiler) │ │ - 常驻右上角形态切换 (View) │
│ - 统计分组与时间汇总周期 │ │ - 次级图表探索栏 (Toolbar) │
│ - 指标配置 & 聚合函数 │ │ - 纯 Canvas 图/表双底座 │
│ - 光标公式编辑器 (Formula) │ │ - 跨卡片联动 (LinkageBus) │
│ - 常用分析预设模板 │ └──────────────┬──────────────┘
└─────────────┬───────────────┘ │
│ 输出 DSL 配置 │ 切片过滤 & 驱动
▼ ▼
┌─────────────────────────────────────────────────────────────┐
│ MicroBI In-Memory Engine │
│ - Pipeline: Raw Dataset ➔ Filter ➔ Bucket ➔ Pivot ➔ Schema │
│ - Safe Formula AST: Lexer ➔ Parser ➔ Sandboxed Evaluator │
│ - Metrics & Aggregations: SUM / AVG / MIN / MAX / COUNT │
└─────────────────────────────────────────────────────────────┘
- 智能字段探查 (Profiler)：自动检测样本数据并将字段识别为
time（时间）、number（数值）、text（分类文本），支持手动覆盖； - 多粒度时间分桶：支持按年、按季、按月、按自然周、按日以及任意自定义天数（如 7 天、14 天滚动周期）聚合；
- 安全无 eval 公式解析引擎 (Formula AST)：
- 零
eval，零外部重量依赖，彻底规避代码注入漏洞； - 支持四则运算优先级、逻辑比较与条件分支（
IF(condition, trueVal, falseVal)）； - 支持数学辅助函数（
ROUND、ABS、COALESCE）与聚合引用（[SUM(sales)]）。
- 零
- 聚合与固定列智能适配：透视模式与明细模式自动流转，支持原值与度量双向幂等还原；
- 双向多维交叉透视 (Cross-Tab Pivot Engine)：
- 支持**行维度（纵向分级展开）与列维度（横向透视展开）**双向交织；
- 自动识别交叉单元格并在内存中完成行列交集的数据聚合与动态计算列评估；
- 原生无缝在扁平表（
ListTable）与交叉透视表（PivotTable）间双模切换。
- 固定右上角形态切换器 (ViewTypeSwitcher)：表格、柱状图、折线图、饼图切换按钮牢牢固定在卡片右上角，切换视图形态时像素级绝对稳固、零抖动、零跳跃；
- 独立次级探索工具条：维度切换与指标单选/多选对比在非表格状态下平滑呈现于画布上方，不挤压主卡片头部；
- VisActor Canvas 表格 (
VTable/ListTable&PivotTable)：- 双向多维交叉透视表 (Cross-Tab)：当配置了透视列维度时，自动启用
PivotTable纯 Canvas 渲染，指标支持横向排布或纵向排布，行总计/列总计原生计算； - 真实 2D 矩阵导出与复制：导出 CSV 或复制 TSV 时，完美导出包含多级列头、行头、指标及总计的真实 2D 透视矩阵，Excel 粘贴即用；
- 明细/扁平聚合表 (ListTable)：轻松承载 100,000+ 明细行，支持区域框选、多格复制、列宽自由拖拽；
- 列排序隔离的总计行计算、列显隐气泡、冻结首列与右侧操作列；
- 双向多维交叉透视表 (Cross-Tab)：当配置了透视列维度时，自动启用
- VisActor Canvas 图表 (
VChart)：- 柱/线/面积/饼图，自动识别比率型与绝对数值型指标，天然呈现双 Y 轴复合图；
- 饼图智能单指标截断与占比归一化。
- 同源交叉切片联动 (Cross-Filtering LinkageBus)：
- 基于显式
datasetId契约隔离，防自环广播拓扑； - 支持图表图元点击或表格行/列点击，毫秒级下发过滤并自动重算。
- 基于显式
- 解耦式设计：面板仅提供标准配置交互与
ref导出，由宿主决定是嵌入弹窗（Modal）还是抽屉（Drawer）； - 用户友好文案：全面统一为业务易懂的「统计分组」、「时间汇总周期」、「指标」、「聚合指标」；
- 光标级公式编辑器：函数与可用字段支持从鼠标光标当前位置精准插入；
- 4 种一键分析预设：趋势分析（按时间）、对比排行（按类别）、占比分析（单指标）、明细清单（原始行）。
import { transformData, profileDataset, type DynamicTransformConfig } from 'micro-bi/engine';
// 1. 原始流水数据
const rawData = [
{ date: '2026-09-01', category: '电子', sales: 1000, cost: 600, defect: 5 },
{ date: '2026-09-05', category: '电子', sales: 2000, cost: 1200, defect: 8 },
{ date: '2026-09-10', category: '机械', sales: 1500, cost: 800, defect: 3 },
];
// 2. 字段探查
const fields = profileDataset(rawData);
// 3. 配置多维透视与动态公式
const config: DynamicTransformConfig = {
dimensions: {
timeBucket: { field: 'date', granularity: 'month' },
categories: ['category'],
},
columns: [
{ type: 'aggregated', field: 'sales', agg: 'sum', label: '总销售额' },
{ type: 'aggregated', field: 'cost', agg: 'sum', label: '总成本' },
{
type: 'computed',
name: 'profit',
label: '毛利润',
expression: '[SUM(sales)] - [SUM(cost)]',
},
{
type: 'computed',
name: 'profit_margin',
label: '毛利率(%)',
expression: 'IF([SUM(sales)] > 0, ROUND(([SUM(sales)] - [SUM(cost)]) / [SUM(sales)] * 100, 2), 0)',
precision: 2,
},
],
};
// 4. 执行内存秒级计算
const result = transformData(rawData, config);
console.log(result.data);
// 输出已聚合、分桶、公式计算后的结果矩阵只需在 dimensions 中同时声明行维度与列维度（columnCategories 或 columnTimeBucket），引擎自动激活二维交叉透视：
import { transformData, type DynamicTransformConfig } from 'micro-bi/engine';
const pivotConfig: DynamicTransformConfig = {
dimensions: {
// 纵向行维度
categories: ['workshop'], // 承制车间
// 横向列维度 (支持时间分桶或离散分类)
columnTimeBucket: { field: 'plan_start_time', granularity: 'month' },
// 透视展现配置
indicatorsAsCol: true, // 指标横向排布 (true: 列头下方; false: 行头下方)
rowTotals: { showGrandTotals: true, grandTotalLabel: '行总计' },
columnTotals: { showGrandTotals: true, grandTotalLabel: '列总计' },
},
columns: [
{ type: 'aggregated', field: 'output_qty', agg: 'sum', label: '交付总件数' },
{ type: 'aggregated', field: 'defect_qty', agg: 'sum', label: '缺陷数' },
],
};
const result = transformData(rawRecords, pivotConfig);
// result.meta.isCrossTab === true
// 传给 DynamicDataView 时，自动无缝启用 @visactor/vtable 的 PivotTable 纯 Canvas 渲染！import React from 'react';
import { DynamicDataView } from 'micro-bi/ui';
import type { TransformResult, DynamicTransformConfig, DataRecord } from 'micro-bi';
interface Props {
dataset: DataRecord[];
result: TransformResult;
config: DynamicTransformConfig;
onEditConfig: () => void;
}
export const SalesDashboardCard: React.FC<Props> = ({ dataset, result, config, onEditConfig }) => {
return (
<DynamicDataView
datasetId="production_dataset" // 传入一致的 datasetId 即可自动开启跨卡片同源数据联动过滤
title="月度产能与质检综合透视"
result={result}
rawDataset={dataset}
transformConfig={config}
defaultViewType="bar"
allowViewSwitch={true} // 允许用户自主切换 表格 / 柱状图 / 折线图 / 饼图
allowDimensionSwitch={true} // 开启图表 X 轴多维度切换
allowMetricSwitch={true} // 开启度量指标切换与多指标对比
chartStyle={{ height: 380 }}
tableFeatures={{
export: true, // 允许导出 CSV 与复制 TSV
summaryRow: true, // 底部科学总计行
columnVisibility: true, // 列显隐管理
filterDropdown: true, // 表格列快速检索
}}
extra={
<button onClick={onEditConfig} style={{ cursor: 'pointer' }}>
配置
</button>
}
/>
);
};配置组件与外层容器完全解耦，宿主可按需放入 Ant Design 的 Modal 或 Drawer 中：
import React, { useRef, useState } from 'react';
import { Modal, message } from 'antd';
import { DynamicDataConfigPanel, type DynamicDataConfigPanelRef } from 'micro-bi/ui';
import type { DynamicTransformConfig } from 'micro-bi';
export const ConfigModal: React.FC<{
open: boolean;
initialConfig: DynamicTransformConfig;
rawDataset: any[];
onSave: (config: DynamicTransformConfig) => void;
onCancel: () => void;
}> = ({ open, initialConfig, rawDataset, onSave, onCancel }) => {
const panelRef = useRef<DynamicDataConfigPanelRef>(null);
const handleOk = () => {
const validation = panelRef.current?.validateAndGetConfig();
if (!validation) return;
if (!validation.valid || !validation.parsedConfig) {
message.error(validation.issues.map((issue) => issue.message).join('；'));
return;
}
onSave(validation.parsedConfig);
};
return (
<Modal open={open} width={960} onOk={handleOk} onCancel={onCancel} title="配置分析规则">
<DynamicDataConfigPanel
ref={panelRef}
defaultValue={initialConfig}
datasets={[{
id: initialConfig.datasetId || 'local_records',
name: '当前数据',
data: rawDataset,
}]}
showDslTools={true} // 支持快捷导入/导出 DSL JSON 配置
/>
</Modal>
);
};MicroBI 内置中英双语，开箱即用：
import React, { useState } from 'react';
import { DynamicDataLocaleProvider, en_US, zh_CN } from 'micro-bi/locale';
export const App = () => {
const [isEn, setIsEn] = useState(false);
return (
<DynamicDataLocaleProvider locale={isEn ? en_US : zh_CN}>
<button onClick={() => setIsEn((v) => !v)}>
{isEn ? 'Switch to Chinese' : '切换为英文'}
</button>
{/* 内部所有组件与图表文字自动切换双语 */}
</DynamicDataLocaleProvider>
);
};DynamicDataConfigPanel 通过 datasets 或全局数据集注册表读取数据，通过 value/onChange 或 defaultValue 接收配置。DynamicTransformConfig 根据维度和列配置自动判断明细、分组透视或全局汇总，不需要 mode 属性。
为保持最优的 Tree-shaking 体验，MicroBI 提供了清晰的模块拆分：
| 导入路径 | 包含模块与用途 | 适合场景 |
|---|---|---|
micro-bi |
统一入口：数据计算、数据集注册与国际化 | 已安装 React 的宿主项目 |
micro-bi/engine |
数据转换、公式、字段探查与类型 | 独立计算环境，不需要 React |
micro-bi/ui |
DynamicDataView, DynamicDataConfigPanel, 主题工具 |
前端 React 看板集成、可视化配置 |
micro-bi/core |
通用注册表原语（createRegistry） |
高级插件扩展与行业指标注册 |
micro-bi/locale |
DynamicDataLocaleProvider, zh_CN, en_US |
国际化语言注入 |
- 正式展示使用
@visactor/vtable的ListTable/PivotTable。透视交叉格直接读取引擎结果；行、列总计根据原始聚合统计合并，COUNT 统计字段的非空值，AVG 按有效数值数量加权，计算列在总计上下文重新求值。显式scope: 'row'的数值计算列则累计各明细行的计算结果。 - 模式一使用VChart配置图表；模式三由面板维护维度和指标，由Univer维护模板外观与静态内容，动态预览和保存共用模板编译链路。正式报表使用中性的publication和VTable，展示态不加载Univer编辑器。条件替换文本与原始计算值分开。
- 普通VTableView的总计使用SDK原生聚合行，统计口径仍来自共享引擎；总计不混入records，也不修改全局DataSource排序方法。模式三的分组、交叉、合并及明细下钻由报表编译器和会话层维护，见当前文档导航。
transformData([], config)保留列结构、透视模式和配置元信息。自然周以同一个周起始日期生成分桶键，支持跨月、跨年及周日/周一起始。- 数据源替换、注销、清空缓存或强制刷新时，旧请求仍可返回给原调用者，但不会覆盖当前缓存或删除新请求。普通并发读取继续共享一个请求。
- VTableView的Excel导出使用官方TableExportPlugin输出真实
.xlsx，保留原始数值、布尔值、文本编号及日期文本；字符串=1+1不转换为可执行公式。支持当前表格顺序、合并与SDK可导出样式；不承诺完整复刻自定义Canvas绘制效果。模式三本轮没有新增导出操作栏。
目录职责和报表设计文档见文档导航。源码在src/，回归测试及固定输入在test/，可执行验证脚本在scripts/，报表示例在examples/。
# 1. 安装依赖
npm install
# 2. 构建产物 (ESM + CJS + .d.ts)
npm run build
# 3. 构建并运行回归测试 (Node.js 内置 test runner)
npm test
# 4. 纯类型检查
npm run typecheck本项目遵循 MIT License。