在上一篇【在线组件库升级】中，通过组件复用，我们轻松完成了四张决策报表的开发并分享给了各位~
但是，仍有很多朋友被“组件效果很不错，应用到模板整体效果就变得一般”这一问题困扰。 所以这次，小编带着模板美化两大技巧：精准选择复用组件+合理规划组件布局应声而来！！
针对应用组件复用来开发决策报表，主要涵盖了两个主要流程：
（本期示例模板及应用组件可在文末免费下载）
>>>前期规划
1.场景规划
本次示例预设场景为：人资分析驾驶舱；风格为：浅色-简约清新风；所要展示指标及展示形式如下：
2.复用组件☆☆☆
在完成内容梳理后，如何根据规划的风格和展示形式，精准有效的挑选组件并合理排布，亟待解决~
大招一：精准选择复用组件☆ - 选择直观效果有明显区别的组件。如：蝴蝶图替代“指标卡+条形图”，将纵向轴标签置于中心，体现对称美感；条形图以图片填充替代则效果更丰富美观。
- 图表类型不变，注意细节样式优化。如：渐变堆积柱形图在普通柱形图的基础上做了系列色渐变的优化；双轴面积图替代折线图，将两个系列的面积图在纵向上做出明显划分。
- 合理替换图表类型，选择特殊图表替代普通图表。如：以堆积柱形雷达图替代柱形图，将横向展示改为环形展示，避免多列柱形图造成视觉效果单调；以半玫瑰图替代饼图，在保证分析占比功能同时将重点数据突出显示。
- 动静结合，才是有活力的决策报表。如：用流向地图替代普通点地图，加入动态效果，避免使用者对于静态数据产生视觉疲劳；提示轮播，免去鼠标移动的动作，自动显示数据提示。
- 注意视觉平衡，避免整体过于单调或繁琐。如：上述图表的选择都是在效果上做加法，那么为保证整体平衡，可以选择简约的虚线标题，降低直观效果的复杂程度。
至此，我们完成了组件的选择，各位在实际选择组件的过程中，可以参考上述建议美化自己的决策报表。
大招二：合理规划组件布局☆
决策报表的布局规划需要结合两个角度：数据分析维度和视觉效果维度。列举一些常用技巧给各位参考：
i.数据分析—根据实际业务场景规划 （1）核心业务指标作为整张决策报表的重心内容，可以放置于中心位置； （2）次要指标以核心指标为中心分布四周，同时考虑常规分析习惯，根据指标类型、关联关系及重要程度依次排布。
ii.视觉效果 （1）占据面积较大、具有动态效果的组件一般居中放置；两侧及下方多为各类图表。 （2）指标卡形式一般放置在左右两侧的上方位置； （3）“圆形”图表，如：雷达图、饼图等，多放置于两侧居中位置； （4）系列较少的"横向展开图表"，如：折线图、柱形图，多放置于两侧的下方位置； （5）系列较多的“横向展开图表”或“横向占面积较大”的条形图，多放置于地图下方；
参考上述内容，我们很容易将选择的组件进行如下的排布：
>>>开发实施
在前期规划内容完成之后，我们便可以着手正式开发，主要步骤如下：
1.数据准备：
2.组件布局：2）将挑选好的组件，根据规划布局依次拖拽至决策报表body的大致位置，进行布局、尺寸调整。 - 技巧1：默认的决策报表尺寸为960*540，本次三列内容布局的尺寸可以大致保持横向3:5:3，纵向1:1:1的比例关系。（根据设备分辨率的区别，实际body大小会进行一定比例的缩放）
- 技巧2：各个组件之间应该保持一定间距（通常间距大小横向10-15，纵向5-8即可），整体组件的左右和下方也要保持一定的留白，间距大小可参考组件间距。
3.替换数据源 按照组件介绍进行配置，效果更好还不容易走弯路哦~ - 技巧3：利用“单元格元素”进行数据替换，会更有利于我们与原数据设置保持一致；
- 技巧4：单元格有特殊颜色“三角标”时，往往有特定的设置需注意： 如“绿色左上三角标–单元格形态”等，详见：单元格标识说明
- 技巧5：替换数据源会对图表的“标签”、“数据点提示”等产生影响，需在此步骤进行配置；
示例1：蝴蝶图-数据源替换及单元格进度条最大值修改：
示例2：半玫瑰图-图例条件属性修改：
4.组件效果优化
（1）首次预览：通过前几个步骤的铺垫与准备，驾驶舱的开发已基本完成。预览后可以看到，只需要简单修改组件的标题内容即可。
重要提示：本次引用的部分组件，标题需“使用html解析文本内容”；并在修改标题内容后去掉标题前的“=”以实现效果哦！！
（2）完成标题内容优化，一张精美的驾驶舱通过组件复用就轻松完成啦！
如果各位看了这套流程，也觉得操作简单、跃跃欲试的话！ 那就快快来参与社区内【组件复用】两招搞定精美驾驶舱 活动投稿吧~上传个人开发成果，即可获得10-20F币的奖励。
在线组件库也在稳定上新，本周推出了“深色系”组件20余种。
“浅色系“组件也在紧锣密鼓的筹备中，会在下周和大家见面~
ps：
编辑于 2021-6-23 11:28
| 
