VTable 一款高性能的多维数据分析表格，更是一个在行列间创作的方格艺术家家...-CSDN博客

点击上方前端Q，关注公众号

回复加群，加入前端Q技术交流群

一、项目简介

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

性能极致：支持百万级数据快速运算与渲染
多维分析：多维数据自动分析与呈现
表现力强：提供灵活强大的图形能力，无缝融合VChart

VTable提供了三种主要的表格形态，包括基本表格、多维透视表格和透视组合图。可以满足不同用户的需求，帮助用户更好地展示和分析数据，并从中发现有价值的信息。

基本表格是最简单的表格形态，它由行和列组成，每个单元格包含一个数据项。基本表格适用于对数据进行简单的排列和展示。
透视表格是一种用于多维数据分析的表格形态，它可以将数据按照多个维度进行聚合和汇总，为用户提供多角度的数据分析和探索。
透视组合图是一种将多维透视表格与其他图表形式（如柱状图、折线图等）结合起来的图表形态，它可以将透视表格中的数据转化为更直观、易懂的图形展示。

二、开源协议

依照 MIT 协议开源。

三、表格的构成

总体构成：

表格由五部分组成，分别是行表头、列表头、角表头、body数据单元格、框架如下图所示：

如果是基本表格的话只有行表头或者列表头，没有角表头。

表头：

表头是表格的重要组成部分，根据位置的不同又分为：行表头，列表头及角表头。

行表头显示在表格左侧，主要显示行维度信息的描述

列表头位于表格顶部，主要展示列维度信息的描述

角头位于表格左上角，一般描述行或者列的维度名称

如果是透视表行表头展示内容由rowTree维度树决定，列表头由columnTree维度树决定。如下定义一个行维度树的结构：

rowTree: [  {    dimensionKey:Category',    value: '办公用品',    children: [      {        dimensionKey: 'Sub Category',        value: 'Binders',      }    ]  }]

如果是基本表格，表头内容是由columns中配置的title决定。至于是显示在行表头还是列表头位置，需要看transpose是否设置了转置。如下简单配置：

columns: [   {        "field": "Category",        "title": "Category",         "headerStyle": {          color: 'red',        },    },    {        "field": "Sub Category",        "title": "Sub-Category",    }]

在透视表中可配置corner来设置角头的显示内容和样式等，配置如下：

corner: {   titleOnDimension: 'row', //角头标题显示内容依据为行维度名称   headerStyle://设置角表头单元格样式   {      textAlign: 'center', // 文本居中显示      bgColor: '#f5f5f5', // 背景颜色      borderColor: '#ccc' // 边框颜色    }}

body单元格：

body数据单元格是表格最主要的显示数据的部分，展示了表格内的详细数据。我们可以通过一些配置项来改变这些数据单元格的显示内容、样式、排列方式和列宽等，以满足各种需求。

透视表的设置主要集中在indicators配置项上，如下配置了数据条形式的数据格式，与此同时style中配置了数据条bar的相应样式：

indicators: [      {        indicatorKey: 'sales',        title: '销售额',        cellType: 'progressbar',        format(value) {          return `${value}%`;        },        style: {          barHeight: '100%',          barBgColor: data => {            return `rgb(${100 + 100 * (1 - (data.percentile ?? 0))},${100 + 100 * (1 - (data.percentile ?? 0))},${              255 * (1 - (data.percentile ?? 0))            })`;          },          barColor: 'transparent'        },      },    ...]

基本表格的body配置主要体现在columns配置项中的field，cellType及style上：

columns:[    {        "field": "230517143221027",        "title": "Order ID",        "cellType": "link",        "style": {            "color": 'yellow',        }    },    {        "field": "230517143221030",        "title": "Customer ID",        "cellType": "image",    },]

表格边框：

我们可以通过theme.frameStyle选项来配置表格整体外边框样式:

theme:{    frameStyle: {      borderColor: '#666', // 边框颜色      borderLineWidth: 2    // 边框宽度    }}

上面配置了边框的粗细颜色，外边框也支持阴影。配置完成后，表格将显示相应的框架样式。

除了可以配置表格外边框外，每个表格的构成部分也可以设置单独的边框，如角头边框，列表头边框，行表头边框和body边框。下面以配置body边框为例：

theme:{    bodyStyle:{        frameStyle: {          borderColor: 'purple', // 边框颜色          borderLineWidth: 2    // 边框宽度        }    }}

效果如下：

四、快速上手

如何使用 VTable 绘制一个简单的基本表格。

（一）获取 VTable

使用 NPM 包

首先，你需要在项目根目录下使用以下命令安装 VTable：

# 使用 npm 安装 npm install @visactor/vtable # 使用 yarn 安装 yarn add @visactor/vtable

使用 CDN

你还可以通过 CDN 获取构建好的 VTable 文件。

<script src="https://unpkg.com/@visactor/vtable/dist/vtable.min.js"></script><script>  const tableInstance = new VTable.ListTable(option);</script>

（二）引入VTable

通过 NPM 包引入

在 JavaScript 文件顶部使用 import 引入 VTable：

import * as VTable from '@visactor/vtable'; import { ListTable, PivotTable, TYPES, themes } from '@visactor/vtable';

使用 script 标签引入

通过直接在 HTML 文件中添加

<script src="https://unpkg.com/@visactor/vtable/dist/vtable.min.js"></script><script>  const tableInstance = new VTable.ListTable(option);</script>

（三）绘制一个简单的表格

在绘图前我们需要为 VTable 准备一个具备高宽的 DOM 容器。

<body>  <div id="tableContainer" style="width: 600px;height:400px;"></div></body>

接下来，我们创建一个 Vtable.ListTable 实例，传入表格配置项

五、演示展示

往期推荐

面试官：如果一个NPM包部分功能不满足需求，如何修改其部分功能~

答应我，不要再用console.log调试了

飞书一键复制网页内容为图片原理

最后

欢迎加我微信，拉你进技术群，长期交流学习...
欢迎关注「前端Q」,认真学前端，做个专业的技术人...

点个在看支持我吧