应用实战：无人售货机零售项目ECharts展现

和小猫的下雨天

已于 2024-05-13 16:47:45 修改

阅读量1.4k

点赞数 12

文章标签：零售 echarts

于 2024-05-13 16:46:16 首次发布

本文链接：https://blog.csdn.net/2403_83182454/article/details/138800020

版权

1.绘制仪表盘展示各特征及其环比增长率（仪表盘）

2.绘制簇状柱状-折线图展示销售金额变化趋势（簇状柱状-折线图）

3.绘制条形图展示商品销售金额前5名（条形图）

4.绘制簇状柱状图展示售货机销售情况（簇状柱状图）

2.绘制条形图展示商品销售数量前10名(条形图)

3、绘制气泡图展示商品价格区间（气泡图）

4、绘制折线图展示销售金额实际值与预测值（折线图）

5.销售分析大屏可视化

四、可视化展现库存分析

1.绘制簇状柱状图展示售货机商品数量（簇状柱状图）

2.绘制环形图展示品类库存占比（环形图）

3、绘制堆积条形图展示商品存销量(堆积条形图)

4、绘制簇状柱状-折线图展示滞销商品(簇状柱状-折线图)

5、绘制矩形树图展示商品存货周转天数(矩形树图)

6.库存分析大屏可视化

五、可视化展示用户分析

1.绘制簇状柱状图展示用户消费地点和时间段（簇状柱状图）

①、用户消费地址

②、用户消费时间段

2.绘制折线图展示近5天用户人数新增和流失趋势(折线堆积图)

3.绘制雷达图展示用户分群（雷达图）

4.绘制环形图展示用户类型人数占比（环形图）

5.绘制字符云图展示用户画像（词云图）

6.商品价格区间（气泡图）

7.用户分析大屏可视化

一、了解无人售货机零售项目背景

无人售货机是商业自动化的常用设备，它不受时间、地点的限制，能节省人力、方便交易。
某公司部署的无人售货机，目前经营状况并不理想。为了挖掘经营状况不理想的具体原因，需要了解该公司后台管理系统数据的基本情况。

数据表：

分析无人售货机现状

无人售货机产业正在走向信息化，并将进一步实现合理化。从无人售货机的发展趋势来看，无人售货机的出现是由劳动密集型的产业构造向技术密集型转变的产物。
大量生产、大量消费以及消费模式和销售环境的变化，要求出现新的流通渠道；而相对的超市、百货购物中心等新的流通渠道的产生，人工费用也在不断上升；加上场地的局限性和购物的便利性等因素的制约，无人售货机作为一种必需的机器便应运而生。
某公司部署的无人售货机在高需求背景下，销售额提升缓慢，订单量并未达到预期。为了探究问题的具体原因，需要结合销售背景从销售、库存、用户3个方向进行分析，并利用ECharts可视化展现销售现状，从而分析问题所在。注：本章绘图涉及到的.js 文件均在本书的配套资料中。

了解无人售货机数据情况

目前，无人售货机后台管理系统积累了大量用户的购买记录。
在无人售货机信息表数据的预处理与建模完成后，从无人售货机销售的整体情况、销售情况、库存情况和用户情况4个方向对预处理和建模后的数据进行可视化展现与分析。

可视化使用到的数据表如表所示

二、可视化展示销售情况总分析

1.绘制仪表盘展示各特征及其环比增长率（仪表盘）

环比增长率是以某一期的数据和上期的数据进行比较计算所得到的趋势百分比。用户可以根据环比增长率观察数据的增减变化情况，反映本期比上期增长了多少。
根据各特征数据可以计算各特征环比增长率，观察特征的增减变化情况。通过使用仪表盘来展示数据，可以清晰地看出某个指标值所在的范围。无人售货机各特征数据如表所示。

代码如下：

