VTable 一款高性能的多维数据分析表格，更是一个在行列间创作的方格艺术家家
VTable 一款高性能的多维数据分析表格，更是一个在行列间创作的方格艺术家家
一、项目简介
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 实例，传入表格配置项
五、演示展示
腾讯云开发者
