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

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

    复制链接 | 收藏本帖
    15197
    7

    混乱七星天 数据达人Lv4

    发表于2018-7-31 11:43

    楼主
    一、页面一览  
       

    人力资源

    人力资源

    二、页面分析
    1、 整体框架
        ·主题表：D_EMPLOYEES
        ·页面结构：宽百分比，高固定，自定义布局，布局结构如下
        2.png
        ·报表背景：背景图片+百分比样式
        3.png
        自定义样式
        background-size:100% 100%;
        fyi：背景图片打包在压缩文件中
        ·布局标题：图片+文字+百分比边距
        4.png
        ·布局边框：使用边角图片，水平居左或者居右
        5.png


    2、 模块详解
        1） 综合总览
        ·底部图片：固定大小，水平和垂直都居中（不适合自适应，自适应会让图片拉伸失真）
        ·三个指标框：通过三个小容器嵌套，文本间距通过脚本实现
        6.png
        letter-spacing:9px;

        2） 员工性别分布
        ·员工性别占比图像：设计思路是通过男女图像来展示百分占比，图像通过容器固定位置，并且通过数值来判断显示与否
        ·H5饼图外圈效果两步曲：
        第一步：取消html5的拖拽计算
        7.png
        第二步： 设置两个系列，第二个系列半径设为1
        8.png

        3） 员工工龄分布、员工职级人数分布
        ·H5饼图外圈实现方式同上
        ·饼图牵引线实现方式如下
        9.png

        4） 员工年龄段分布
        H5条形图，简洁直观，这个相信大家自己做能比这个更好呢

        5） 员工工作地点和各地区人员职位分布
        A、H5渲染图，想跟大家分享的是：
        ·地图边框颜色设置
        10.png
        ·值域设置
        启用值域，并且隐藏，设置值域颜色黄蓝绿渐变['#3BC06B','#18DDF8','#FFD925']
        11.png
        B、More钻取员工详情表
        该部分的设计主要通过脚本来实现以下效果：
        ·钻取路径样式设置
        ·报表参数样式设置
        ·表格滚动条设置
        fyi：第三大部分会专门针对脚本给大家说明

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

    三、脚本分析
    1、主表：
    1. addStyleSheet("#BODYAREA{overflow:hidden !important}");
    2. addStyleSheet(".scrollBarContainerClass{width:10px !important;}");
    3. addStyleSheet(".scrollBarClass{border-radius:10px !important;background-color:#001725 !important;}");

    5. include("vfs/root/demojs/slimscrollbody.js");
    复制代码
    2、子表：
    1. //钻取路径的背景色和字体颜色
    2. addStyleSheet("#rptDrillPath {background-color:#031e2b;color:#bdbec1;font-size:12px;height:50px}");

    4. //钻取路径中a标签的字体颜色
    5. addStyleSheet("#rptDrillPath a.drilllink {color:#06C7C0}");

    7. //报表参数样式控制
    8. addStyleSheet("div.widgetobj_container{color:#56aef3;} .xcombobox_cbar{border:1px solid #0B4454;background-color:#0B4454} .html_edit{background-color:#0B4454;color:#FEFEFE}");
    9. addStyleSheet("div.cmbBtOut{background:url(vfs/root/products/ebi/sys/picture/pcdemo/领导驾驶舱/HR/维下拉.png) no-repeat!important}");
    10. addStyleSheet("div.cmbBtOver{background:url(vfs/root/products/ebi/sys/picture/pcdemo/领导驾驶舱/HR/维下拉.png) no-repeat!important}");
    11. addStyleSheet("#WidgetParamSEDate21 div div span{background:url(vfs/root/products/ebi/sys/picture/pcdemo/领导驾驶舱/HR/维下拉.png) no-repeat!important}");
    12. addStyleSheet("#WidgetParamButton2{border:1px solid #0B4454!important;}")

    14. //滚动条样式
    15. addStyleSheet("#HHH21{overflow:hidden !important}");
    16. addStyleSheet(".scrollBarContainerClass{width:5px !important;}");
    17. addStyleSheet(".scrollBarClass{border-radius:10px !important;background-color:#013B46 !important;}");

    19. include("vfs/root/demojs/slimscroll.js");
    20. new slimScroll($("#HHH21")[0], {
    21.       'wrapperClass': '',

    23.       'scrollBarClass': 'scrollBarClass',

    25.       'scrollBarContainerClass': 'scrollBarContainerClass',  

    27.       'scrollBarContainerSpecialClass': '',

    29.       'scrollBarMinHeight': '',

    31.       'scrollBarFixedHeight': '',

    33.       'keepFocus': true
    34.     });
    复制代码

    四、配色说明
    1、 饼图
        蓝：#00D7CF
        橙：#E78448
        黄：#FFCB4D
        绿：#00CF7B
        显示文字颜色：#06C7C0

    2、 条形图&柱形图
        柱子颜色：#1EDBE6
        坐标轴标签字体颜色：#06C7C0
        坐标轴轴线&网格线颜色：#0B4C55

    3、 折线图
        草绿：#3BC06B
        深黄：#FFBA1D
        坐标轴设置同上

    4、 统计图提示信息
        背景颜色：#024048
        字体颜色：#FFFFFF

    5、 地图
        边框颜色：#C4DA5A
        值域颜色：['#3BC06B','#18DDF8','#FFD925']

    6、 表格
        容器外边框颜色：#33595A
        标题行字体颜色：#33EAF3
        标题行背景颜色：#073540
        表体字体颜色：#C3FFFD
        奇偶行颜色：if(mod(row(),2)=0,'#07343f','transparent')

    五、资源文件
    1、 报表资源
        12.png
        fyi：zip文件可直接导入分析对象
              .rptttpl后缀文件可新建空报表后上传
        13.png

    2、 图片资源
        14.png
        直接上传到资源管理器，默认的路径：
        /root/products/ebi/sys/picture/pcdemo/领导驾驶舱/HR
        fyi：路径不要轻易修改，报表中在引用时使用了文件路径

    3、 脚本资源
        15.png
        直接上传到资源管理器，默认的路径：/root/demojs
        fyi：路径不要轻易修改，报表中在引用时使用了文件路径

    4、 资源文件
        人力资源.rar (810.85 KB, 下载次数: )

    最近看过此主题的会员

    Gardenia

    980

    chestnut

    esen_4Q6MZ9SWVR

    wxw

    esen_4PG7NJS3QF

    zhuhc

    wal10000

    一一

    qinj

    esen_4FEZ7U2INX3Q

    zhzh

    zhaolj

    哇咔咔01

    Ly_LJY

    hhejianping

    QQ空间 微信
    7个回答

    只看楼主

    韦韬然 数据老手Lv5

    发表于2018-8-1 09:56

    丨

    只看该作者

    丨

    取消 关注该作者的回复

    沙发

    回复

    localhost:8080 小试身手Lv3

    发表于2018-8-1 10:03

    丨

    只看该作者

    丨

    取消 关注该作者的回复

    板凳

    学习

    回复

    忘记你 初学数据Lv2

    发表于2018-8-2 14:10

    丨

    只看该作者

    丨

    取消 关注该作者的回复

    地板

    get新技能

    回复

    韦韬然 数据老手Lv5

    发表于2018-8-2 14:20

    丨

    只看该作者

    丨

    取消 关注该作者的回复

    5#

    炫酷

    回复

    limengyu

    发表于2018-8-13 17:03

    丨

    只看该作者

    丨

    取消 关注该作者的回复

    6#

    学习了！

    回复

    韦韬然 数据老手Lv5

    发表于2018-8-13 17:59

    丨

    只看该作者

    丨

    取消 关注该作者的回复

    7#

    日常顶

    回复

    一一 初学数据Lv2

    发表于2021-12-2 15:48

    丨

    只看该作者

    丨

    取消 关注该作者的回复

    8#

    截图202112021546292818.png 想问最外面这个线圈颜色是如何更改的啊，同样报表用了H5饼图

    回复

    登录后可回答问题，请登录或注册

    和辰哥，话技术！
    我要发帖
    热门推荐
    热门视频
    热门产品推荐

    小时

    全天响应

    分钟

    快速处理问题

    工程师强势助力

    明星产品
    一站式数据分析平台-亿信ABI
    智能数据治理平台-睿治
    解决方案
    大数据治理方案
    数据标准化及质量管控方案
    主数据管理方案
    数据资产盘点方案
    联系合作

    渠道咨询电话：137-0120-6790

    技术支持QQ：400-0011-866(工作日9:00-18:00)

    产品建议邮箱yixin@esensoft.com

    关注我们

    扫TA学习更多干货

    一对一专家交流

    版权所有© 2006-2024 北京亿信华辰软件有限责任公司 京ICP备07017321号 京公网安备11010802016281号