Smartbi Insight V10帮助中心
页面树结构
转至元数据结尾
转至元数据起始

1. 报表总览

1.1背景描述

企业销售数据分析作为目前企业经营中，发现问题、调整策略、优化方向的重要依据手段，已经逐渐在各个行业部门被重视起来。销售数据作为经营状况的直观体现，更需要深入分析，通过从多个角度分析企业的销售活动，评价企业生产经营的成果，找出能够提高效益的潜力，是很有必要的。

1.2需求分析

企业可以根据业务情况，选取关键的数据进行分析监控，比如各区销售额的区别等等，我们要分析各区销售情况的意义，第一在于可以看到一个动态更新的日常报告，第二是可以看到整体和分区的区别报告，掌握总体和局部的业绩完成情况和影响因素等，还可以对维度进行再切片，选择好我们分析的维度，从结果推出结论，给企业将来如何制定发展战略提供科学性的依据。

根据全国各区产品销量数据实现以下目标：

  1. 查看年度销售额、利润、订购量；
  2. 了解区域销售情况和总体基本销售情况；
  3. 了解客户、季度等因素对销售情况的影响。


2. 定制方法

2.1. 总体设计

根据需求规划整个大屏所展现的内容，以及具体通过哪些组件实现最终效果。

该大屏需要展示根据不同年份全国、各区域，订购量、销售量、利润等数据的对比情况，整体布局设计如下：

设置项说明如下：

设置项参数说明
尺寸1920*1080根据需要投屏的屏幕大小，设置屏幕尺寸。
缩放方式等比缩放宽度铺满宽度铺满全屏，高度按比列自动缩放。
图形渲染器SVG

适用于大区域渲染程序，比如高保真图形、带有某些特效的静态图像。

主题浅色主题

选择浅色主题，在仪表盘中上传自定义背景并选择拉伸和滚动。

配色

#38A1D9

大屏选择深蓝色作为背景色，提升专业性。

组件选择深蓝色、浅蓝色、白色等，选择黄色突出显示数据。

详情请参考自适应方式 、交互式仪表盘-主题区 。

2.2. 组件详解

2.2.1.区域销售情况

组件

数据

定制方法

效果

销售类型前五

订单信息数据集

行：销售量

列：产品类别

1、在组件中选择“横条图”或者直接搜索组件“横条图”，然后将“横条图”组件拖入画布中

2、选择销售量、产品类别字段

3、在标记区中选择颜色并设置为为“#38A1D9”

4、组件设置中设置如下：

  • 基础：圆角为左上30px；右上30px；左下30px；右下30px。柱间距：不同系列10%；同系列30%
  • 组件：标题为“销售类型前五”
  • 坐标轴：分类轴刻度选择自动，颜色为“#FFFFFF”，隐藏轴线；指标轴刻度设置为不显示并隐藏轴线
  • 图例：位置选择无图例
  • 高级：输出行数为5


销量前五

订单信息数据集

标记区：颜色选择“产品名称”，角度选择“销售量”。

1、在组件中选择面积玫瑰饼图并拖入画布区

2、选择产品名称、、销售量字段

3、在标记区中选择颜色并分别设置为“#66CCFF”、“#5DC4FF”、“#5DA9FF”、“#6590FF”、“#677DFF”，销售量排序方式为“降序”

4、组件设置中设置如下：

  • 基础：半径内25px；外90px
  • 组件：字体颜色为“#FFFFFF”，标题为“销量前五”
  • 图例：位置选择无图例
  • 高级：输出行数为5


详情请参考 横条图/堆积横条图 、饼图 。

2.2.2.订购量、销售量、利润

数据

定制方法

效果

产品信息数据集

订购量

销售额

销售量

1、在组件中选择简单指标卡，并拖拽到画布区。

2、选择订购量、销售额、销售量三个字段

3、在标记区标签设置中，设置标签大小为24%，字体为“黑体”加粗，颜色“#F8E71C”。

