手机零售移动端BI分析

背景

随着信息化时代的来临，时间成本对于企业的重要性也越来越高，在重要时刻的及时反应甚至可以帮助企业获得更多的回报率，而“移动办公”也已经成为了企业管理者乐于见到的主流办公方式。

场景意义

“手机零售移动端BI分析”基于Smartbi V10移动驾驶舱制作，让企业关键零售数据尽在“掌”握，可在任何时间、任何地点处理与业务相关的任何事情，帮助用户摆脱时间和空间的束缚；

同时，零售数据可以随时随地进行交互，使工作更加轻松有效，整体运作更加协调；领导者可以直观地监测手机零售情况，并对异常的关键指标进行预警，实现决策分析无处不在的实时动态管理。

“手机零售移动端BI分析”效果如下图所示：

定制方法

总体设计

根据需求规划“手机零售移动端BI分析”，整体布局设计如下：

用户可把日常的各品牌手机零售数据分析成果发布到移动驾驶舱中进行应用；通过实时图形化展示手机零售业务指标数据，如零售成本、零售利润等；

布局各设置项说明如下：

设置项	参数	说明
布局方式	宽度自适应	仪表盘会自动调整显示宽度以适应不同设备的宽度，高度固定以实现垂直滚动效果。
主题	浅色主题	仪表盘主题选择浅色主题。
配色	#3B82F4	大屏选择以白色为背景，主色调采用蓝色、浅蓝色，用橙色突出显示数据。

示例详解

1、整体布局

组件名称

组件类型

定制方法

效果

零售情况分析

TAB页

1、选择TAB页组件拖入到画布区

2、编辑页签，输入“零售概览”、“零售详情”

3、对页签分别编辑URL，选择内部资源“零售概览”、“零售详情”

2、在TAB页签中上传背景图，页签样式设置如下：

3、宏管理

（1）页面宽度宏（对象：仪表盘；事件：onRender）

function main(page: IPage) { 
    let pageContainer = document.getElementsByClassName('__DashboardLayout_pageContainer');
    if (pageContainer && pageContainer.length > 0) {
        pageContainer[0].style.paddingLeft = '0px';
        pageContainer[0].style.paddingRight = '0px';
    }
    let header = document.getElementsByClassName('el-tabs__header');
    if (header && header.length > 0) {
        header[0].style.margin = '0px';
        header[0].style.backgroundSize = "100% 164%";
    }
    let navWrap = document.getElementsByClassName('el-tabs__nav-wrap');
    if (navWrap && navWrap.length > 0) {
        navWrap[0].style.marginLeft= 'auto';
        navWrap[0].style.marginRight = 'auto';
        let nav = navWrap[0].getElementsByClassName('el-tabs__nav');
        if (nav && nav.length > 0) {
            nav[0].style.paddingRight = '0px';
        }
    }
}

（2）设置页签栏样式（对象：组件TAB页；事件：onRender）

function main(page: IPage, portlet: IStaticTabsPortlet) {
    setTabHeaderStyle(portlet)
}
function setTabHeaderStyle(portlet: IStaticTabsPortlet) { 
    let header: CssSelector = '.el-tabs--border-card .el-tabs__header'
    let wrapper: CssSelector = '.static-tabs__view .el-tabs__nav-wrap'
    // 设置页签栏的高度
    portlet.appendCss(header, `{
        height: 140px;              /* 页签栏高度 */
        padding-bottom: 10px;
        display: flex;
        flex-direction: row;
        position: relative;         /* 页签栏作为下面标题的父级 */
        align-items: flex-end;
        box-sizing: border-box;
    }`)
    // 通过样式伪元素设置浮动居中的标题内容
    portlet.appendCss(`${header}::before`, `{
        content: "手机零售分析";
        height: auto;
        width: 100%;
        display: block;
        position:absolute;
        z-index: 1;
        top: 0px;
        left: 0px;
        padding-top: 36px;
        color: #ffffff;
        font-size: 24px;
        text-align: center;
    }`)
    // 去掉页签栏两边多余的留白（原来：右边留白为了显示最大化按钮，左边留白为了与右边对称）
    portlet.appendCss(wrapper, `{
        margin-left: 0px;
        margin-right: 0px;
    }`)
}

