登录注册

[开源]一款高性能的多维数据分析表格，行列间创作的方格艺术家

开源系统分类系统
2026-06-28 08:53 4 次浏览 • 0 次下载 0KB
[开源]一款高性能的多维数据分析表格，行列间创作的方格艺术家

一、开源项目简介

VTable

VTable，不只是一款高性能的多维数据分析表格，更是一个在行列间创作的方格艺术家。

二、开源协议

使用MIT开源协议

三、界面展示

表格主题 - BIGTHT

图片

图表类型

图片

销售热图

图片

单元格自定义布局

图片

透视表格

图片

QS专业排名

图片

四、功能概述

VTable 是 VisActor 可视化体系中的表格组件库，基于可视化渲染引擎 VRender 进行封装。核心能力如下：

  1. 性能极致：支持百万级数据快速运算与渲染

  2. 多维分析：多维数据自动分析与呈现

  3. 表现力强：提供灵活强大的图形能力，无缝融合VChart

VTable: 不只是高性能的多维数据分析表格，更是行列间创作的方格艺术家！

 

在现代应用程序中，表格组件是不可或缺的一部分，它们能够快速展示大量数据，并提供良好的可视化效果和交互体验。VTable是一款基于可视化渲染引擎VRender的高性能表格组件库，为用户提供卓越的性能和强大的多维分析能力，以及灵活强大的图形能力。

五、技术选型

仓库包含如下 package

  1. packages/vtable：表格组件代码

  2. docs: 教程文档

Usage 使用

安装

npm package

// npm
npm install @visactor/vtable

// yarn
yarn add @visactor/vtable

快速上手

// this demo you can run on codesanbox https://codesandbox.io/s/vtable-simple-demo-g8q738
import * as VTable from '@visactor/vtable';

const columns = [
  {
    field: 'Order ID',
    caption: 'Order ID'
  },
  {
    field: 'Customer ID',
    caption: 'Customer ID'
  },
  {
    field: 'Product Name',
    caption: 'Product Name'
  },
  {
    field: 'Sales',
    caption: 'Sales'
  },
  {
    field: 'Profit',
    caption: 'Profit'
  }
];

const option = {
  container: document.getElementById(CONTAINER_ID),
  records: [
    {
      'Order ID': 'CA-2018-156720',
      'Customer ID': 'JM-15580',
      'Product Name': 'Bagged Rubber Bands',
      Sales: '3.024',
      Profit: '-0.605'
    },
    {
      'Order ID': 'CA-2018-115427',
      'Customer ID': 'EB-13975',
      'Product Name': 'GBC Binding covers',
      Sales: '20.72',
      Profit: '6.475'
    }
    // ...
  ],
  columns
};
const tableInstance = new VTable.ListTable(option);
评论