// 销售金额 & 订单量 & 毛利润 & 售货机数量 & 购买用户数
$.get("data/无人售货机各特征数据.json").done(function (data) {
    //data = JSON.parse(data);
    saleT('saleM', '销售金额', 0, data.销售金额[0], data.销售金额[1], data.销售金额[2], '','#1779d9','rgba(23,121,217,0.6)');
    saleT('orderQ', '订单量', 0, data.订单量[0], data.订单量[1], data.订单量[2], '','#30b761','rgba(48,183,97,0.5)');
    saleT('grossM', '毛利润', 0, data.毛利润[0], data.毛利润[1], data.毛利润[2], '','#d04a4b','rgba(208,74,75,0.5)');
    saleT('discount', '折扣额', 0, data.折扣额[0], data.折扣额[1], data.折扣额[2], '千','#ca841e','rgba(202,132,30,0.5)');
    saleT('unitP', '客单价', 0, data.客单价[0], data.客单价[1], data.客单价[2], '','#00a7c2','rgba(0,167,194,0.5)');
});
/*
 *id: chart容器id;
 *title: 仪表盘名称
 *min: 最小值
 *max: 最大值
 *val: 当前实际值
 *tag: 目标值
 *unit: 单位符号
 *color1: 主轴颜色
 */
 
var saleM = echarts.init(document.getElementById("saleM"));
var orderQ = echarts.init(document.getElementById("orderQ"));
var grossM = echarts.init(document.getElementById("grossM"));
var discount = echarts.init(document.getElementById("discount"));
var unitP = echarts.init(document.getElementById("unitP"));
 