（3）设置页签项样式（对象：组件TAB页；事件：onRender）

function main(page: IPage, portlet: IStaticTabsPortlet) {
    setNavitorStyle(portlet)
}

function setNavitorStyle(portlet: IStaticTabsPortlet) {
    // portlet.removeCss()
    // 文字大小
    let fontSize = 12
    // 页签栏高
    let navitorHeight = 30

    // 页签文字常规样式
    let normal:CssObject = {
        'font-family': '思源黑体',
        'font-size': `${fontSize}px !important`,
        'font-weight': '400',
        'max-width': 'initial'
    }
    // 页签文字高亮样式
    let emphasis: CssObject = {
        // 'font-weight': '400 !important'
    }
    // 单个页签
    let itemNormal: CssObject = {
        'margin-right': '15px', // 页签的间隔
        'border-radius': '5px', // 页签圆角：如果要很椭圆（计算方式）：圆角大小=页签行高/2
        'line-height': `${navitorHeight}px`, // 页签的行高
        'height': `${navitorHeight}px`, // 页签的高度
        'padding': '0 10px',
    }
    // 页签选择器
    let item:CssSelector = '.el-tabs__item'
    let navitor: CssSelector = `.el-tabs--border-card>.el-tabs__header ${item}`
    // 页签文字选择器
    let navitorText: CssSelector = '.static-tabs__view-label-text'
    // 高亮选择器
    let active: CssSelector = '.is-active'

    
    // 设置页签样式
    portlet.appendCss(`${navitor}`, itemNormal)
    portlet.appendCss(`${navitor}:last-child`, `{
        margin-right:0px;
    }`)
    // 设置页签常规样式
    portlet.appendCss(`${navitor} ${navitorText}`, normal)
    // 设置页签高亮样式
    portlet.appendCss(`${navitor}${active} ${navitorText}`, emphasis)
}

通过TAB组件嵌入URL，利用自助仪表盘宏丰富TAB页签显示效果，实现零售概览、零售详情自由切换，丰富资源间的数据交互；

零售情况分析-1

TAB页

1、选择TAB页组件拖入到画布区（标签样式设置、标签样式宏可参考“零售情况分析”定制方法）

2、默认打开第二TAB页宏（对象：组件TAB页；事件：onRender）

function main(page: IPage, portlet: IStaticTabsPortlet) {
    portlet.setActiveTabName("1")
}

复制资源“零售情况分析”，通过自助仪表盘宏限定“零售情况分析-1”默认打开为业务详情，为后续跳转交互做准备！

2、零售概览

