网易有数BI移动端和PC端复用最佳实践

为了提高开发效率，我们都想开发一套报告模板，既能适配移动端也可以适配pc端。首先讲到适配，分两种：

方法1：一套相同布局的模板，在移动端和pc端都可以完成展示。

方法2：在pc端和移动端可以拥有各自的布局模式。对于网易有数BI两套模式都支持。但是支持不一定等于完美展示。这里聊聊最佳实践。

方法1：一套相同布局的模板，在移动端和pc端都可以完美展示。

网易有数BI报告遵循Html5方式，我们可以根据报告尺寸等比缩放，且在不同的终端，交互方式也会自动跳转。

我的建议是报告布局采用通用手机尺寸的长宽比放大到pc端宽的倍数。

举个例子：目前移动端通用型号380：680。

你会发现在当前画布做报告很小很窄。

那一般的pc端的宽度做报告在1200左右为宜。所以我们可以对移动端都乘以3倍。即画布长度为：380*3：680*3=1140:2040

用当前画布做报告，体验会比较好。无论拉组件做图表，或者其他操作，开发体验都会比较好。开发完成后，我们看一下pc端的效果。在pc端有两种模式1种自适应窗口模式。

PC端自适应窗口

PC端自适应宽度

我个人比较喜欢适应宽度模式。因为自适应宽度，数据看不完可以下拉。或者利用ctrl+鼠标滑轮进行在浏览器上的缩放。

移动端的效果

移动端方式就非常ok。

方法2：在pc端和移动端可以拥有各自的布局模式。

这种方式核心原理就是用最小代价去重做。有数BI报告在发布移动端的时候，有自动布局和手工布局。手工布局就是把pc端所有的组件重新组合。如果报告的布局非常简单，当前方法还是非常不错的。

例如PC的样式：

可以利用发布移动端功能的手工布局。

自己再做自由布局，如图：

两种方式的优缺点：

布局小技巧：

技巧1：

要学会用自定义画布功能。同时位移步长10像素，有助于对组件的微调。

技巧2：

利用ctrl选中多个组件，对多个组件进行组合。这样组件就为一体。方便后期的复制和布局。

尤其是前面的方法2，利用组合功能，提高手工布局的灵活性。

技巧3：

利用报告分享功能预览报告，然后利用浏览器的开发者模式，可以对开发完成的报告，以不用尺寸的方式查看，以此模拟移动端。（注意：个别交互功能浏览器可能会和实际移动端有差异。）

技巧4：

手机端有时候别忘了可以有横屏功能（自动旋转），有些pc端的报告。利用手机横屏功能效果也不错。