在Office的三大办公套件中，Excel可能是功能最多，也是最难掌握的。从日常的表格录入到复杂的业务数据统计分析，Excel就像一位武林高手，外表平凡，实力深不可测。熟练使用Excel，在日常工作中往往能事半功倍，而这里所谓的“熟练”，不仅是熟悉大量的公式、图表绘制等操作，而且掌握了非常重要的一门技能。功能数据透视表。所谓数据透视表，就是将原始明细数据表中涉及的各组相关数据进行分类汇总的产物。用户可以以不同的组合方式处理原始数据。比如下面这个销售业绩的原始数据：我们想知道每个销售员卖出了多少辆汽车，销售量，我们可以使用数据透视表来分析：从上表中我们可以清楚的看出几个销售员销售了多少辆汽车每个季度按人员销售，销售多少，每个品牌销售多少……等信息，数据透视表包括哪些字段，都是随意选择的。比如我们只想统计每个季度的销量和销售额：这里我们跳过汽车品牌信息，对应的字段选择设置为：我们也可以点击每个字段，选择要展示的子内容，对于比如只看1-3个季度的业绩，或者只看某个销售人员的业绩等。可见数据透视表是一种方便的原始数据按需可视化的工具，应用广泛在日常工作中。当工作场景中存在结合大量信息的原始数据表时，可以使用数据透视表快速获取有意义的数据洞察，为业务提供有价值的信息。为什么你的前端需要数据透视表？过去，大多数商务人士使用数据透视表的唯一渠道是Excel。由于Office办公套件长期垄断了企业办公市场，大部分行政和业务人员只会接触到Excel这种数据分析工具，而Excel本身就足够强大，其他工具很难获得在市场上站稳脚跟。然而，随着数字化浪潮的汹涌澎湃，数字化转型成为几乎所有企业都必须面对的机遇和挑战。疫情爆发后，居家办公的兴起对传统办公软件环境发起了新的冲击。现在的企业IT、业务、管理人员经常需要在多个软件环境之间切换，处理比过去高一个甚至几个数量级的海量数据。他们可能需要在办公室、地铁、酒店和家中随时处理业务请求。在这样的场景下，数据分析需求随处可见，随时出现，单靠Excel或类似的大型单体软件，远不能应对新时代的复杂挑战。仍以上述业务数据为例，该汽车销售公司的业务主管可能会在内部绩效管理APP上查看今年的数据，需要使用APP中的数据透视表功能；人事人员在计算奖金信息时，需要登录公司后台管理网站查看业务数据，并在网页上获取绩效排名；高管们在准备年报时，试图在报告中集成一个动态数据透视表组件，方便现场展示……所有这些需求都很难用Excel这样的单一工具来实现。在大多数情况下，使用嵌入的方式将数据透视表功能嵌入到相应的前端应用程序中是合适的。随着此类需求的快速增长，一站式解决方案开始出现在市场上，使企业和软件开发人员可以轻松地将传统上由Excel执行的功能集成到各种应用程序和页面中。我们今天的主角-SpreadJS是最好的之一。SpreadJS由葡萄城开发。是一款基于HTML5的纯前端表格控件，兼容超过450个Excel公式，具有“高性能、跨平台、与Excel高度兼容”的产品特点。深受光软件等知名企业青睐，被中国软件行业协会认定为“中国优秀软件产品”。2020年发布的SpreadJS14.0版本引入了强大的透视表功能，满足了企业在众多场景下集成数据分析深度能力的需求，也大大减轻了前端软件开发者的负担。前端集成数据透视表：简明教程使用SpreadJS，创建前端嵌入式数据透视表非常简单，如图：上图中的PivotLayout工作簿就是数据透视表的页面，DataSource为原始数据页面，图中右侧的面板为SpreadJS生成的透视面板，用户可以在此处调整必填字段，改变左侧透视表的显示信息。在数据透视表中，有四个区域：过滤器：控制数据透视表的数据范围。列：控制数据透视表的列分布。Rows：控制数据透视表的行分布。Values：控制数据透视表的计算数据和计算方式。输入以下代码创建数据透视表面板：letpanel=newGC.Spread.Pivot.PivotPanel("myPivotPanel",myPivotTable,document.getElementById("panel"));用户必须设置“面板”元素的宽度和高度。GC.Spread.Pivot.PivotPanel构造函数参数如下：下面是使用标准JS代码嵌入数据透视表的app.js文件：window.onload=function(){varspread=newGC.Spread.Sheets.工作簿（_getElementById（'ss'），{sheetCount：2}）;初始化传播（传播）；varpivotLayoutSheet=spread.getSheet(0);initPivotTable(pivotLayoutSheet);};functioninitSpread(spread){spread.suspendPaint();让sheet=spread.getSheet(1);sheet.name("数据源");sheet.setRowCount(117);sheet.setColumnWidth(0,120);sheet.getCell(-1,0).formatter("YYYY-mm-DD");sheet.getRange(-1,4,0??,2).formatter("$#,##0");sheet.setArray(0,0,pivotSales);lettable=sheet.tables.add('tableSales',0,0,117,6);for(leti=2;i<=117;i++){sheet.setFormula(i-1,5,'=D'+i+'*E'+i)}table.style(GC.Spread.Sheets.Tables.TableThemes[“无”]);让sheet0=spread.getSheet(0);sheet0.name("PivotLayout");spread.resumePaint();}函数ninitPivotTable(sheet){letmyPivotTable=sheet.pivotTables.add("myPivotTable","tableSales",1,1,GC.Spread.Pivot.PivotTableLayoutType.outline,GC.Spread.Pivot.PivotTableThemes.light8);myPivotTable.suspendLayout();myPivotTable.options.showRowHeader=true;myPivotTable.options.showColumnHeader=true;myPivotTable.add("销售人员","销售人员",GC.Spread.Pivot.PivotTableFieldType.rowField);myPivotTable.add("car","Cars",GC.Spread.Pivot.PivotTableFieldType.rowField);myPivotTable.add("date","Date",GC.Spread.Pivot.PivotTableFieldType.columnField);letgroupInfo={originFieldName:"date",dateGroups:[{by:GC.Pivot.DateGroupType.quarters}]};myPivotTable.group(groupInfo);myPivotTable.add("total","Totals",GC.Spread.Pivot.PivotTableFieldType.valueField,GC.Pivot.SubtotalType.sum);变量面板=新的GC.Spread.Pivot.PivotPanel("myPivotPanel",myPivotTable,document.getElementById("panel"));panel.sectionVisibility(GC.Spread.Pivot.PivotPanelSection.fields+GC.Spread.Pivot.PivotPanelSection.area);myPivotTable.resumeLayout();myPivotTable.autoFitColumn();}function_getElementById(id){returndocument.getElementById(id);}对应的html页面中加入的插件代码：
