VizFlow：零代码BI数据看板生成器教程

TypeScript · 开源工具 · 拖拽式数据可视化

项目简介

VizFlow 是一个用 TypeScript 编写的零代码 BI Dashboard 生成器，彻底改变传统 BI 工具的笨重体验。通过拖拽式操作，几分钟内构建专业数据看板，支持 CSV、API、数据库等多种数据源。

核心功能

• 拖拽式编辑：所见即所得的看板设计器
• 多数据源：CSV、JSON API、PostgreSQL、MySQL
• 图表类型：折线、柱状、饼图、散点、热力图、漏斗
• 实时刷新：支持 WebSocket 实时数据推送
• 导出分享：PNG/PDF导出，链接分享

安装部署

# 前置：Node.js 18+
git clone https://github.com/vizflow/vizflow.git
cd vizflow

# 安装依赖
npm install

# 开发模式
npm run dev
# 访问 http://localhost:3000

# 生产构建
npm run build
npm run start

Docker部署

docker run -d \
  --name vizflow \
  -p 3000:3000 \
  -v ./dashboards:/app/dashboards \
  -v ./data:/app/data \
  ghcr.io/vizflow/vizflow:latest

创建第一个看板

// 1. 添加数据源
// Settings → Data Sources → Add
{
  "name": "销售数据",
  "type": "csv",
  "config": {
    "path": "./data/sales.csv"
  }
}

// 2. 或使用API数据源
{
  "name": "API指标",
  "type": "api",
  "config": {
    "url": "https://api.example.com/metrics",
    "method": "GET",
    "refresh": 60  // 60秒刷新
  }
}

// 3. 添加图表（拖拽方式）
// - 拖拽"柱状图"到画布
// - 选择数据源
// - 配置X轴/Y轴字段
// - 设置标题和颜色

API嵌入

// 将看板嵌入到自己的应用


// 或通过API获取数据
fetch('http://localhost:3000/api/dashboards/sales/data')
  .then(r => r.json())
  .then(data => console.log(data))

结合 NocoBase企业系统 构建数据驱动业务平台，或配合 Cloudflare Town Lake数据平台 做统一数据分析。