此时我们只需要对动态生成的columns每一列添加自定义头部即可:

{   title: item,   dataIndex: item,   key: item,   ...getColumnSearchProps(item) }

antd4.0 中也有详细的使用方式, 这里笔者就不一一介绍了, 效果如下:

大家也可以在 H5-Dooring 的管理后台中查看具体效果.

3. 批量导入 Excel 数据渲染 Table

在很多数据分析后台中我们需要处理很多电子表格, 用传统的excel手动录入的方式将慢慢被淘汰. 比如不同渠道方收集到了很多业务数据, 整理到 excel  中, 那如何快速保存到自己的后台系统中呢? 一般的思路如下:

• 通过表单的方式一条条录入

• 后台解析文件处理成规范的可入库数据结构

• 前端实现一件导入 excel, 自动同步数据

第一种方案由于效率太低, 适合C端用户手动录入, 我们暂时忽略, 笔者将实现一下第三种方案. 实现思路如下:

这里我们用到了 XLSX 这个库, 结合 FileReader API. 我们通过FileReader 拿到excel文件的二进制数据, 然后传给  XLSX 解析成 js object, 最后通过笔者写的 table 渲染器生成符合规范的table数据结构. 源码如下:

// 解析并提取excel数据 let reader = new FileReader(); reader.onload = function(e) {   let data = e.target.result;   let workbook = XLSX.read(data, {type: 'binary'});   let sheetNames = workbook.SheetNames; // 工作表名称集合   let draftArr = {}   sheetNames.forEach(name => {     let worksheet = workbook.Sheets[name]; // 只能通过工作表名称来获取指定工作表     for(let key in worksheet) {       // v是读取单元格的原始值       if(key[0] !== '!') {         if(draftArr[key[0]]) {           draftArr[key[0]].push(worksheet[key].v)         }else {           draftArr[key[0]] = [worksheet[key].v]         }       }     }   });   // 得到table合法的数据产物   const sourceData = Object.values(draftArr); } reader.readAsBinaryString(file);

拿到合法的table 数据源之后我们就可以进行第一节说的动态渲染 Table 的逻辑了.

通过以上的方式, 我们可以实现任何结构的excel表格的导入. 在导入后我们可以自动发送请求存储到我们的业务后台中.

4. 将 Table 数据导出为 Excel

类似的, 上面我们介绍了将 excel 导入 table, 同样我们也可以将Table 导出为 excel, 进行数据的分发, 本地化,  比如我们最近流行的在线文档等应用. 笔者这里简单讲一下实现思路:

也就是我们第3节说的反解析. excel 文件生成笔者采用 js-export-excel 这个库, 基于它笔者实现了一个开箱即用的方法,  避免大家烧脑造轮子. 如下:

import ExportJsonExcel from 'js-export-excel';  const generateExcel = () => {     let option:any = {};  //option代表的就是excel文件     let dataTable = [];  //excel文件中的数据内容     let len = list.length;     if (len) {         for(let i=0; i (typeof item === 'object' ? item.label : item)).join(',')                 }else {                     obj[key] = row[key]                 }             }             dataTable.push(obj);  //设置excel中每列所获取的数据源         }     }     let tableKeys = Object.keys(dataTable[0]);     option.fileName = tableName;  //excel文件名称     option.datas = [           {             sheetData: dataTable,  //excel文件中的数据源             sheetName: tableName,  //excel文件中sheet页名称             sheetFilter: tableKeys,  //excel文件中需显示的列数据             sheetHeader: tableKeys,  //excel文件中每列的表头名称           }     ]     let toExcel = new ExportJsonExcel(option);  //生成excel文件     toExcel.saveExcel();  //下载excel文件 }

5. 基于 Table 数据自动生成多维度可视化报表

在后台管理系统和 BI 平台中我们会遇到很多数据分析和报表展示的需求, 接下来笔者将来介绍一下如何基于 Table  数据动态生成多维度可视化分析报表.

笔者在之前的文章中介绍过 度量行这个概念, 对于数据分析而言, 我们也要考虑可分析维度的概念, 比如什么是可分析的, 什么是不可分析的.  比如我们又一个表格, 里面有如下结构:

对于联系方式而言, 它是不可度量的, 即分析该项指没有任何价值, 所以在自动生成多维度分析中我们理论上不因该分析它, 基于这个原理,  我们来设计一个简单的自动生成多维度可视化报表的方案.

5.1 基于数据源获取维度数据

我们针对具有范围属性的维度进行度量, 生成度量数据, 代码如下:

const generateDistData = (key:string, list:any) => {     let distDataMap:any = {},         distData = []     list.forEach((item:any) => {         // 当前纬度的类别         let curKey = typeof item[key] === 'object' ? item[key][0].label : item[key];         if(distDataMap[curKey]) {             distDataMap[curKey]++;         }else {             distDataMap[curKey] = 1;         }     })      // 生成目标数组     for(let key in distDataMap) {         distData.push({name: key, value: distDataMap[key]})     }     return distData   }

此时我们只需要根据维度的字段, 即可获取某一维度的数据值, 后通过可视化组件渲染即可.

5.2 基于某一维度生成可视化报表

我们用@ant-design/charts, 代码如下:

              分析纬度:           handleAnazlyChange(0, v)} defaultValue={keys[0]}>             {                 keys.map((item,i) => {                     return { item }                 })             }