4、在组件设置中设置标题的字体“微软雅黑”加粗，颜色“#4A90E2”，隐藏标题。

销售额、销售量设置方法相同。

详情请参考 油量图 。

2.2.3.全国销售量

数据

定制方法

效果

产品信息数据集

列：省份

标记区：颜色选择“数量”

1、在组件中选择区域地图，并将其拖拽图形组件到画布区，

2、选择省份和数量字段

3、在组件设置中设置如下：

  • 基础：区域颜色“#0E4992”，区域边界颜色“#2C460C”，缩放比例1.25
  • 组价：隐藏标题
  • 图例：无图例
  • 高级：左键下钻选择“禁止”

4、组件右键选择宏管理然后新建宏：

复制代码到编辑区域：

地图宏 
function main(page: IPage, portlet: IEChartsPortlet) {
    // 阴影颜色
    var shadowColor = "#FFFFFF";
    // 地图边框线条大小
    var borderWidth = 1.5;
    // 正常状态地图区域颜色
    var areaColorNormal = "#003FA6";
    // 正常状态地图边框颜色
    var borderColorNormal = "#2275FF";
    // 正常状态地图区域颜色
    var areaColorEmphasis = "#0c274b";
    // 正常状态地图边框颜色
    var borderColorEmphasis = "#1cccff";
    // 提示框大小，格式：[宽度，高度]
    var tipToolSize = [120, 50];


    //获取图形信息
    var options = portlet.getChartOptions();
    if (!options.geo) {
        return;
    }
    var _geo = JSON.stringify(options.geo);
    var geo = [];
    geo.push(JSON.parse(_geo));
    if (!geo[0].itemStyle) {
        geo[0].itemStyle = {};
    }
    if (!geo[0].itemStyle.normal) {
        geo[0].itemStyle.normal = {};
    }
   
     geo[0].aspectScale = 1;
    // 海南诸岛不显示阴影
    geo[0].regions = [{
        name: '南海诸岛',
        itemStyle: {
            areaColor: 'rgba(0, 10, 52, 1)',
            borderColor: 'rgba(0, 10, 52, 1)',
            normal: {
                opacity: 0,
                label: {
                    show: false,
                    color: "#009cc9",
                }
            },
        },
        label: {
            show: false,
            color: '#FFFFFF',
            fontSize: 12,
        },
    }];
    // 固定地图
    geo[0].roam = false;
    
    geo[1] = options.geo;
    if (!geo[1].itemStyle) {
        geo[1].itemStyle = {};
    }
    if (!geo[1].itemStyle.normal) {
        geo[1].itemStyle.normal = {};
    }
    if (!geo[1].itemStyle.emphasis) {
        geo[1].itemStyle.emphasis = {};
    }
    // 设置地图颜色
    geo[1].itemStyle.normal.areaColor = areaColorNormal;
    geo[1].itemStyle.normal.borderColor = borderColorNormal;
    geo[1].itemStyle.normal.borderWidth = borderWidth;
    geo[1].itemStyle.emphasis.areaColor = areaColorEmphasis;
    geo[1].itemStyle.emphasis.borderColor = borderColorEmphasis;
    geo[1].itemStyle.emphasis.borderWidth = borderWidth;
    geo[1].roam = false;
    geo[0].aspectScale = 0.75;
    geo[1].aspectScale = 0.75;
    options.series[0].geoIndex = 1;

    // 散点显示提示信息
    options.series[1] = {
        name: 'label',
        type: 'scatter',
        coordinateSystem: 'geo',
        symbol: 'pin',
        //symbolSize: tipToolSize,
        hoverAnimation: true,
        zlevel: 2,
        geoIndex: 1,
        label: {
            normal: {
                show: true,
                textStyle: {
                    color: "#fff",
                    lineHeight: 15,
                },
                formatter(params) {
                    if (params.data && params.data.displayValue) {
                        return params.data.displayValue[0] + ":" + params.data.displayValue[1]; 
                    }
                    return "";
                }
            }
        },
        tooltip: {
            show: false,
        },
        data: options.series[0].data,
    }
    options.series[0].tooltip = {
        show: false,
    }
    options.geo = geo;
}