组件名称	组件类型	数据	定制方法	实现效果
零售时间	文本组件	无	1、拖入文本组件到画布区 2、输入文本内容，选择系统日期函数，调整内容样式（文本居右对齐、字体微软雅黑16px，颜色#B3692B）	零售时间通过函数显示当天实时日期，效果如下图所示：
零售情况	标签组件	无	1、拖入标签组件到画布区 2、组件设置如下： 3、输入内容，调整样式（字体微软雅黑18px） 4、设置跳转规则	“零售情况“通过表组件以清单的形式展现各类手机品牌的零售金额情况，通过点击手机具体品牌，可跳转至品牌零售详情情况，效果如下图所示：
零售情况	文本组件	产品名称零售金额	1、拖入表组件到画布区 2、数据选择数据模型“今日零售金额”，列选择字段“产品名称”、“零售金额” 2、基础设置如下：
实时零售数据	标签组件	无	1、拖入标签组件到画布区 2、组件设置如下： 3、输入内容，调整样式（字体微软雅黑18px）	“实时零售数据”分析了当日手机零售的成本以及利润，同时分析了较上日相比的增长或下降情况，效果如下图所示：
实时零售数据	文本组件	零售成本零售利润成本同比利润同比	1、拖入文本组件到画布区 2、数据选择数据模型“实时零售数据”，标记区选择字段“零售成本”、“零售利润”、“成本同比”和“利润同比” 3、插入表格，选择字段，调整文本样式，表格属性设置边框为0，背景为#c2e0f4	“实时零售数据”分析了当日手机零售的成本以及利润，同时分析了较上日相比的增长或下降情况，效果如下图所示：
零售规模	标签组件	无	1、拖入标签组件到画布区 2、组件设置如下： 3、输入内容，调整样式（字体微软雅黑18px）	“零售规模”通过从当日零售金额以及累计金额、笔数；通过与上一日情况比较，对手机零售情况进行全方位分析,效果如下图所示：
	文本组件	零售金额较上日年日均金额年较上日	1、拖入文本组件到画布区 2、数据选择数据模型“零售规模”，标记区选择字段“零售金额”、“较上日”、“年日均金额”、“年较上日” 3、插入表格，选择字段，调整文本样式，表格属性设置边框为0，背景为#c2e0f4
	文本组件	累计零售金额累计较上日	1、拖入文本组件到画布区 2、数据选择数据模型“零售规模”，标记区选择字段“累计零售金额”、“累计较上日” 3、插入表格，选择字段，调整文本样式，表格属性设置边框为0，背景为#c2e0f4
	空白组件	无	1、拖入空白组件至画布区
	文本组件	累计零售笔数笔数较上日	1、拖入文本组件到画布区 2、数据选择数据模型“零售规模”，标记区选择字段“累计零售笔数”、“笔数较上日” 3、插入表格，选择字段，调整文本样式，表格属性设置边框为0，背景为#c2e0f4
