vTable实现多维表格
介绍
vTable是字节开发的一款能用来渲染表格的库，是用canvas渲染，避免了传统用dom组件表格的一些问题，能很快的渲染出上万格子的表格。
接下来我将使用vTable构建类似下面的多维表格，其中quantity、sales等是指标。
使用
官网地址：Getting_Started——VisActor/VTable tutorial documents
1、首先下载npm，或者cdn引入vtable，并且准备一个div作为容器。vTable有ListTable（普通表格）和PivotTable（透视表）的区别，我们现在用PivotTable来构建表格。
<script src="https://unpkg.com/@visactor/vtable/dist/vtable.min.js"></script><div id="tableContainer" style="width: 100vw;height:100vh;"></div><script>// 创建 VTable 实例const tableInstance = new VTable.PivotTable(document.getElementById('tableContainer'), option);
</script>
2、准备表格数据
[{"city": "重庆","exist": 1,"sold": 2,"column1": "家具"},{"city": "武汉","column1": "家具","exist": 7,"sold": 8},{"city": "重庆","column1": "家具","exist": 2,"sold": 3},{"city": "武汉","column1": "家具","exist": 8,"sold": 9},{"city": "重庆","column1": "体育器材","exist": 4,"sold": 5},{"city": "武汉","column1": "体育器材","exist": 10,"sold": 11},{"city": "重庆","column1": "体育器材","exist": 6,"sold": 7},{"city": "武汉","column1": "体育器材","exist": 11,"sold": 12}
]
3、构建option。
row和column用来指定行和列，
indicators用来指定指标，
dataConfig用来设置合计、平均值等一些计算，
hideIndicatorName用来设置是否隐藏指标
更多配置请看官网
const records = contentconst option = {records,rows: [{dimensionKey: 'city',title: '城市',}],columns: [{dimensionKey: 'column1',title: '类别',}],indicators: [{indicatorKey: 'exist',title: '现存'},{indicatorKey: 'sold',title: '已售',}],// 设置左上角corner: {titleOnDimension: 'all',//row column all},// hideIndicatorName: true,//隐藏指标名// 设置合计dataConfig: {totals: {row: {showGrandTotals: true,subTotalsDimensions: ['exist'],grandTotalLabel: '合计',},}},widthMode: 'standard'};完整代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- <script src="https://unpkg.com/@visactor/vtable/dist/vtable.min.js"></script> --><script src="./vtable.min.js"></script><style>* {margin: 0;padding: 0;}</style>
</head><body><div id="tableContainer" style="width: 99vw;height:99vh;"></div><script>fetch('./data4.txt').then(res => res.json()).then(res => {console.log(res);let content = resconst records = contentconst option = {records,rows: [{dimensionKey: 'city',title: '城市',}],columns: [{dimensionKey: 'column1',title: '类别',}],indicators: [{indicatorKey: 'exist',title: '现存'},{indicatorKey: 'sold',title: '已售',}],// 设置左上角corner: {titleOnDimension: 'all',//row column all},// hideIndicatorName: true,//隐藏指标名// 设置合计dataConfig: {totals: {row: {showGrandTotals: true,subTotalsDimensions: ['exist'],grandTotalLabel: '合计',},}},widthMode: 'standard'};// 创建 VTable 实例const tableInstance = new VTable.PivotTable(document.getElementById('tableContainer'), option);})</script>
</body></html>
效果
现存和已售是指标。
最后附上效果：