详情请参考 区域地图 。

2.2.4.季度产品类别销售情况

数据

定制方法

效果

产品信息数据集

列：季（时间维度_OrderDate）

标记区：单价、数量、销售额


1、在组件中选择双Y联合图、并将其拖拽到画布中

2、选择组件的字段，其中标记区：

  • 单价字段选择左轴“堆积分组柱图”，颜色“#4A90E2”
  • 数量字段选择左轴“堆积分组柱图”，颜色“#ADD2FF”
  • 销售额字段选择右轴“线图”，颜色“#F8E71C”

3、在组件设置中设置如下：

  • 基础：堆积选择“是”
  • 组件：隐藏标题
  • 图例：位置选择“无图例”，隐藏分页
  • 高级：图形主题选择“iridescent”

详情请参考 双Y联合图 。

2.2.5.区域利润

数据

定制方法

效果

产品信息数据集

列：省份、销售额、利润


1、在组件中选择表、并将其拖拽到画布中

2、在组件设置中设置如下：

基础：

组件：字体颜色设为“#FFFFFF”


详情请参考 表组件 。

2.2.6.年度筛选器

数据

定制方法

效果

产品信息数据集

年（时间维度_OrderDate）

1、将字段“年（时间维度_OrderDate）”拖入筛选区中，选择筛选器类型为“列表（单选）”

2、筛选器设置中静态值输入“2016”

3、组件设置中设置如下：

基础：

背景颜色“#0050A7”

高亮选项颜色“#3D96FF”

组件：隐藏标题，位置选择居中

详情请参考 交互式仪表盘-筛选排序 。

2.2.7.标题

【年份+全国各区产品销售情况分析】

1、全国各区产品销售情况分析：底图中已包含

2、年份：拖拽文本组件到画布区，双击编辑组件，在工具栏中的字段下选择“筛选器>年”。

详情请参考 文本组件 。

2.3. 设置动态效果

订购量、销售量、利润

1、准备动态GIF图如下：

2、在组件中选择图片组件，双击上传准备好的动态GIF图，上传成功后，设置图片如下：

调整图片位置、大小，效果如图：

详情请参考 组件设置-图片 。

联动设置

1、在工具栏中点击 联动设置 钮，设置两个数据集的联动关系如下：

2、在筛选器上右键更多中选择“应用于组件>自定义”，勾选筛选器影响的组件如下：

3、在地图组件上，点击 作为筛选器 按钮。

右键更多中选择“影响报表>自定义”，勾选地图影响的组件如下：

   

详情请参考 联动设置 。

3.资源下载

名称下载
数据资源

northwind.rar

报表资源

全国各区产品销量情况分析.xml

图片资源

图片资源.rar