零售规模趋势	TAB页图形组件（线图）	日期零售金额当日零售金额当日零售笔数	1、拖入TAB页组件至画布区 2、tab页签分别命名为零售金额、当日零售金额、当日零售笔数 3、TAB页签样式设置如下： 4、TAB页形式选择跑马灯 5、宏管理（1）页签栏样式展开源码 function main(page: IPage, portlet: IStaticTabsPortlet) { setTabHeaderStyle(portlet) } function setTabHeaderStyle(portlet: IStaticTabsPortlet) { let header: CssSelector = '.static-tabs__view .el-tabs__header' let wrapper: CssSelector = '.static-tabs__view .el-tabs__nav-wrap' // 设置页签栏的高度 portlet.appendCss(header, `{ padding: 8px 0px !important; }`) // 去掉页签栏两边多余的留白（原来：右边留白为了显示最大化按钮，左边留白为了与右边对称） portlet.appendCss(wrapper, `{ margin-left: 0px; margin-right: 0px; }`) } （2）页签项样式展开源码 function main(page: IPage, portlet: IStaticTabsPortlet) { setNavitorStyle(portlet) } function setNavitorStyle(portlet: IStaticTabsPortlet) { // 文字大小 let fontSize = 12 // 页签栏高 let navitorHeight = 30 // 页签文字常规样式 let normal:CssObject = { 'font-family': '思源黑体', 'font-size': `${fontSize}px !important`, 'font-weight': '400', 'max-width': 'initial' } // 页签文字高亮样式 let emphasis: CssObject = { // 'font-weight': '400 !important' } // 单个页签 let itemNormal: CssObject = { 'margin-right': '8px', // 页签的间隔 'border-radius': '60px', // 页签圆角：如果要很椭圆（计算方式）：圆角大小=页签行高/2 'line-height': `${navitorHeight}px`, // 页签的行高 'height': `${navitorHeight}px`, // 页签的高度 'padding': '0 10px', } // 页签选择器 let item:CssSelector = '.el-tabs__item' let navitor: CssSelector = `.el-tabs--border-card>.el-tabs__header ${item}` // 页签文字选择器 let navitorText: CssSelector = '.static-tabs__view-label-text' // 高亮选择器 let active: CssSelector = '.is-active' // 设置页签样式 portlet.appendCss(`${navitor}`, itemNormal) portlet.appendCss(`${navitor}:last-child`, `{ margin-right: 0px; }`) // 设置页签常规样式 portlet.appendCss(`${navitor} ${navitorText}`, normal) // 设置页签高亮样式 portlet.appendCss(`${navitor}${active} ${navitorText}`, emphasis) } 6、拖入图形组件至“零售金额”页签，智能配图选择线图 7、数据选择数据模型“零售规模趋势”，列选择日期，行选择零售金额 8、基础设置如下： 9、坐标轴设置如下： 10、自定义属性如下：展开源码 { "dataZoom": [ { "type": "slider", "height": 10, "show": true, "xAxisIndex": [ 0 ], "start": 1, "end": 35, "zoomLock": true } ], "grid": { "bottom": 70 } } 11、其他页签设置可参考上述6-9步骤	“零售规模趋势”通过TAB页、线图以轮播的形式分析相关日期下，零售指标的增长数据，效果如下图所示：
客户规模	TAB页文本组件	累计客户数累计新增累计一般客户数一般新增累计长期客户数长期新增	1、拖入TAB页组件至画布区 2、TAB页形式选择跑马灯 3、拖入文本组件至页签1，标记区选择字段“累计客户数”、“累计新增” 4、插入表格，选择字段，调整文本样式，表格属性设置边框为0，背景为#c2e0f4 5、其他页签设置可参考上述3、4步骤	“客户规模”通过轮播图展示手机零售中的客户情况，包括一般客户和长期客户，效果如下图所示：
客户规模趋势	TAB页图形组件（线图）	日期新增客户新增一般客户新增长期客户	1、拖入TAB页组件至画布区 2、tab页签分别命名为新增客户、新增一般客户、新增长期客户 3、TAB页签样式设置如下： 4、TAB页形式选择跑马灯 5、宏管理（1）页签栏样式展开源码 function main(page: IPage, portlet: IStaticTabsPortlet) { setTabHeaderStyle(portlet) } function setTabHeaderStyle(portlet: IStaticTabsPortlet) { let header: CssSelector = '.static-tabs__view .el-tabs__header' let wrapper: CssSelector = '.static-tabs__view .el-tabs__nav-wrap' // 设置页签栏的高度 portlet.appendCss(header, `{ padding: 8px 0px !important; }`) // 去掉页签栏两边多余的留白（原来：右边留白为了显示最大化按钮，左边留白为了与右边对称） portlet.appendCss(wrapper, `{ margin-left: 0px; margin-right: 0px; }`) } （2）页签项样式展开源码 function main(page: IPage, portlet: IStaticTabsPortlet) { setNavitorStyle(portlet) } function setNavitorStyle(portlet: IStaticTabsPortlet) { // 文字大小 let fontSize = 12 // 页签栏高 let navitorHeight = 30 // 页签文字常规样式 let normal:CssObject = { 'font-family': '思源黑体', 'font-size': `${fontSize}px !important`, 'font-weight': '400', 'max-width': 'initial' } // 页签文字高亮样式 let emphasis: CssObject = { // 'font-weight': '400 !important' } // 单个页签 let itemNormal: CssObject = { 'margin-right': '8px', // 页签的间隔 'border-radius': '60px', // 页签圆角：如果要很椭圆（计算方式）：圆角大小=页签行高/2 'line-height': `${navitorHeight}px`, // 页签的行高 'height': `${navitorHeight}px`, // 页签的高度 'padding': '0 10px', } // 页签选择器 let item:CssSelector = '.el-tabs__item' let navitor: CssSelector = `.el-tabs--border-card>.el-tabs__header ${item}` // 页签文字选择器 let navitorText: CssSelector = '.static-tabs__view-label-text' // 高亮选择器 let active: CssSelector = '.is-active' // 设置页签样式 portlet.appendCss(`${navitor}`, itemNormal) portlet.appendCss(`${navitor}:last-child`, `{ margin-right: 0px; }`) // 设置页签常规样式 portlet.appendCss(`${navitor} ${navitorText}`, normal) // 设置页签高亮样式 portlet.appendCss(`${navitor}${active} ${navitorText}`, emphasis) } 6、拖入图形组件至“新增客户”页签，智能配图选择线图 7、数据选择数据模型“客户规模趋势”，列选择日期，行选择新增客户 8、基础设置如下： 9、坐标轴设置如下： 10、自定义属性如下：展开源码 { "dataZoom": [ { "type": "slider", "height": 10, "show": true, "xAxisIndex": [ 0 ], "start": 1, "end": 35, "zoomLock": true } ], "grid": { "bottom": 70 } } 11、其他页签设置可参考上述6-9步骤
零售质量	TAB页文本组件	逾期货款金额逾期货款金额S1 逾期货款金额S2 逾期货款金额S3 逾期客户数逾期客户数S1 逾期客户数S2 逾期客户数S3 累计补贴金额累计补贴金额较上日累计补贴金额较上月累计补贴金额S3	1、拖入TAB页组件至画布区 2、TAB页形式选择跑马灯 3、拖入文本组件至页签1，标记区选择字段“逾期货款金额、逾期货款金额S1、逾期货款金额S2、逾期货款金额S3“ 4、插入表格，选择字段，调整文本样式，表格属性设置边框为0，背景为#c2e0f4 5、其他页签设置可参考上述3、4步骤	“零售质量”通过轮播图展示手机零售中的逾期情况，包括货款逾期金额、客户逾期数量以及补贴金额，效果如下图所示：
零售分布	标签组件图形组件（油量图）	M1按机型 M2按机型 M3按机型 M1按群体 M2按群体 M3按群体	1、将图形组件拖至画布区，智能配图选择油量图 2、标记区选择字段M1按机型 3、设置数据格式为百分比 4、基础设置如下： 5、自定义属性如下：展开源码 { "series": [ { "startAngle": 180, "endAngle": 0, "center": [ "40%", "35%" ], "radius": "70%", "axisLine": { "roundCap": false, "lineStyle": { "width": 7 } }, "progress": { "show": true, "roundCap": false, "width": 7 }, "splitLine": { "show": false }, "axisTick": { "show": false }, "axisLabel": { "show": false }, "pointer": { "length": "70%" }, "detail": { "fontFamily": "Microsoft YaHei", "fontSize": "15", "fontWeight": "normal" } } ] } 6、其他油量图设置可参考上述1-5步骤	“零售分布”通过油量图分析各机型以及各群体间的手机零售情况，效果如下图所示：

3、零售详情

组件名称	组件类型	数据	定制方法	实现效果
零售金额（万元）	标签组件	无	1、拖入标签组件到画布区 2、组件设置如下： 3、输入内容，调整样式（字体微软雅黑18px）	“零售金额”通过零售情况中的产品，分别展现各产品的零售金额，效果如下图所示：
零售金额（万元）	文本组件	今日零售金额	1、拖入文本组件到画布区 2、数据模型选择“今日零售金额”，标记区选择字段“今日零售金额” 3、插入表格，选择字段，调整文本样式，表格属性设置边框为0，背景为#c2e0f4	“零售金额”通过零售情况中的产品，分别展现各产品的零售金额，效果如下图所示：
占总零售产品比例	标签组件	无	1、拖入标签组件到画布区 2、组件设置如下： 3、输入内容，调整样式（字体微软雅黑18px）	“占总零售产品比例”对零售情况中的各产品占比进行分析，包括总金额占比和客户占比，效果如下图所示：
占总零售产品比例	文本组件	零售金额占比零售客户占比	1、拖入文本组件到画布区 2、数据模型选择“总体占比”，标记区选择字段“零售金额占比、零售客户占比” 3、插入表格，选择字段，调整文本样式，表格属性设置边框为0，背景为#c2e0f4	“占总零售产品比例”对零售情况中的各产品占比进行分析，包括总金额占比和客户占比，效果如下图所示：
其他			零售详情中其他类型组件设置，可参考零售概览

关注我们

服务支持

页面树结构

手机零售移动端BI分析

背景

场景意义

定制方法

总体设计

示例详解

1、整体布局

2、零售概览

3、零售详情