function saleT(id, title, min, max, val, tag, unit, color1,  color2) {
 
    var myChart = echarts.init(document.getElementById(id));
 
    option = {
    // 工具提示配置
    tooltip: {
        confine: true, // 提示框限制在图表区域内显示
        trigger: 'item', // 鼠标悬停在图表项上时触发提示框
        formatter: function(data) {
            // 自定义提示框内容格式化函数
            // 计算数据相对于tag的比例
            hbl = (data.value / tag).toFixed(2);
            // 返回提示框内容
            return title + "：" + data.value + '<br/>' + name + "：" + hbl;
        }
    },
    // 系列列表
    series: [{
        // 仪表盘配置
        startAngle: 180, // 仪表盘起始角度
        endAngle: 0, // 仪表盘结束角度
        splitNumber: 1, // 仪表盘分割段数
        name: title, // 系列名称
        type: 'gauge', // 图表类型为仪表盘
        radius: '100%', // 仪表盘半径
        axisLine: {
            // 坐标轴线配置
            lineStyle: {
                // 坐标轴线样式配置
                color: [
                    [0.25, '#1779da'], // 渐变色配置，表示0-25%范围内的颜色为'#1779da'
                    [0.5, '#1779da'], // 25-50%范围内的颜色为'#1779da'
                    [1, '#ddd'] // 50-100%范围内的颜色为'#ddd'
                ],
                width: 20 // 坐标轴线宽度
            }
        },
        axisTick: { show: false }, // 不显示刻度
        axisLabel: {
            // 刻度标签配置
            distance: 0, // 刻度标签与轴线的距离
            width: 30,
            height: 24,
            lineHeight: 24,
            padding: [25, -30, 0], // 刻度标签的内边距
            color: 'rgba(255,255,255,0.5)', // 刻度标签颜色
            formatter: function(value) {
                // 刻度标签内容格式化函数
                if (unit == '千') {
                    return (value / 1000).toFixed(1) + ' ' + unit; // 如果单位是'千'，将值除以1000并保留一位小数
                } else if (unit == '万') {
                    return (value / 10000).toFixed(1) + ' ' + unit; // 如果单位是'万'，将值除以10000并保留一位小数
                } else {
                    return value; // 否则直接返回原始值
                }
            }
        },
        splitLine: { show: false }, // 不显示分隔线
        pointer: { show: false, width: 3 }, // 不显示指针
        title: {
            // 仪表盘标题配置
            offsetCenter: [0, '92%'], // 标题相对于中心的偏移量
            color: 'rgba(255,255,255,0.7)' // 标题颜色
        },
        detail: {
            // 仪表盘详情配置
            offsetCenter: [0, '-10%'], // 详情相对于中心的偏移量
            formatter: function(value) {
                // 详情内容格式化函数
                value1 = value / tag; // 将值除以tag
                return '{a|' + value.toFixed(1) + '}'; // 返回格式化后的值
            },
            rich: {
                // 富文本样式配置
                a: {
                    fontSize: '16', // 字体大小
                    fontWeight: 'bold' // 字体加粗
                }
            }
        },
        data: [{}] // 数据项，暂时为空
    }]
};
 
    option.series[0].min = min;
    option.series[0].max = max;
    option.series[0].data[0].value = val;
    option.series[0].axisLine.lineStyle.color[0][0] = (tag - min) / (max - min);
    option.series[0].axisLine.lineStyle.color[0][1] = color2;
    option.series[0].axisLine.lineStyle.color[1][0] = (val - min) / (max - min);
    option.series[0].axisLine.lineStyle.color[1][1] = color1;
 
    myChart.setOption(option);
 
}option = {
    // 工具提示配置
    tooltip: {
        confine: true, // 提示框限制在图表区域内显示
        trigger: 'item', // 鼠标悬停在图表项上时触发提示框
        formatter: function(data) {
            // 自定义提示框内容格式化函数
            // 计算数据相对于tag的比例
            hbl = (data.value / tag).toFixed(2);
            // 返回提示框内容
            return title + "：" + data.value + '<br/>' + name + "：" + hbl;
        }
    },
    // 系列列表
    series: [{
        // 仪表盘配置
        startAngle: 180, // 仪表盘起始角度
        endAngle: 0, // 仪表盘结束角度
        splitNumber: 1, // 仪表盘分割段数
        name: title, // 系列名称
        type: 'gauge', // 图表类型为仪表盘
        radius: '100%', // 仪表盘半径
        axisLine: {
            // 坐标轴线配置
            lineStyle: {
                // 坐标轴线样式配置
                color: [
                    [0.25, '#1779da'], // 渐变色配置，表示0-25%范围内的颜色为'#1779da'
                    [0.5, '#1779da'], // 25-50%范围内的颜色为'#1779da'
                    [1, '#ddd'] // 50-100%范围内的颜色为'#ddd'
                ],
                width: 20 // 坐标轴线宽度
            }
        },
        axisTick: { show: false }, // 不显示刻度
        axisLabel: {
            // 刻度标签配置
            distance: 0, // 刻度标签与轴线的距离
            width: 30,
            height: 24,
            lineHeight: 24,
            padding: [25, -30, 0], // 刻度标签的内边距
            color: 'rgba(255,255,255,0.5)', // 刻度标签颜色
            formatter: function(value) {
                // 刻度标签内容格式化函数
                if (unit == '千') {
                    return (value / 1000).toFixed(1) + ' ' + unit; // 如果单位是'千'，将值除以1000并保留一位小数
                } else if (unit == '万') {
                    return (value / 10000).toFixed(1) + ' ' + unit; // 如果单位是'万'，将值除以10000并保留一位小数
                } else {
                    return value; // 否则直接返回原始值
                }
            }
        },
        splitLine: { show: false }, // 不显示分隔线
        pointer: { show: false, width: 3 }, // 不显示指针
        title: {
            // 仪表盘标题配置
            offsetCenter: [0, '92%'], // 标题相对于中心的偏移量
            color: 'rgba(255,255,255,0.7)' // 标题颜色
        },
        detail: {
            // 仪表盘详情配置
            offsetCenter: [0, '-10%'], // 详情相对于中心的偏移量
            formatter: function(value) {
                // 详情内容格式化函数
                value1 = value / tag; // 将值除以tag
                return '{a|' + value.toFixed(1) + '}'; // 返回格式化后的值
            },
            rich: {
                // 富文本样式配置
                a: {
                    fontSize: '16', // 字体大小
                    fontWeight: 'bold' // 字体加粗
                }
            }
        },
        data: [{}] // 数据项，暂时为空
    }]
};
// 设置仪表盘的最小值为 min
option.series[0].min = min;
 
// 设置仪表盘的最大值为 max
option.series[0].max = max;
 
// 设置仪表盘当前值为 val
option.series[0].data[0].value = val;
 
// 根据最小值和最大值计算渐变色的起始位置
option.series[0].axisLine.lineStyle.color[0][0] = (tag - min) / (max - min);
 
// 设置渐变色的起始颜色
option.series[0].axisLine.lineStyle.color[0][1] = color2;
 
// 根据当前值和最小值最大值计算渐变色的结束位置
option.series[0].axisLine.lineStyle.color[1][0] = (val - min) / (max - min);
 