宏代码资源
滚动 
function main(page: IPage, portlet: ITablePortlet) {

    const fps = 10 // 每秒帧率，帧率越大，越流畅
    const step = 1 // 每帧步长，步长越大，滚动速度越快
    // 每秒滚动距离 = fps * step

    // 非正式接口
    const portletEl = (portlet as any).__portletVue__.$el;
    // 找到表格
    const tableBody = portletEl.querySelector('.tableContainer .el-table__body-wrapper')
    // 隐藏滚动条
    portlet.appendCss('.ps__thumb-y', {
        display: 'none'
    })

    // 清理定时器
    if ((portlet as any).scrollInterval) {
        clearInterval((portlet as any).scrollInterval)
    }

    // 轮播
    (portlet as any).scrollInterval = setInterval(() => {
        // 超过最大长度重置
        if (tableBody.scrollTop + tableBody.offsetHeight >= tableBody.scrollHeight) {
            tableBody.scrollTo({
                top: 0,
            })
        } else {
            tableBody.scrollTo({
                top: tableBody.scrollTop + step,
            })
        }
        // console.log('scrollTop: ', bodyWrapper.scrollTop)
        // console.log('scrollHeight: ', bodyWrapper.scrollHeight)
        // console.log('offsetHeight: ', bodyWrapper.offsetHeight)
    }, 1000 / fps)
}
地图 
function main(page: IPage, portlet: IEChartsPortlet) {
    // 阴影颜色
    var shadowColor = "#FFFFFF";
    // 地图边框线条大小
    var borderWidth = 1.5;
    // 正常状态地图区域颜色
    var areaColorNormal = "#003FA6";
    // 正常状态地图边框颜色
    var borderColorNormal = "#2275FF";
    // 正常状态地图区域颜色
    var areaColorEmphasis = "#0c274b";
    // 正常状态地图边框颜色
    var borderColorEmphasis = "#1cccff";
    // 提示框大小，格式：[宽度，高度]
    var tipToolSize = [120, 50];


    //获取图形信息
    var options = portlet.getChartOptions();
    if (!options.geo) {
        return;
    }
    var _geo = JSON.stringify(options.geo);
    var geo = [];
    geo.push(JSON.parse(_geo));
    if (!geo[0].itemStyle) {
        geo[0].itemStyle = {};
    }
    if (!geo[0].itemStyle.normal) {
        geo[0].itemStyle.normal = {};
    }
   
     geo[0].aspectScale = 1;
    // 海南诸岛不显示阴影
    geo[0].regions = [{
        name: '南海诸岛',
        itemStyle: {
            areaColor: 'rgba(0, 10, 52, 1)',
            borderColor: 'rgba(0, 10, 52, 1)',
            normal: {
                opacity: 0,
                label: {
                    show: false,
                    color: "#009cc9",
                }
            },
        },
        label: {
            show: false,
            color: '#FFFFFF',
            fontSize: 12,
        },
    }];
    // 固定地图
    geo[0].roam = false;
    
    geo[1] = options.geo;
    if (!geo[1].itemStyle) {
        geo[1].itemStyle = {};
    }
    if (!geo[1].itemStyle.normal) {
        geo[1].itemStyle.normal = {};
    }
    if (!geo[1].itemStyle.emphasis) {
        geo[1].itemStyle.emphasis = {};
    }
    // 设置地图颜色
    geo[1].itemStyle.normal.areaColor = areaColorNormal;
    geo[1].itemStyle.normal.borderColor = borderColorNormal;
    geo[1].itemStyle.normal.borderWidth = borderWidth;
    geo[1].itemStyle.emphasis.areaColor = areaColorEmphasis;
    geo[1].itemStyle.emphasis.borderColor = borderColorEmphasis;
    geo[1].itemStyle.emphasis.borderWidth = borderWidth;
    geo[1].roam = false;
    geo[0].aspectScale = 0.75;
    geo[1].aspectScale = 0.75;
    options.series[0].geoIndex = 1;

    // 散点显示提示信息
    options.series[1] = {
        name: 'label',
        type: 'scatter',
        coordinateSystem: 'geo',
        symbol: 'pin',
        //symbolSize: tipToolSize,
        hoverAnimation: true,
        zlevel: 2,
        geoIndex: 1,
        label: {
            normal: {
                show: true,
                textStyle: {
                    color: "#fff",
                    lineHeight: 15,
                },
                formatter(params) {
                    if (params.data && params.data.displayValue) {
                        return params.data.displayValue[0] + ":" + params.data.displayValue[1]; 
                    }
                    return "";
                }
            }
        },
        tooltip: {
            show: false,
        },
        data: options.series[0].data,
    }
    options.series[0].tooltip = {
        show: false,
    }
    options.geo = geo;
}