English

快速开始

install

npm install @visactor/vseed

# optional
npm install @visactor/vchart

# optional
npm install @visactor/vtable

快速理解

vseed DSL

vseed 是一个面向分析领域的DSL, 封装了该领域常用的图表能力, 极大地提升分析式报表平台的搭建效率.

一般情况下, 给定数据集和图表类型, 即可直接出图. 每类图表类型存在大量的默认约定逻辑.

1import { VSeed } from '@visactor/vseed'
2registerAll()
3
4const vseed: VSeed = {
5  chartType: 'line',
6  dataset: [
7    { date: '2019', profit: 10, sales: 100 },
8    { date: '2020', profit: 30, sales: 200 },
9    { date: '2021', profit: 30, sales: 300 },
10    { date: '2022', profit: 50, sales: 400 },
11    { date: '2023', profit: 40, sales: 500 },
12  ],
13}

builder

一个spec builder, 输入1个vseed, 即可获得1个 vtable 或 vchart 的 spec

可以基于自己的业务场景, 二次处理 spec

极大地降低vtable、vchart的图表的配置复杂度, 并给予开发者极高的灵活度.

1import { registerAll, VSeed, Builder } from '@visactor/vseed'
2registerAll()
3
4const vseed: VSeed = {
5  chartType: 'line',
6  dataset: [
7    { date: '2019', profit: 10, sales: 100 },
8    { date: '2020', profit: 30, sales: 200 },
9    { date: '2021', profit: 30, sales: 300 },
10    { date: '2022', profit: 50, sales: 400 },
11    { date: '2023', profit: 40, sales: 500 },
12  ],
13}
14
15const builder = Builder.from(vseed)
16
17const spec = builder.build()

register

可以使用register注册特定图表类型

registerAll 注册所有图表类型和深浅色主题
registerCustomTheme用于自定义主题.

1import { registerAll } from '@visactor/vseed'
2registerAll()

VChart 渲染

TIP

只需传入图表类型与数据, 即可直接出图

PivotChart 渲染

TIP

配置measures分组, 或维度透视, 即可渲染出透视图表

ON THIS Page

#快速开始

#快速理解

#vseed DSL

#builder

#register

#VChart 渲染