全国各区产品销售情况分析

1. 报表总览

1.1背景描述

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

1.2需求分析

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

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

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

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; }

关注我们

服务支持

页面树结构

全国各区产品销售情况分析

1. 报表总览

1.1背景描述

1.2需求分析

2. 定制方法

2.1. 总体设计

2.2. 组件详解

2.2.1.区域销售情况

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

2.2.3.全国销售量

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

2.2.5.区域利润

2.2.6.年度筛选器

2.2.7.标题

2.3. 设置动态效果

3.资源下载