// 设置渐变色的结束颜色
option.series[0].axisLine.lineStyle.color[1][1] = color1;
    myChart.setOption(option);
 
}

①、销售金额及其环比增长率

使用仪表盘对销售金额及其环比增长率进行展示，如图所示，绘制下图的代码详见charts.total.js文件。
由图可以看出，当前销售金额为325700.0元，销售金额环比增长率为-1.4%。

②、订单量及其环比增长率

使用仪表盘对订单量及其环比增长率进行展示，如图所示，绘制下图的代码详见charts.total.js文件。
由图可以看出，当前订单数量8777个，订单量环比增长率为11.1%。

③、毛利率及其环比增长率

使用仪表盘对毛利润及其环比增长率进行展示，如图所示，绘制下图的代码详见charts.total.js文件。
由图可以看出，当前毛利润为93096元，毛利润环比增长率为3.6%。

④、售货机数量及其环比增长率

使用仪表盘对售货机数量及其环比增长率进行展示，如图所示，绘制下图的代码详见charts.total.js文件。
由图可以看出，当前售货机数量为1059 台，售货机数量环比增长率为2.99%。

⑤、购买用户数及其环比增长率

使用仪表盘对购买用户数及其环比增长率进行展示，如图所示，绘制下图的代码详见charts.total.js文件。
由图可以看出，当前的购买用户数量为10 人，购买用户环比增长率为1.77%。

2.绘制簇状柱状-折线图展示销售金额变化趋势（簇状柱状-折线图）

2019年9月的售货机销售金额及其环比增长率的部分数据如表所示。

使用簇状柱状-折线图对2019年9月的售货机销售金额和销售金额环比增长率进行展示，如图所示，绘制下图的代码详见charts.total.js文件。
由图可以看出，每日销售金额最低为3850元，最高为14568元，平均每天的销售额在5000元以上。每日销售金额环比增长率波动幅度较大。

代码如下：

//销售金额变化趋势
//初始化图表
var saleRate = echarts.init(document.getElementById('saleRate'));
//设置图表option值
$.get("data/售货机销售金额及其环比增长率.json").done(function (data) {
    //data = JSON.parse(data);
	saleRate.setOption({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },
    grid: {
        //用网格定位图表四边留空及顶部避开标题位置
        x: 10,
        y: 50,
        x2: 10,
        y2: 10,
        //使坐标轴数据能完整显示
        containLabel: true
    },
    //设置legend位置及数据，位于图表右上方
    legend: {
        data:['销售金额','销售金额环比增长率'],
        top: 10
    },
    barCategoryGap:'40%',
    xAxis: [
        {
            type: 'category',
            //日期数据
            data: data.日期,
            axisPointer: {
                type: 'shadow'
            },
            //运用eCharts内置方法格式化日期，使x轴日期数据更简洁，同时不影响原数据在鼠标交互时的完整展现
            axisLabel: {
                formatter: function(value){
                    return echarts.format.formatTime('dd', value);
                }
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '销售金额（元）',
            //设置Y坐标轴最小值
            min: 0,
            //设置Y坐标轴最大值
            max: 15000,
            //设置Y坐标轴值间隔值
            interval: 5000
        },
        //定义Y轴右侧坐标轴
        {
            type: 'value',
            name: '环比增长率（%）',
            min: -0.5,
            max: 1,
            interval: 0.5
        }
    ],
    series: [
        {
            name:'销售金额',
            type:'bar',
            //设置显示坐标点数值
            label:{
                show:'true'
            },
            //销售金额数据
            data:data.销售金额
        },
        {
            name:'销售金额环比增长率',
            type:'line',
            //设置“销售金额环比增长率”数值样式,圆角矩形黑底白字，位于数据点上方
            label:{
                //设置显示坐标点数值
                show:'true',
                color:'#fff',
                backgroundColor:'rgba(0,0,0,0.7)',
                verticalAlign:'middle',
                padding:4,
                borderRadius:4,
                position:'top'
            },
            //设置“销售金额环比增长率”在坐标轴右侧显示
            yAxisIndex: 1,
            //销售金额环比增长率数据
            data:data.销售金额环比增长率
        }
    ]
		})
});