VISALL 数据可视化组件库

VISALL 是一个高性能的数据可视化组件库，基于 TypeScript 开发，使用 pnpm workspace 管理多包结构。

该构建工具基于 rollup 和 typescript 等工具。

🏗️ 项目结构

packages/
├── table/                  # 表格组件
├── text/                   # 文本组件
├── timeline/               # 时间轴组件
├── operational-donut/      # 甜甜圈图组件
├── create-visall-layer-demo/ # 项目脚手架
└── integration-example/    # 集成示例

🚀 快速开始

前置要求

• Node.js >= 16
• pnpm >= 8

安装

# 全局安装 pnpm
npm install -g pnpm

# 安装项目依赖
pnpm install

从 npm workspaces 迁移

如果你是从 npm workspaces 迁移过来的，可以使用一键迁移脚本：

./scripts/migrate-to-pnpm.sh

更多迁移详情，请查看 pnpm workspace 改造指南。

打包

运行 npm run build, 最终将生成以下构建产物。

types/
build/
├── bundle.esm.js
├── bundle.esm.min.js
├── bundle.umd.js
└── bundle.umd.min.js

还将生成相应的 sourcemap 文件。

💻 开发

单包开发

• 开发模式

  pnpm run dev # or $ pnpm run esbuild-dev

• 开发模式（Web 服务）

  pnpm run dev-serve # or $ pnpm run esbuild-dev-serve

• 运行测试

  pnpm run test

• 构建打包

  pnpm run build

多包开发

• 构建所有包

  pnpm run packages:build

• 并行运行所有包的开发服务器

  pnpm run packages:dev

• 运行所有包的测试

  pnpm run packages:test

• 清理所有包的构建产物

  pnpm run packages:clean

指定包操作

• 构建指定包

  pnpm run --filter @visall/table build

• 给指定包安装依赖

  pnpm add --filter @visall/table lodash

• 发布指定包

  pnpm publish --filter @visall/table

文档构建

• 从 Markdown 文档构建 Html 文档

  pnpm run build:docs-html

更多命令查看 package.json 中 scripts 字段。

相关文档

• 组件需求列表
• 组件封装视觉规范
  • 图例
  • 轴（轴名称、轴标签文本）
  • dataZoom/时间轴
  • 切换主题

组件命名规范

[Dynamic] [Stacked] [Grouped] [Ranking] (Bar|Line|...) [3D]

维护人员

许可