前言本文是基于H5编辑器后台管理系统实战的第二篇文章，也是比较重要的一篇文章。主要介绍如何根据后台系统已有的数据表，自动生成多维可视化报表。之所以会花3篇文章介绍这部分的内容，是因为目前很多B端产品都有类似的需求，比如导入导出excel、在线编辑表格、根据表格数据生成可视化图表、用户权限路由和权限菜单设计等这里笔者总结了以下3点核心知识：如何使用JavaScript实现excel文件的前端导入导出（H5编辑器实战回放）前端如何生成多维度一键根据表格中的数据进行数据可视化分析报表如何实现会员管理系统权限路由和权限菜单希望通过这三篇文章的复习和实战，可以让大家更轻松的开发企业应用。本文涉及的主要技术点如下：antv/g2可视化组件库antdTable可测纬度和javascript分类算法文通过上面的介绍，我们可能还不太清楚接下来要做什么。为了方便大家理解，我们来看一下实现效果：第一张图是我们的Table数据源，右上角有exportExcel和generateanalysisReport这两个功能键，部分我们已经介绍过了上一篇文章导出excel，这里就详细分析一下生成分析报告的功能。另外可视化图表我们使用antv的g2，如果有兴趣对@ant-design/图表比较熟悉，也可以直接使用图表。图表库主要为我们提供数据的可视化和展示，不是本文的重点。有兴趣的可以自行学习理解。可测纬度的认识什么是可测纬度？这里给大家简单介绍一下比如我们要分析程序员的脱单意愿，需要从几个纬度做统计，比如性别，脱单意愿，如果要分析用户在更详细一点，我们还可以收集用户的兴趣爱好，年龄段，这些特征（性别，脱单欲望，兴趣爱好）都可以作为一个单一的维度来分析统计用户，所以都是可分析的维度。但是像用户填写的昵称、ID等信息，大家基本上这样的纬度分析可能会出现“千人千面”的情况，不适合作为统计指标来分析，所以这样的领域是一个无法测量的纬度。以下数据：从上面的分析，我们可以发现性别、兴趣爱好、脱单欲望三个纬度都是可能的测量纬度，以便我们对其进行分析。分析结果如下：以上数据为笔者通过H5-Dooring编辑器配置的表单页面采集而来，数据基本真实。如果你也想填问卷，可以点击阅读原文填写。从上图可以看出，填表的人90%是男性，10%是女性，60他们中有%通常喜欢吃饭和睡觉。40%的人平时喜欢健身和旅游（这也不错~）。那么从第三张图我们可以发现，50%的人渴望脱单，20%的人认为单身很好（太难了）。所以基本上根据图表的分析，我们可以得到一些有用的信息，知道我们后面的下单动作。以上是一个真实的例子。当然，在企业实际应用中分析出来的内容往往更有价值。通过数据的直观呈现，了解企业的??决策，是可视化图表非常重要的一个方面。价值点。说完了概念和实际应用，我们来看看如何通过技术手段实现这样的功能。基于多维数据可视化分析报告的一键式数据生成方案，上面引入了可测纬度的概念。在本章中，我们将实现如何计算可测量的纬度。我们都知道Table中的一个字段是可测的，要么是n比1，要么是多选，所以根据这个规则，我们提取了单选和多选字段，但是前提是这个数据结构表单集合页面必须一致。我们来看看配置了H5-Dooring的表单采集页面是什么样子的：从表单我们可以看出，性别，兴趣爱好，下单意愿属于可测纬度，所以我们应该将其字段数据定义为如下格式：[{value:"Fitness",label:"Fitness",key:"Fitness"}]//或者（一般多选情况）["Food","Fitness","Travel"]这样我们就可以使用javascript根据数据特征提取可衡量指标的算法。代码如下：constgenerateDistData=(key:string,list:List)=>{letdistDataMap:any={},distData=[]list.forEach((item:Item)=>{//当前纬度的类别letcurKey=typeofitem[key]==='object'?item[key][0].label:item[key];if(distDataMap[curKey]){distDataMap[curKey]++;}else{distDataMap[curKey]=1;}})//生成目标数组for(letkindistDataMap){distData.push({name:k,value:distDataMap[k]})}returndistData}以上方法可以提取纬度信息，生成antv/g2可以消费的数据体。代码使用object方法对表数据进行过滤分类，即list（根据指定key），最后将分类后的数据放入target数组中。generateDistData方法的第一个参数key是可测纬度的字段名。我们在生成表数据的时候会生成一个可测纬度的数组。用户每次切换到测量纬度时，都会调用一次generateDistData，用于生成相应的数据，供图表库消费。实现如下：constandleAnazlyChange=(index:number,v:string)=>{constconfig={appendPadding:10,data:generateDistData(v,list),//默认显示第一个字段angleField:'value的分析数据',colorField:'name',radius:0.8,label:{type:'inner',offset:'-0.5',content:'{name}{percentage}',style:{fill:'#fff',fontSize:14,textAlign:'center',},},};setConfig(config)}最后，我们将数据消费到图表中：
