我的位置：首页 › 大数据分析-亿信BI › BI-辰哥课堂 › DEMO解析第三期：领导驾驶舱之人力资源 ...

DEMO解析第三期：领导驾驶舱之人力资源

复制链接 | 收藏本帖

16196

: 混乱七星天数据达人Lv4

发表于2018-7-31 11:43

楼主

一、页面一览

二、页面分析

1、整体框架

·主题表：D_EMPLOYEES

·页面结构：宽百分比，高固定，自定义布局，布局结构如下

·报表背景：背景图片+百分比样式

自定义样式

background-size:100% 100%;

fyi：背景图片打包在压缩文件中

·布局标题：图片+文字+百分比边距

·布局边框：使用边角图片，水平居左或者居右

2、模块详解

1）综合总览

·底部图片：固定大小，水平和垂直都居中（不适合自适应，自适应会让图片拉伸失真）

·三个指标框：通过三个小容器嵌套，文本间距通过脚本实现

letter-spacing:9px;

2）员工性别分布

·员工性别占比图像：设计思路是通过男女图像来展示百分占比，图像通过容器固定位置，并且通过数值来判断显示与否

·H5饼图外圈效果两步曲：

第一步：取消html5的拖拽计算

第二步：设置两个系列，第二个系列半径设为1

3）员工工龄分布、员工职级人数分布

·H5饼图外圈实现方式同上

·饼图牵引线实现方式如下

4）员工年龄段分布

H5条形图，简洁直观，这个相信大家自己做能比这个更好呢

5）员工工作地点和各地区人员职位分布

A、H5渲染图，想跟大家分享的是：

·地图边框颜色设置

·值域设置

启用值域，并且隐藏，设置值域颜色黄蓝绿渐变['#3BC06B','#18DDF8','#FFD925']

B、More钻取员工详情表

该部分的设计主要通过脚本来实现以下效果：

·钻取路径样式设置

·报表参数样式设置

·表格滚动条设置

fyi：第三大部分会专门针对脚本给大家说明

6）公司员工人数趋势

典型的双轴双系列，这种类型的统计图大家一定是做过很多遍了，主要就在配色和细节配置，图例啊，网格线啊，坐标轴标签啊，大家多多尝试，一定会超越我们的哦。

三、脚本分析

1、主表：

addStyleSheet("#BODYAREA{overflow:hidden !important}");
addStyleSheet(".scrollBarContainerClass{width:10px !important;}");
addStyleSheet(".scrollBarClass{border-radius:10px !important;background-color:#001725 !important;}");
include("vfs/root/demojs/slimscrollbody.js");

复制代码

2、子表：

//钻取路径的背景色和字体颜色
addStyleSheet("#rptDrillPath {background-color:#031e2b;color:#bdbec1;font-size:12px;height:50px}");
//钻取路径中a标签的字体颜色
addStyleSheet("#rptDrillPath a.drilllink {color:#06C7C0}");
//报表参数样式控制
addStyleSheet("div.widgetobj_container{color:#56aef3;} .xcombobox_cbar{border:1px solid #0B4454;background-color:#0B4454} .html_edit{background-color:#0B4454;color:#FEFEFE}");
addStyleSheet("div.cmbBtOut{background:url(vfs/root/products/ebi/sys/picture/pcdemo/领导驾驶舱/HR/维下拉.png) no-repeat!important}");
addStyleSheet("div.cmbBtOver{background:url(vfs/root/products/ebi/sys/picture/pcdemo/领导驾驶舱/HR/维下拉.png) no-repeat!important}");
addStyleSheet("#WidgetParamSEDate21 div div span{background:url(vfs/root/products/ebi/sys/picture/pcdemo/领导驾驶舱/HR/维下拉.png) no-repeat!important}");
addStyleSheet("#WidgetParamButton2{border:1px solid #0B4454!important;}")
//滚动条样式
addStyleSheet("#HHH21{overflow:hidden !important}");
addStyleSheet(".scrollBarContainerClass{width:5px !important;}");
addStyleSheet(".scrollBarClass{border-radius:10px !important;background-color:#013B46 !important;}");
include("vfs/root/demojs/slimscroll.js");
new slimScroll($("#HHH21")[0], {
'wrapperClass': '',
'scrollBarClass': 'scrollBarClass',
'scrollBarContainerClass': 'scrollBarContainerClass',
'scrollBarContainerSpecialClass': '',
'scrollBarMinHeight': '',
'scrollBarFixedHeight': '',
'keepFocus': true
});