从PC端到移动端的老番薯（客户）时常跟我们抱怨，在PC上做好的复杂报表在移动端压根就不能看嘛，简直就是“灾难”，你们说的良好的自适应效果都是吹牛逼！
产品君表示批评的对，由于手机屏幕比较小，复杂报表在现有的手机上展示的效果确实不尽如人意，不过，我们也一直没有停止对复杂报表展现效果优化的思考。
今天让我们用两种方式来改善这样的“灾难效果”吧！
我们先用demo中的一张复杂报表来看一看在移动端的展现效果：
这样一张PC端的复杂报表（列数大于10）在移动端竖屏状态原始效果如左图；
如果您不想对模板本身做调整，可以设置 ① 表头冻结显示、② 竖屏纵向自适应，通过左右滑动来查看，但是效果依然欠缺，如右图；
在这样的效果下，只能采取横屏的方式查看，这样的屏幕比例更接近PC，效果会略好一些；
但是使用手机横屏的操作在交互上更繁琐，在5寸左右的屏幕上浏览这么多数据依然影响使用。
我们分析了这类列数较多的复杂报表的样式，一般有两种类型：
1、所有列是同一维度的数据，比如是时间维度，一年12个月
2、不同的列是不同维度的数据，如demo所示，是对“地区”、“供应商”、“雇员”三个维度的分析
对于第一种类型，建议采用横屏查看，或者减少行数，再采用上面提及的 ① 表头冻结显示、② 竖屏纵向自适应，通过左右滑动来查看，实现方式参考帮助文档：移动端自适应；
对于第二种类型，我们可以采用APP界面的设计思路，将分析维度与表格主体拆分开来，通过点击不同维度名称查看不同维度的数据。
下面我们来介绍如何通过两种方式达成这样的效果
1、表单联动
新建两个报表块，上面的报表块用于参数的控制，下面的报表块用于数据的呈现；报表块之间的参数联动，控制主报表列的隐藏。从而达成：点击维度名称，切换查看内容的效果。
这样在表单报表块中，单一维度的数据就可以只通过上下滑动来显示，展现效果大大提升，示例中除了不同维度的数据，还提供了全部显示的方式，全量的数据可以通过上下左右滑动来显示。
实际效果如下：
注：有两种超链的方式，分别为动态参数（当前页重新刷新）和当前表单对象（被联动的表单对象刷新）
帮助文档参考：表单示例之组件联动
2、tab组件
针对数据维度创建tab组件，在tab块内创建报表块，将原先的报表内容直接复制到新建的报表块内，删除掉非当前维度的数据列。
同样，在表单报表块中，单一维度的数据就可以只通过上下滑动来显示，全量的数据可以通过上下左右滑动来显示。
实际效果如下：
注：tab组件需要使用H5解析，相关版本支持请参考帮助文档：表单支持html5方式解析
3、两种效果优势对比
从工作量上来说，两种方式差别不大，表单联动方式增加了参数联动和报表隐藏的工作，tab组件方式增加了多个新建报表块的工作，由于我们支持表单组件和报表块内容的复用，因此操作比较简单。
优势：可以按照自己的喜好设置维度切换的效果，并且采用原生解析，不会损失APP自带功能
缺陷：只有一个展示框，不同宽度的展示内容不能采用单一的竖屏横向自适应来解决，需要略微调整报表宽度
维度比较多的时候切换的效果有缺陷，刷新上面的报表块会直接从最左边显示，切换的效果就显示不出来了
优势：不同维度有不同的报表块，可以针对列数多少分别设置竖屏的自适应方式，更加合理
缺陷：tab组件需要H5解析，暂时不支持收藏、批注分享等功能
移动端解决方案完整工程打包下载：
链接: https://pan.baidu.com/s/1c2HFlAC 密码: axpy
往期移动端干货回顾：
【专题汇总】移动端解决方案
编辑于 2017-12-28 13:44
|
