分析无人售货机项目

已于 2024-05-13 11:31:18 修改
阅读量994 收藏 21
点赞数 32
文章标签： 前端 数据库 服务器
于 2024-05-13 11:26:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_77834805/article/details/138784821
版权

目录

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

1.背景：

2.现状：

3.数据情况：

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

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

 1.销售金额及其环比增长率

由图可以看出，当前销售金额为325700.0元，销售金额环比增长率为-1.4%。

2.订单量及其环比增长率 

3.. 毛利率及其环比增长率

4. 售货机数量及其环比增长率

5. 购买用户数及其环比增长率

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

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

四.绘制簇状柱状图展示售货机销售情况

 五.绘制饼图展示用户支付方式占比

 六.销售总情况大屏可视化

三.可视化展现销售分析 

一.绘制南丁格尔玫瑰图

1. 销售金额

2. 订单量

3. 毛利率

4. 客单价

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

三.绘制气泡图展示商品价格区间

四.绘制折线图展示销售金额实际值与预测值

四.可视化展现库存分析 

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

二.绘制环形图展示品类库存占比 

三.绘制堆积条形图展示商品存销量 

四.绘制簇状柱状-折线图展示滞销商品

五.绘制矩形树图展示商品存货周转天数

五.可视化展示用户分析 

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

1. 用户消费地址 

2.用户消费时间段

二.绘制折线图展示近5天用户人数新增和流失趋势 

三.绘制雷达图展示用户分群 

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

 五.绘制字符云图展示用户画像

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

1.背景：

Ø无人售货机是商业自动化的常用设备，它不受时间、地点的限制，能节省人力、方便交易。

Ø 某公司部署的无人售货机，目前经营状况并不理想。为了挖掘经营状况不理想的具体原因，需要了解该公司后台管理系统数据的基本情况。

2.现状：

Ø无人售货机产业正在走向信息化，并将进一步实现合理化。从无人售货机的发展趋势来看，无人售货机的出现是由劳动密集型的产业构造向技术密集型转变的产物。

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

3.数据情况：

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

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

 

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

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

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

 1.销售金额及其环比增长率
由图可以看出，当前销售金额为325700.0元，销售金额环比增长率为-1.4%。

2.订单量及其环比增长率 

由图可以看出，当前订单数量8777个，订单量环比增长率为11.1%。

3.. 毛利率及其环比增长率

由图可以看出，当前毛利润为93096元，毛利润环比增长率为3.6%。

4. 售货机数量及其环比增长率

由图可以看出，当前售货机数量为1059 台，售货机数量环比增长率为2.99%。

5. 购买用户数及其环比增长率

由图可以看出，当前的购买用户数量为10 人，购买用户环比增长率为1.77%。

 全部代码展示如下：

// 销售金额 & 订单量 & 毛利润 & 售货机数量 & 购买用户数
$.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){
                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.5, '#1779da'],
                        [1, '#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;
                    }else if(unit=='万'){
                        return (value/10000).toFixed(1) + ' ' + unit;
                    }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;
                    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);
 
}

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

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

使用簇状柱状 - 折线图对 2019 年 9 月的售货机销售金额和销售金额环比增长率进行展示，每日销售金额最低为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.销售金额环比增长率
        }
    ]
		})
});

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

对商品的销售金额进行统计后，得到销售金额排名前5名的商品数据，如表所示。

使用条形图对销售金额排名前 5 名的商品进行展示，由图可以看出，销售金额排名前5 名的商品分别为井水豆腐香辣味、沙琪玛、卫龙大面筋、香芋面包、营养快线。 

代码展示：

var saleMtop5 = echarts.init(document.getElementById('saleMtop5'));
$.get("data/商品销售金额前5名.json").done(function (data) {
    //data = JSON.parse(data);
	saleMtop5.setOption({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        x: 10,
        y: 20,
        x2: 10,
        y2: 10,
        containLabel: true
    },
    barCategoryGap:'40%',
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],
        axisLine:{lineStyle:{width:0}},
    },
    yAxis: {
        type: 'category',
        splitLine:{lineStyle:{width:0}},
        data: data.商品名称
    },
    series: [
        {
            name: '售出总数量',
            type: 'bar',
            label:{
                position:'right',
                verticalAlign:'middle',
            },
            data: data.销售金额
        }
    ]
		})
});

四.绘制簇状柱状图展示售货机销售情况

对不同地点的售货机的销售金额、订单量和毛利润进行统计后，得到结果如表所示。

使用簇状柱状图对统计结果进行展示，由图可以看出，宿舍楼的售货机销售金额是最高的，其次是田径场，而教学楼、食堂和体育馆的销售金额相对较少；虽然食堂的售货机订单量相对较少，但是食堂的售货机毛利润是不同地点中最高的。

代码展示：

//售货机销售情况
var saleOrder = echarts.init(document.getElementById('saleOrder'));
$.get("data/不同地点售货机销售数据.json").done(function (data) {
    //data = JSON.parse(data);
	saleOrder.setOption({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    grid: {
        x: 10,
        y: 50,
        x2: 10,
        y2: 10,
        containLabel: true
    },
    toolbox: {
        show:false,
        feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    legend: {
        top:10
    },
    barGap:'10%',
    barCategoryGap:'35%',
    xAxis: [
        {
            type: 'category',
            data: data.地点,
            axisPointer: {
                type: 'shadow'
            },
            splitLine:{lineStyle:{width:0}},
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '',
            min: 0,
            axisLabel: {
                formatter: '{value}'
            },
            axisLine:{lineStyle:{width:0}},
        }
    ],
    series: [
        {
            name:'销售金额',
            type:'bar',
            data:data.销售金额
        },
        {
            name:'订单量',
            type:'bar',
            data:data.订单量
        },
        {
            name:'毛利润',
            type:'bar',
            data:data.毛利润
        }
    ]
		})
});

 五.绘制饼图展示用户支付方式占比

对用户支付方式进行统计后，得到结果如表所示。

使用饼图对不同的支付方式占比进行展示，由图可以看出，大部分用户使用微信或支付宝的方式进行支付，只有小部分用户使用现金进行支付。

代码展示：

//支付方式占比
var payWay = echarts.init(document.getElementById('payWay'));
$.get("data/不同支付方式用户人数.json").done(function (data) {
    //data = JSON.parse(data);
	payWay.setOption({
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        data: data.支付方式,
        orient:'vertical',
        left:0,
        top:"25%"
    },
    grid: {
        left: '0%',
        right: '0%',
        bottom: '0%',
        containLabel: true
    },
    series : [
        {
            name: '支付方式占比',
            type: 'pie',
            radius : '62%',
            center: ['65%', '50%'],
            label:{
                formatter:"{b}\n{a|{d}%}",
                rich: {
                    a: {
                        padding:6,
                        align:'left',
                        color:'#999',
                    }
                }
            },
            data:data.data,
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
		})
});

 全部代码展示：

// 销售金额 & 订单量 & 毛利润 & 售货机数量 & 购买用户数
$.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){
                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.5, '#1779da'],
                        [1, '#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;
                    }else if(unit=='万'){
                        return (value/10000).toFixed(1) + ' ' + unit;
                    }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;
                    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);
 
}
 
 
 
//销售金额变化趋势
//初始化图表
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.销售金额环比增长率
        }
    ]
		})
});
 
 
 
//商品销售金额Top5
var saleMtop5 = echarts.init(document.getElementById('saleMtop5'));
$.get("data/商品销售金额前5名.json").done(function (data) {
    //data = JSON.parse(data);
	saleMtop5.setOption({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        x: 10,
        y: 20,
        x2: 10,
        y2: 10,
        containLabel: true
    },
    barCategoryGap:'40%',
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],
        axisLine:{lineStyle:{width:0}},
    },
    yAxis: {
        type: 'category',
        splitLine:{lineStyle:{width:0}},
        data: data.商品名称
    },
    series: [
        {
            name: '售出总数量',
            type: 'bar',
            label:{
                position:'right',
                verticalAlign:'middle',
            },
            data: data.销售金额
        }
    ]
		})
});
 
 
 
//售货机销售情况
var saleOrder = echarts.init(document.getElementById('saleOrder'));
$.get("data/不同地点售货机销售数据.json").done(function (data) {
    //data = JSON.parse(data);
	saleOrder.setOption({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    grid: {
        x: 10,
        y: 50,
        x2: 10,
        y2: 10,
        containLabel: true
    },
    toolbox: {
        show:false,
        feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    legend: {
        top:10
    },
    barGap:'10%',
    barCategoryGap:'35%',
    xAxis: [
        {
            type: 'category',
            data: data.地点,
            axisPointer: {
                type: 'shadow'
            },
            splitLine:{lineStyle:{width:0}},
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '',
            min: 0,
            axisLabel: {
                formatter: '{value}'
            },
            axisLine:{lineStyle:{width:0}},
        }
    ],
    series: [
        {
            name:'销售金额',
            type:'bar',
            data:data.销售金额
        },
        {
            name:'订单量',
            type:'bar',
            data:data.订单量
        },
        {
            name:'毛利润',
            type:'bar',
            data:data.毛利润
        }
    ]
		})
});
 
 
 
//支付方式占比
var payWay = echarts.init(document.getElementById('payWay'));
$.get("data/不同支付方式用户人数.json").done(function (data) {
    //data = JSON.parse(data);
	payWay.setOption({
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        data: data.支付方式,
        orient:'vertical',
        left:0,
        top:"25%"
    },
    grid: {
        left: '0%',
        right: '0%',
        bottom: '0%',
        containLabel: true
    },
    series : [
        {
            name: '支付方式占比',
            type: 'pie',
            radius : '62%',
            center: ['65%', '50%'],
            label:{
                formatter:"{b}\n{a|{d}%}",
                rich: {
                    a: {
                        padding:6,
                        align:'left',
                        color:'#999',
                    }
                }
            },
            data:data.data,
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
		})
});
 
 
 
window.onresize = function() {
    saleM.resize();
    orderQ.resize();
    grossM.resize();
    discount.resize();
    unitP.resize();
    saleRate.resize();
    saleMtop5.resize();
    saleOrder.resize();
    payWay.resize();
};

 六.销售总情况大屏可视化

Ø 大屏数据可视化是以大屏为主要展示载体的数据可视化设计。利用面积大、可展示信息多等特点，通过关键信息大屏共享的方式，可方便团队讨论、决策。
Ø 对无人售货机的销售总情况进行大屏可视化展示，如图所示。
Ø 由图可以看出，除销售金额外，其余各特征的环比增长率均大于 0 ；平均每天的销售额在 5000 元以上，每日销售金额环比增长率波动幅度较大， 2019 年 9 月 26 日销售额的增长速度最快；在支付方式上，用户普遍使用微信或支付宝的方式进行支付。

三.可视化展现销售分析 

一.绘制南丁格尔玫瑰图

      南丁格尔玫瑰图是将柱状图 转化为更美观的饼图形式，是极坐标化的柱状图 。不同于饼图用角度表现数值或占比，南丁格尔玫瑰图使用扇形的半径表示数据的大小。
      为了方便对比分析不同区域无人售货机的销售情况，可以使用南丁格尔玫瑰图对各区域无人售货机的销售金额、订单量、客单价等指标进行可视化展示。

不同区域的各指标数据如表所示。

1. 销售金额

Ø 使用南丁格尔玫瑰图展示不同地点无人售货机的总销售金额，观察不同地点售货机的销售金额占总销售金额的比例，如图所示，绘制 下图 的代码详见 charts.sale.js 文件。
Ø 由图可以看出，体育馆的售货机销售金额占比最大，其次是教学楼；操场的售货机销售金额占比最小。


2. 订单量

Ø 使用南丁格尔玫瑰图展示不同地点无人售货机的总订单量，观察不同地点售货机的订单量占总订单量的比例，如图所示，绘制 下图 的代码详见 charts.sale.js 文件。
Ø 由图可以看出，教学楼的售货机订单量占比最大，订单量达到 9097 个，其次是体育馆，订单量占比最小的售货机地点是操场，订单量为 4865 个。


3. 毛利率

Ø 使用南丁格尔玫瑰图对不同地点售货机的毛利润进行展示，观察不同地点售货机的毛利润占总毛利润的比例，如图所示，绘制 下图 的代码详见 charts.sale.js 文件。
Ø 由图可以看出，操场的售货机毛利润占比最大，毛利润达到 186585 元，其次是田径场，毛利润占比最小的售货机地点是食堂。


4. 客单价

Ø 使用南丁格尔玫瑰图展示不同地点无人售货机的总客单价，观察不同地点售货机的客单价占总客单价的比例，如图所示，绘制 下图 的代码详见 charts.sale.js 文件。
Ø 由图可以看出，田径场的售货机客单价最高，其次是操场，售货机客单价最低的地点是食堂。
 

 效果图：

代码展示：

// 销售金额
var saleM_Site = echarts.init(document.getElementById('saleM_Site'));
$.get("data/不同区域的各指标数据.json").done(function (data) {
    //data = JSON.parse(data),
	saleM_Site.setOption({
    tooltip : {
        trigger: 'item',
        formatter: "{b}：<br/>{c} 元<br/>（{d}%）"
    },
    legend: {
        type:'scroll',
        data:data.where
    },
    toolbox: {
        show : false,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {
                show: true,
                type: ['pie', 'funnel']
            },
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    series : [
        {
            name:'地点',
            type:'pie',
            radius : ["25%", '60%'],
            center : ['50%', '57%'],
            roseType : 'area',
            label:{
                show:true,
                formatter:'{c}'
            },
            data:data.sale
        },
        {
            type:'pie',radius:'25%',center:['50%','57%'],
            label: {normal:{position:'center',color:'#fff'}},
            labelLine:{normal:{show:false}},itemStyle:{color:'transparent'},
            data:[{value:1,name:'地点',tooltip:{formatter:' ',backgroundColor:'none'}}]
        },
    ]
		})
});
 
 
 
// 订单量
var orderQ_Site = echarts.init(document.getElementById('orderQ_Site'));
$.get("data/不同区域的各指标数据.json").done(function (data) {
    //data = JSON.parse(data),
	orderQ_Site.setOption({
    tooltip : {
        trigger: 'item',
        formatter:  "{b}：<br/>{c} 个<br/>（{d}%）"
    },
    legend: {
        type:'scroll',
        data:data.where
    },
    toolbox: {
        show : false,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {
                show: true,
                type: ['pie', 'funnel']
            },
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    series : [
        {
            name:'地点',
            type:'pie',
            radius : ["25%", '60%'],
            center : ['50%', '57%'],
            roseType : 'area',
            label:{
                show:true,
                formatter:'{c}'
            },
            data:data.order
        },
        {
            type:'pie',radius:'25%',center:['50%','57%'],
            label: {normal:{position:'center',color:'#fff'}},
            labelLine:{normal:{show:false}},itemStyle:{color:'transparent'},
            data:[{value:1,name:'地点',tooltip:{formatter:' ',backgroundColor:'none'}}]
        },
    ]
		})
});
 
 
 
// 毛利润
var grossM_Site = echarts.init(document.getElementById('grossM_Site'));
$.get("data/不同区域的各指标数据.json").done(function (data) {
    //data = JSON.parse(data),
	grossM_Site.setOption({
    tooltip : {
        trigger: 'item',
        formatter:  "{b}：<br/>{c} 元<br/>（{d}%）"
    },
    legend: {
        type:'scroll',
        data:data.where
    },
    toolbox: {
        show : false,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {
                show: true,
                type: ['pie', 'funnel']
            },
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    series : [
        {
            name:'地点',
            type:'pie',
            radius : ["25%", '60%'],
            center : ['50%', '57%'],
            roseType : 'area',
            label:{
                show:true,
                formatter:'{c}'
            },
            data:data.gross
        },
        {
            type:'pie',radius:'25%',center:['50%','57%'],
            label: {normal:{position:'center',color:'#fff'}},
            labelLine:{normal:{show:false}},itemStyle:{color:'transparent'},
            data:[{value:1,name:'地点',tooltip:{formatter:' ',backgroundColor:'none'}}]
        },
    ]
		})
});
 
 
 
// 客单价平均值
var unitP_Site = echarts.init(document.getElementById('unitP_Site'));
$.get("data/不同区域的各指标数据.json").done(function (data) {
    //data = JSON.parse(data),
	unitP_Site.setOption({
    tooltip : {
        trigger: 'item',
        formatter:  "{b}：<br/>{c} 元<br/>（{d}%）"
    },
    legend: {
        type:'scroll',
        data:data.where
    },
    toolbox: {
        show : false,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {
                show: true,
                type: ['pie', 'funnel']
            },
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    series : [
        {
            name:'地点',
            type:'pie',
            radius : ["25%", '60%'],
            center : ['50%', '57%'],
            roseType : 'area',
            label:{
                show:true,
                formatter:'{c}'
            },
            data:data.unit
        },
        {
            type:'pie',radius:'25%',center:['50%','57%'],
            label: {normal:{position:'center',color:'#fff'}},
            labelLine:{normal:{show:false}},itemStyle:{color:'transparent'},
            data:[{value:1,name:'地点',tooltip:{formatter:' ',backgroundColor:'none'}}]
        },
    ]
		})
});

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

对商品销售数量进行统计后，得到销售数量前10名的商品数据，如表所示。

使用条形图对销售数量前 10 名的商品进行展示， 由图可以看出，销售数量排名前 10 名的商品分别为营养快线、香芋面包、卫龙大面筋、沙琪玛、井水豆腐香辣味、小鱼仔、王老吉、旺旺牛奶、安慕希和蒙牛纯牛奶，其中，销量最高的为蒙牛纯牛奶，数量超过 20 个。

代码展示：

var saleMtop10 = echarts.init(document.getElementById('saleMtop10'));
$.get("data/商品销售数量前10.json").done(function (data) {
    //data = JSON.parse(data),
	saleMtop10.setOption({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        left: '0%',
        top:'20',
        right:'2%',
        bottom: '10',
        containLabel: true
    },
    barCategoryGap:'40%',
    xAxis: {
        type: 'value',
        min: 0,
        interval: 5,
        boundaryGap: [0, 0.01],
        axisLine:{lineStyle:{width:0}},
    },
    yAxis: {
        type: 'category',
        splitLine:{lineStyle:{width:0}},
        data: data.商品名称
    },
    series: [
        {
            name: '售出总数量',
            type: 'bar',
            label:{
                position:'right',
                verticalAlign:'middle',
            },
            data: data.销售数量
        }
    ]
		})
});

三.绘制气泡图展示商品价格区间

商品销售数量和商品价格数据如表所示。

Ø 使用气泡图对商品销售数量和商品价格进行展示，如图所示，绘制 下 图的代码详见 charts.sale.js 文件。
Ø 由图可以看出，小鱼仔是销量最高、单价最低的商品。

代码展示：

// 商品价格区间
var priceRange = echarts.init(document.getElementById('priceRange'));
$.get("data/商品销量数量和价格数据.json").done(function (data) {
    //data = JSON.parse(data),
	priceRange.setOption({
    grid: {
        left: '3%',
        right: '10',
        bottom: '10',
        containLabel: true
    },
    tooltip : {
        showDelay : 0,
        formatter : function (params) {
                return params.seriesName + '<br/>'
                + '单价：' + params.value[0] + '<br/>'
                + '销量：' + params.value[1];
        },
        axisPointer:{
            show: true,
            type : 'cross',
            lineStyle: {
                type : 'dashed',
                width : 1
            }
        }
    },
 
    legend: {
        type:'scroll',
    },
    xAxis :{ scale:true},
    yAxis :{ scale:true},
	})
});
$.get("data/商品销量数量和价格数据.json").done(function (data) {
    //data = JSON.parse(data);
    var series=[];
    for(var i = 0;i < data.data.length;i++){
        series.push({
            name: data.data[i].name,
            type: 'scatter',
            data: [data.data[i].value],
            symbolSize:data.data[i].value[1]*2
        });
    }
    priceRange.setOption({
        series:series
    });
});

四.绘制折线图展示销售金额实际值与预测值

销售金额实际值与预测值部分数据如表所示。

Ø 在分析了实际的销售金额后，如果想要预测之后的商品销售情况，那么可以使用折线图进行展示，如图所示，绘制 下图 的代码详见 charts.sale.js 文件
Ø 由图可以看出，商品实际销售金额的波动幅度较大。

代码展示：

// 销售金额预测值与实际值
var saleAll = echarts.init(document.getElementById('saleAll'));
$.get("data/销售金额实际值与预测值.json").done(function (data) {
    //data = JSON.parse(data),
	saleAll.setOption({
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        type:'scroll'
    },
    grid: {
        left: '10',
        right: '20',
        bottom: '10',
        containLabel: true
    },
    xAxis:  {
        type: 'category',
        boundaryGap: false,
        data: ['1日','2日','3日','4日','5日','6日','7日','8日','9日','10日',
		'11日','12日','13日','14日','15日','16日','17日','18日','19日','20日','21日','22日']
    },
    yAxis: {
        type: 'value',
        name: '金额（万元）',
        axisLabel: {
            formatter: '{value}'
        }
    },
    series: [
        {
            name:'销售金额实际值',
            type:'line',
            data:data.T,
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(194, 53, 49,.8)'
                    }, {
                        offset: 1,
                        color: 'transparent'
                    }])
                }
            },
        },
        {
            type:'line',
            name:'销售金额预测值',
            data:data.Y,
            areaStyle:{
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(47, 69, 84,.4)'
                    }, {
                        offset: 1,
                        color: 'transparent'
                    }])
                }
            }
        },
    ]
		})
});

Ø 对无人售货机销售情况进行大屏可视化，如图所示。

Ø 由图可以看出，在不同区域的无人售货机中，体育馆的售货机销售金额占比最大，教学楼的售货机订单量占比最大，售货机毛利润占比最大的是操场，售货机客单价平均值最大的是田径场；单价较低的商品销量较高。

全部代码展示：

// 销售金额
var saleM_Site = echarts.init(document.getElementById('saleM_Site'));
$.get("data/不同区域的各指标数据.json").done(function (data) {
    //data = JSON.parse(data),
	saleM_Site.setOption({
    tooltip : {
        trigger: 'item',
        formatter: "{b}：<br/>{c} 元<br/>（{d}%）"
    },
    legend: {
        type:'scroll',
        data:data.where
    },
    toolbox: {
        show : false,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {
                show: true,
                type: ['pie', 'funnel']
            },
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    series : [
        {
            name:'地点',
            type:'pie',
            radius : ["25%", '60%'],
            center : ['50%', '57%'],
            roseType : 'area',
            label:{
                show:true,
                formatter:'{c}'
            },
            data:data.sale
        },
        {
            type:'pie',radius:'25%',center:['50%','57%'],
            label: {normal:{position:'center',color:'#fff'}},
            labelLine:{normal:{show:false}},itemStyle:{color:'transparent'},
            data:[{value:1,name:'地点',tooltip:{formatter:' ',backgroundColor:'none'}}]
        },
    ]
		})
});
 
 
 
// 订单量
var orderQ_Site = echarts.init(document.getElementById('orderQ_Site'));
$.get("data/不同区域的各指标数据.json").done(function (data) {
    //data = JSON.parse(data),
	orderQ_Site.setOption({
    tooltip : {
        trigger: 'item',
        formatter:  "{b}：<br/>{c} 个<br/>（{d}%）"
    },
    legend: {
        type:'scroll',
        data:data.where
    },
    toolbox: {
        show : false,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {
                show: true,
                type: ['pie', 'funnel']
            },
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    series : [
        {
            name:'地点',
            type:'pie',
            radius : ["25%", '60%'],
            center : ['50%', '57%'],
            roseType : 'area',
            label:{
                show:true,
                formatter:'{c}'
            },
            data:data.order
        },
        {
            type:'pie',radius:'25%',center:['50%','57%'],
            label: {normal:{position:'center',color:'#fff'}},
            labelLine:{normal:{show:false}},itemStyle:{color:'transparent'},
            data:[{value:1,name:'地点',tooltip:{formatter:' ',backgroundColor:'none'}}]
        },
    ]
		})
});
 
 
 
// 毛利润
var grossM_Site = echarts.init(document.getElementById('grossM_Site'));
$.get("data/不同区域的各指标数据.json").done(function (data) {
    //data = JSON.parse(data),
	grossM_Site.setOption({
    tooltip : {
        trigger: 'item',
        formatter:  "{b}：<br/>{c} 元<br/>（{d}%）"
    },
    legend: {
        type:'scroll',
        data:data.where
    },
    toolbox: {
        show : false,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {
                show: true,
                type: ['pie', 'funnel']
            },
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    series : [
        {
            name:'地点',
            type:'pie',
            radius : ["25%", '60%'],
            center : ['50%', '57%'],
            roseType : 'area',
            label:{
                show:true,
                formatter:'{c}'
            },
            data:data.gross
        },
        {
            type:'pie',radius:'25%',center:['50%','57%'],
            label: {normal:{position:'center',color:'#fff'}},
            labelLine:{normal:{show:false}},itemStyle:{color:'transparent'},
            data:[{value:1,name:'地点',tooltip:{formatter:' ',backgroundColor:'none'}}]
        },
    ]
		})
});
 
 
 
// 客单价平均值
var unitP_Site = echarts.init(document.getElementById('unitP_Site'));
$.get("data/不同区域的各指标数据.json").done(function (data) {
    //data = JSON.parse(data),
	unitP_Site.setOption({
    tooltip : {
        trigger: 'item',
        formatter:  "{b}：<br/>{c} 元<br/>（{d}%）"
    },
    legend: {
        type:'scroll',
        data:data.where
    },
    toolbox: {
        show : false,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {
                show: true,
                type: ['pie', 'funnel']
            },
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    series : [
        {
            name:'地点',
            type:'pie',
            radius : ["25%", '60%'],
            center : ['50%', '57%'],
            roseType : 'area',
            label:{
                show:true,
                formatter:'{c}'
            },
            data:data.unit
        },
        {
            type:'pie',radius:'25%',center:['50%','57%'],
            label: {normal:{position:'center',color:'#fff'}},
            labelLine:{normal:{show:false}},itemStyle:{color:'transparent'},
            data:[{value:1,name:'地点',tooltip:{formatter:' ',backgroundColor:'none'}}]
        },
    ]
		})
});
 
 
 
// 商品销售数量Top10
var saleMtop10 = echarts.init(document.getElementById('saleMtop10'));
$.get("data/商品销售数量前10.json").done(function (data) {
    //data = JSON.parse(data),
	saleMtop10.setOption({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        left: '0%',
        top:'20',
        right:'2%',
        bottom: '10',
        containLabel: true
    },
    barCategoryGap:'40%',
    xAxis: {
        type: 'value',
        min: 0,
        interval: 5,
        boundaryGap: [0, 0.01],
        axisLine:{lineStyle:{width:0}},
    },
    yAxis: {
        type: 'category',
        splitLine:{lineStyle:{width:0}},
        data: data.商品名称
    },
    series: [
        {
            name: '售出总数量',
            type: 'bar',
            label:{
                position:'right',
                verticalAlign:'middle',
            },
            data: data.销售数量
        }
    ]
		})
});
 
 
 
// 商品价格区间
var priceRange = echarts.init(document.getElementById('priceRange'));
$.get("data/商品销量数量和价格数据.json").done(function (data) {
    //data = JSON.parse(data),
	priceRange.setOption({
    grid: {
        left: '3%',
        right: '10',
        bottom: '10',
        containLabel: true
    },
    tooltip : {
        showDelay : 0,
        formatter : function (params) {
                return params.seriesName + '<br/>'
                + '单价：' + params.value[0] + '<br/>'
                + '销量：' + params.value[1];
        },
        axisPointer:{
            show: true,
            type : 'cross',
            lineStyle: {
                type : 'dashed',
                width : 1
            }
        }
    },
 
    legend: {
        type:'scroll',
    },
    xAxis :{ scale:true},
    yAxis :{ scale:true},
	})
});
$.get("data/商品销量数量和价格数据.json").done(function (data) {
    //data = JSON.parse(data);
    var series=[];
    for(var i = 0;i < data.data.length;i++){
        series.push({
            name: data.data[i].name,
            type: 'scatter',
            data: [data.data[i].value],
            symbolSize:data.data[i].value[1]*2
        });
    }
    priceRange.setOption({
        series:series
    });
});
 
 
 
// 销售金额预测值与实际值
var saleAll = echarts.init(document.getElementById('saleAll'));
$.get("data/销售金额实际值与预测值.json").done(function (data) {
    //data = JSON.parse(data),
	saleAll.setOption({
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        type:'scroll'
    },
    grid: {
        left: '10',
        right: '20',
        bottom: '10',
        containLabel: true
    },
    xAxis:  {
        type: 'category',
        boundaryGap: false,
        data: ['1日','2日','3日','4日','5日','6日','7日','8日','9日','10日',
		'11日','12日','13日','14日','15日','16日','17日','18日','19日','20日','21日','22日']
    },
    yAxis: {
        type: 'value',
        name: '金额（万元）',
        axisLabel: {
            formatter: '{value}'
        }
    },
    series: [
        {
            name:'销售金额实际值',
            type:'line',
            data:data.T,
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(194, 53, 49,.8)'
                    }, {
                        offset: 1,
                        color: 'transparent'
                    }])
                }
            },
        },
        {
            type:'line',
            name:'销售金额预测值',
            data:data.Y,
            areaStyle:{
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(47, 69, 84,.4)'
                    }, {
                        offset: 1,
                        color: 'transparent'
                    }])
                }
            }
        },
    ]
		})
});
 
 
 
window.onresize = function() {
    saleM_Site.resize();
    orderQ_Site.resize();
    grossM_Site.resize();
    unitP_Site.resize();
    saleMtop10.resize();
    priceRange.resize();
    saleAll.resize();
}

效果图展示：

四.可视化展现库存分析 

Ø 无人售货机库存管理是影响企业赢利能力的重要因素之一。
Ø 依据无人售货机行业背景知识，对售货机库存情况进行可视化展示，通过对数据的多维度展现，分析现有的库存体系，为决策提供数据支持，还原库存体系原貌。

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

分别对不同地点的售货机的库存数量和缺货数量的比例进行统计后，得到的结果如表所示。

Ø 使用簇状柱状图对不同地点的售货机的设备容量情况进行展示，如图所示，绘制 下图 的代码详见 charts.int.js 文件。
Ø 由图可以看出，食堂和体育馆这两个地点的售货机商品缺货数量相对较多，教学楼和操场的售货机商品库存数量相对较多。

代码展示 ：

// 设备容量
var mVolume = echarts.init(document.getElementById('mVolume'));
$.get("data/不同地点售货机库存数量和缺货数量.json").done(function (data) {
	//data = JSON.parse(data),
	mVolume.setOption({
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:data.类型,
        type:'scroll',
    },
    barWidth:'35%',
    barCategoryGap:'40%',
    grid: {
        left: '10',
        right: '20',
        bottom: '10',
        containLabel: true
    },
    xAxis:  {
        type: 'category',
        data: data.地点
    },
    yAxis: {
        type: 'value',
    },
    series: [
        {
            name:'库存总量',
            type:'bar',
            stack: '总量',
            label:{
                position:'insideTop',
                padding:[5,0,0,0]
            },
            data:data.库存数量,
        },
        {
            type:'line',
            name:'预警线',
            connectNulls: 'true',
            data:[150,150,150,150,150],
        },
        {
            name:'缺货总量',
            type:'bar',
            stack: '总量',
            label:{
                position:'insideTop',
                padding:[5,0,0,0]
            },
            itemStyle:{
                color:'#ca841e'
            },
            data:data.缺货数量,
        }
    ]
		})
});

二.绘制环形图展示品类库存占比 

对不同类型的商品库存数量进行统计后，得到的结果如表所示。

Ø 使用环形图对不同类型的商品库存数量进行展示，如图所示，绘制 下图 的代码详见 charts.int.js 文件。
Ø 由图可以看出，饮料类商品库存数量相对较少 ，碳酸饮料类商品库存数量最多，茶类商品库存数量最少，其他类型的商品库存数量都相差不大。

代码展示：

var categoryStock = echarts.init(document.getElementById('categoryStock'));
$.get("data/不同类型的商品库存数量.json").done(function (data) {
	//data = JSON.parse(data),
	categoryStock.setOption({
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        data:data.类型,
        left: 10,
        top: 20,
    },
    series: [
        {
            name:'品类',
            type:'pie',
            radius: [0, '40%'],
            center : ['55%', '53%'],
            label: {
                normal: {
                    position: 'inner'
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:data.一级商品
        },
        {
            name:'品类',
            type:'pie',
            color:['LimeGreen', 'DarkGreen', 'red', 'blue', 'Purple',
                'DarkOrchid', 'Navy', '#061e42', 'black', '#4f8fa8'],
            radius: ['40%', '66%'],
            center : ['55%', '53%'],
            selectedMode: 'multiple',
            itemStyle:{
                borderWidth:'2',
                borderColor:'none'
            },
            label: {
            },
            data:data.二级商品
        }
    ]
		})
});

三.绘制堆积条形图展示商品存销量 

商品库存数量和销售数量数据如表所示。

Ø 使用堆积条形图对商品库存数量和销售数量进行展示，如图所示，绘制 下图 的代码详见 charts.int.js 文件。
Ø 由图可以看出，酸枣糕的销售数量是最高的，超过 200 ，而营养快线的库存数量最高。

代码展示：

var stockSales = echarts.init(document.getElementById('stockSales'));
$.get("data/商品库存数量和销售数量.json").done(function (data) {
    //data = JSON.parse(data),
	stockSales.setOption({
	tooltip: {
		trigger: 'axis',
		axisPointer: {
			type: 'shadow'
		}
	},
	grid: {
		left: '0%',
		top:'60',
		right:'5%',
		bottom: '10',
		containLabel: true
	},
	barWidth:'45%',
	legend: {
		data:data.数量类型,
		top:'22'
	},
	xAxis: {
		type: 'value',
		min: 0,
		boundaryGap: [0, 0.01],
		axisLine:{lineStyle:{width:0}},
	},
	yAxis: {
		type: 'category',
		splitLine:{lineStyle:{width:0}},
		data: data.商品名称
	},
	series: [
		{
			name: '销售数量',
			type: 'bar',
			stack: '数量',
			label:{
				position:'insideRight',
				padding:[0,5,0,0],
			},
			data: data.销售数量
		},
		{
			name: '库存数量',
			type: 'bar',
			stack: '数量',
			label:{
				position:'insideRight',
				padding:[0,5,0,0],
			},
			data: data.库存数量
		}
	]
		})
});

四.绘制簇状柱状-折线图展示滞销商品

根据商品的存货周转天数可以计算商品的存货周转率，现有商品滞销数据如表所示。

Ø由图可以看出，旺旺牛奶、沙琪玛、安慕希和营养快线的滞销金额较高，各个商品的库存数量都在100以下，小鱼仔的存货周转率最低，沙琪玛的存货周转率最高。

代码展示：

// 滞销商品
var unsalable = echarts.init(document.getElementById('unsalable'));
$.get("data/商品滞销数据.json").done(function (data) {
	//data = JSON.parse(data),
	unsalable.setOption({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    grid: {
        left: '10',
        right: '10',
        bottom: '10',
        containLabel: true
    },
    toolbox: {
        show:false,
        feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    legend: {
        data:data.name
    },
    barGap:'10%',
    barCategoryGap:'25%',
    xAxis: [
        {
            type: 'category',
            data: data.商品名称,
            axisPointer:{type:'shadow'},
            splitLine:{lineStyle:{width:0}},
            axisLabel:{rotate:30}
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '',
            min: 0,
            max: 500,
            interval: 100,
            axisLabel: {
                formatter: '{value}'
            },
            axisLine:{lineStyle:{width:0}},
        },
        {
            type: 'value',
            name: '',
            min: 0,
            max: 1,
            interval: 0.2,
            axisLabel: {
                formatter: '{value} '
            },
            axisLine:{lineStyle:{width:0}},
            
        }
    ],
    series: [
        {
            name:'滞销金额',
            type:'bar',
            data:data.滞销金额
        },
        {
            name:'存货周转率',
            type:'line',
            yAxisIndex: 1,
            label:{
                show:'true',
                color:'#fff',
                backgroundColor:'rgba(235,48,48,0.8)',
                verticalAlign:'middle',
                padding:[2,4,0,4],
                borderRadius:4,
                position:'inside'
            },
            data:data.存货周转率
        },
        {
            name:'库存数量',
            type:'bar',
            data:data.库存数量
        }
    ]
		})
});

五.绘制矩形树图展示商品存货周转天数

现有各类商品存货周转天数数据如表所示。

Ø 使用矩形树图对各类商品的存货周转天数进行展示，如图所示，绘制 下图 的代码详见 charts.int.js 文件。

Ø 由图可以看出，井水豆腐香辣味、香芋面包和沙琪玛 3 种商品的存货周转天数最大。

代码展示：

// 商品存货周转天数
var formatUtil = echarts.format;
var turnaround = echarts.init(document.getElementById('turnaround'));
$.get("data/各类商品存货周转天数.json").done(function (data) {
    //data = JSON.parse(data),
    turnaround.setOption({
        tooltip:{
        formatter: '{b}：{c}'
    },
    series: [{
        type: 'treemap',
        label:{
            show:true,
            position:'insideTopLeft',
            distance:0,
            padding:10,
            formatter:"{b}\n{a|{c}}",
            rich: {
                a: {
                    padding:6,
                    align:'right',
                    verticalAlign:'bottom',
                    color:'#fff',
                }
            }
        },
        roam:false,
        nodeClick:false,
        breadcrumb:{show:false},
        itemStyle:{
            gapWidth:5,
            borderColor:'transparent'
        },
        data: data.data
    }]
        })
});

全部代码展示：

// 商品存货周转天数
var formatUtil = echarts.format;
var turnaround = echarts.init(document.getElementById('turnaround'));
$.get("data/各类商品存货周转天数.json").done(function (data) {
    //data = JSON.parse(data),
    turnaround.setOption({
        tooltip:{
        formatter: '{b}：{c}'
    },
    series: [{
        type: 'treemap',
        label:{
            show:true,
            position:'insideTopLeft',
            distance:0,
            padding:10,
            formatter:"{b}\n{a|{c}}",
            rich: {
                a: {
                    padding:6,
                    align:'right',
                    verticalAlign:'bottom',
                    color:'#fff',
                }
            }
        },
        roam:false,
        nodeClick:false,
        breadcrumb:{show:false},
        itemStyle:{
            gapWidth:5,
            borderColor:'transparent'
        },
        data: data.data
    }]
        })
});
 
 
 
// 存销量
var stockSales = echarts.init(document.getElementById('stockSales'));
$.get("data/商品库存数量和销售数量.json").done(function (data) {
    //data = JSON.parse(data),
	stockSales.setOption({
	tooltip: {
		trigger: 'axis',
		axisPointer: {
			type: 'shadow'
		}
	},
	grid: {
		left: '0%',
		top:'60',
		right:'5%',
		bottom: '10',
		containLabel: true
	},
	barWidth:'45%',
	legend: {
		data:data.数量类型,
		top:'22'
	},
	xAxis: {
		type: 'value',
		min: 0,
		boundaryGap: [0, 0.01],
		axisLine:{lineStyle:{width:0}},
	},
	yAxis: {
		type: 'category',
		splitLine:{lineStyle:{width:0}},
		data: data.商品名称
	},
	series: [
		{
			name: '销售数量',
			type: 'bar',
			stack: '数量',
			label:{
				position:'insideRight',
				padding:[0,5,0,0],
			},
			data: data.销售数量
		},
		{
			name: '库存数量',
			type: 'bar',
			stack: '数量',
			label:{
				position:'insideRight',
				padding:[0,5,0,0],
			},
			data: data.库存数量
		}
	]
		})
});
 
 
 
// 滞销商品
var unsalable = echarts.init(document.getElementById('unsalable'));
$.get("data/商品滞销数据.json").done(function (data) {
	//data = JSON.parse(data),
	unsalable.setOption({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    grid: {
        left: '10',
        right: '10',
        bottom: '10',
        containLabel: true
    },
    toolbox: {
        show:false,
        feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    legend: {
        data:data.name
    },
    barGap:'10%',
    barCategoryGap:'25%',
    xAxis: [
        {
            type: 'category',
            data: data.商品名称,
            axisPointer:{type:'shadow'},
            splitLine:{lineStyle:{width:0}},
            axisLabel:{rotate:30}
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '',
            min: 0,
            max: 500,
            interval: 100,
            axisLabel: {
                formatter: '{value}'
            },
            axisLine:{lineStyle:{width:0}},
        },
        {
            type: 'value',
            name: '',
            min: 0,
            max: 1,
            interval: 0.2,
            axisLabel: {
                formatter: '{value} '
            },
            axisLine:{lineStyle:{width:0}},
            
        }
    ],
    series: [
        {
            name:'滞销金额',
            type:'bar',
            data:data.滞销金额
        },
        {
            name:'存货周转率',
            type:'line',
            yAxisIndex: 1,
            label:{
                show:'true',
                color:'#fff',
                backgroundColor:'rgba(235,48,48,0.8)',
                verticalAlign:'middle',
                padding:[2,4,0,4],
                borderRadius:4,
                position:'inside'
            },
            data:data.存货周转率
        },
        {
            name:'库存数量',
            type:'bar',
            data:data.库存数量
        }
    ]
		})
});
 
 
 
//品类库存占比
var categoryStock = echarts.init(document.getElementById('categoryStock'));
$.get("data/不同类型的商品库存数量.json").done(function (data) {
	//data = JSON.parse(data),
	categoryStock.setOption({
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        data:data.类型,
        left: 10,
        top: 20,
    },
    series: [
        {
            name:'品类',
            type:'pie',
            radius: [0, '40%'],
            center : ['55%', '53%'],
            label: {
                normal: {
                    position: 'inner'
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:data.一级商品
        },
        {
            name:'品类',
            type:'pie',
            color:['LimeGreen', 'DarkGreen', 'red', 'blue', 'Purple',
                'DarkOrchid', 'Navy', '#061e42', 'black', '#4f8fa8'],
            radius: ['40%', '66%'],
            center : ['55%', '53%'],
            selectedMode: 'multiple',
            itemStyle:{
                borderWidth:'2',
                borderColor:'none'
            },
            label: {
            },
            data:data.二级商品
        }
    ]
		})
});
 
 
 
// 设备容量
var mVolume = echarts.init(document.getElementById('mVolume'));
$.get("data/不同地点售货机库存数量和缺货数量.json").done(function (data) {
	//data = JSON.parse(data),
	mVolume.setOption({
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:data.类型,
        type:'scroll',
    },
    barWidth:'35%',
    barCategoryGap:'40%',
    grid: {
        left: '10',
        right: '20',
        bottom: '10',
        containLabel: true
    },
    xAxis:  {
        type: 'category',
        data: data.地点
    },
    yAxis: {
        type: 'value',
    },
    series: [
        {
            name:'库存总量',
            type:'bar',
            stack: '总量',
            label:{
                position:'insideTop',
                padding:[5,0,0,0]
            },
            data:data.库存数量,
        },
        {
            type:'line',
            name:'预警线',
            connectNulls: 'true',
            data:[150,150,150,150,150],
        },
        {
            name:'缺货总量',
            type:'bar',
            stack: '总量',
            label:{
                position:'insideTop',
                padding:[5,0,0,0]
            },
            itemStyle:{
                color:'#ca841e'
            },
            data:data.缺货数量,
        }
    ]
		})
});
 
 
 
window.onresize = function() {
    turnaround.resize();
    stockSales.resize();
    unsalable.resize();
    categoryStock.resize();
    mVolume.resize();
}
Ø 对无人售货机库存情况进行大屏可视化展示，如图所示。
Ø 由图可以看出，在不同区域中，体育馆的无人售货机缺货总量最多；在不同商品品类中，碳酸饮料类的库存最多，商品的存货周转天数最大为 9 天，旺旺牛奶、沙琪玛、安慕希和营养快线的滞销金额较高。

五.可视化展示用户分析 

Ø 对用户的购买行为进行分析，有助于了解用户的消费特点，且能提供个性化的服务，从而提升用户体验和忠诚度。
Ø 依据无人售货机行业背景知识，利用用户消费的时间、地点等指标分析用户行为，对售货机用户情况进行可视化展示。

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

簇状柱状图适合分析对比组内各项数据。通过对不同区域和时间的用户消费人数进行可视化展示，分析用户偏好的消费地点和消费时段，用户消费地点如表所示。

用户消费时段数据如表所示。

1. 用户消费地址 
Ø 对不同消费时段的售货机用户数量进行统计后，使用簇状柱状图对用户消费时段情况进行展示，如图所示，绘制 右图 的代码详见 charts.user.js 文件。
Ø 由图可以看出，下午是一天中消费人数最多的时段，早上消费人数最少，用户大部分在白天进行消费。
2.用户消费时间段
Ø 对不同消费时段的售货机用户数量进行统计后，使用簇状柱状图对用户消费时段情况进行展示，如图所示，绘制 右图 的代码详见 charts.user.js 文件。
Ø 由图可以看出，下午是一天中消费人数最多的时段，早上消费人数最少，用户大部分在白天进行消费。 

var expLoc = echarts.init(document.getElementById('expLoc'));
$.get("data/用户消费地点数据.json").done(function (data) {
    //data = JSON.parse(data),
	expLoc.setOption({
    tooltip: {
        trigger: 'axis',
    },
    grid: {
        left: '10',
        right: '10',
        bottom: '0',
        top:'30',
        containLabel: true
    },
    barCategoryGap:'60%',
    xAxis: [
        {
            type: 'category',
            data: data.消费地点,
            axisPointer: {
                type: 'shadow'
            },
            splitLine:{lineStyle:{width:0}}
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '',
            min: 0,
        }
    ],
    series: [
        {
            type:'bar',
            data:data.用户人数,
        }
    ]
		})
});

二.绘制折线图展示近5天用户人数新增和流失趋势 

计算用户最后一次购买行为距观察窗口结束的天数，天数大于n天，则为流失用户。现有近5天新增和流失用户数据如表所示。

Ø 使用折线图对近 5 天用户人数新增和流失趋势进行展示，如图所示，绘制 右图 的代码详见 charts.user.js 文件。
Ø 由图可以看出，近 5 天新增用户数最大为 25 人，流失用户数平均在 5 人以上。

代码展示：

// 近5日用户人数新增和流失趋势
var lossGrowth = echarts.init(document.getElementById('lossGrowth'));
$.get("data/近5日新增和流失用户数据.json").done(function (data) {
    //data = JSON.parse(data);
	lossGrowth.setOption({
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            type:'scroll'
        },
        grid: {
            left: '10',
            right: '30',
            bottom: '10',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: data.日期
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name:'新增人数',
                type:'line',
                data:data.新增人数,
                symbol:'circle',
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(194, 53, 49,.8)'
                        }, {
                            offset: 1,
                            color: 'transparent'
                        }])
                    }
                }
            },
            {
                name:'流失人数',
                type:'line',
                symbol:'circle',
                data:data.流失人数,
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(47, 69, 84,.8)'
                        }, {
                            offset: 1,
                            color: 'transparent'
                        }])
                    }
                }
            }
        ]
	});
});

三.绘制雷达图展示用户分群 

根据消费金额、购买数量、购买频率、交易次数和客单价对用户进行分群后，分群结果如表所示。

Ø 使用雷达图对用户分群进行展示，如图所示，绘制 右图 的代码详见 charts.user.js 文件。
Ø 由图可以看出，一般用户和潜力用户的消费金额、购买数量、购买频率、交易次数和客单价都比较高，其次是忠诚用户，而流失用户的消费金额、购买数量、购买频率、交易次数和客单价最低。

代码展示：

// 用户分群
var userGroup = echarts.init(document.getElementById('userGroup'));
$.get("data/用户分群数据.json").done(function (data) {
    //data = JSON.parse(data);
	userGroup.setOption({
    tooltip: {},
    legend: {
    },
    radar: {
        name: {
            textStyle: {
                color: '#fff',
                borderRadius: 3,
                padding: [3, 5]
           }
        },
        center: ['50%', '58%'],
        splitArea: {
            areaStyle: {
                color:'transparent'
            }
        },
        axisLine: { lineStyle: {color: '#061e42' }},
        splitLine: { lineStyle: {color: '#061e42' }},
        indicator: [
           { name: '消费金额', max: 80,color:'black'},
           { name: '购买数量', max: 80,color:'black'},
           { name: '购买频率', max: 80,color:'black'},
           { name: '交易次数', max: 80,color:'black'},
           { name: '客单价', max: 80,color:'black' }
        ]
    },
    series: [{
        name: '用户分群',
        type: 'radar',
        
        areaStyle:{
            show:true,
            opacity:0.3
        },
        data : data.data
    }]
		})
});

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

对不同类型用户的人数进行统计后，结果如表所示。

Ø 使用环形图对不同用户类型人数进行展示，如图所示，绘制 右图 的代码详见 charts.user.js 文件。
Ø 由图可以看出，一般用户、潜力用户和流失用户的人数占比较大，忠诚用户的人数占比较小。

 代码展示：

//用户类型人数
var cSorNum = echarts.init(document.getElementById('cSorNum'));
$.get("data/不同类型用户的人数.json").done(function (data) {
    //data = JSON.parse(data);
	cSorNum.setOption({
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        show:false
    },
    grid: {
        left: '0%',
        right: '0%',
        bottom: '0%',
        containLabel: true
    },
    series : [
        {
            name: '用户类型人数',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['50%', '50%'],
            label:{
                formatter:"{b}\n{a|{d}%}",
                rich: {
                    a: {
                        padding:6,
                        align:'left',
                        color:'#fff'
                    }
                }
            },
            data:data.data,
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
		})
});

 五.绘制字符云图展示用户画像

现有用户购买的商品名称和商品数量数据如表所示。

Ø 根据用户购买的商品名称和商品数量数据，使用词云图对用户特征进行展示，观察用户的购买喜好，如图所示，绘制 右图 的代码详见 charts.user.js 文件。
Ø 由图可以看出用户最喜欢购买的商品是沙琪玛，其次是方便面、燕麦饼干、可口可乐等商品。

 代码展示：

var chart = echarts.init(document.getElementById('userHot'));
$.get("data/用户购买的商品名称和商品数量数据.json").done(function (data) {
    //data = JSON.parse(data);
    var option = {
        tooltip : {
            trigger: 'item',
            formatter:function(item){
                return item.name + "：" + item.value.toFixed(2);
            }
        },
        series: [ {
            type: 'wordCloud',
            sizeRange: [10,30],
            rotationRange: [0, 0],
            rotationStep: 180,
            gridSize: 0,
            autoSize: {enable:true, minSize:5},
            shape: 'roundRect',
            left: 'center',
            top: 'center',
            width: '100%',
            height: '100%',
            right: null,
            bottom: null,
            textStyle: {
                normal: {
                    color: function () {
                        return 'rgb(' + [
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160)
                        ].join(',') + ')';
                    }
                },
                emphasis: {
                    shadowBlur: 26,
                    color:'#333',
                    shadowColor: '#ccc',
                    fontSize:20
                }
            },
            data: data.data.sort(function (a, b) {
                return b.value  - a.value;
            })
        } ]
    };
    chart.setOption(option);
});

全部代码展示：

// 近5日用户人数新增和流失趋势
var lossGrowth = echarts.init(document.getElementById('lossGrowth'));
$.get("data/近5日新增和流失用户数据.json").done(function (data) {
    //data = JSON.parse(data);
	lossGrowth.setOption({
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            type:'scroll'
        },
        grid: {
            left: '10',
            right: '30',
            bottom: '10',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: data.日期
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name:'新增人数',
                type:'line',
                data:data.新增人数,
                symbol:'circle',
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(194, 53, 49,.8)'
                        }, {
                            offset: 1,
                            color: 'transparent'
                        }])
                    }
                }
            },
            {
                name:'流失人数',
                type:'line',
                symbol:'circle',
                data:data.流失人数,
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(47, 69, 84,.8)'
                        }, {
                            offset: 1,
                            color: 'transparent'
                        }])
                    }
                }
            }
        ]
	});
});
 
 
 
//用户类型人数
var cSorNum = echarts.init(document.getElementById('cSorNum'));
$.get("data/不同类型用户的人数.json").done(function (data) {
    //data = JSON.parse(data);
	cSorNum.setOption({
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        show:false
    },
    grid: {
        left: '0%',
        right: '0%',
        bottom: '0%',
        containLabel: true
    },
    series : [
        {
            name: '用户类型人数',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['50%', '50%'],
            label:{
                formatter:"{b}\n{a|{d}%}",
                rich: {
                    a: {
                        padding:6,
                        align:'left',
                        color:'#fff'
                    }
                }
            },
            data:data.data,
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
		})
});
 
 
 
// 用户分群
var userGroup = echarts.init(document.getElementById('userGroup'));
$.get("data/用户分群数据.json").done(function (data) {
    //data = JSON.parse(data);
	userGroup.setOption({
    tooltip: {},
    legend: {
    },
    radar: {
        name: {
            textStyle: {
                color: '#fff',
                borderRadius: 3,
                padding: [3, 5]
           }
        },
        center: ['50%', '58%'],
        splitArea: {
            areaStyle: {
                color:'transparent'
            }
        },
        axisLine: { lineStyle: {color: '#061e42' }},
        splitLine: { lineStyle: {color: '#061e42' }},
        indicator: [
           { name: '消费金额', max: 80,color:'black'},
           { name: '购买数量', max: 80,color:'black'},
           { name: '购买频率', max: 80,color:'black'},
           { name: '交易次数', max: 80,color:'black'},
           { name: '客单价', max: 80,color:'black' }
        ]
    },
    series: [{
        name: '用户分群',
        type: 'radar',
        
        areaStyle:{
            show:true,
            opacity:0.3
        },
        data : data.data
    }]
		})
});
 
 
 
// 用户消费时段
var expTime = echarts.init(document.getElementById('expTime'));
$.get("data/用户消费时段数据.json").done(function (data) {
    //data = JSON.parse(data);
	expTime.setOption({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        left: '10',
        top:'30',
        right:'10',
        bottom: '10',
        containLabel: true
    },
    barCategoryGap:'50%',
    xAxis: {
        type: 'value',
        min: 0,
        boundaryGap: [0, 0.01],
        axisLine:{lineStyle:{width:0}}
    },
    yAxis: {
        type: 'category',
        splitLine:{lineStyle:{width:0}},
        data: data.消费时段
    },
    series: [
        {
            name: '售出总数量',
            type: 'bar',
            label:{
                position:'right',
                verticalAlign:'middle'
            },
            data: data.用户人数
        }
    ]
		})
});
 
 
 
// 用户消费地点
var expLoc = echarts.init(document.getElementById('expLoc'));
$.get("data/用户消费地点数据.json").done(function (data) {
    //data = JSON.parse(data),
	expLoc.setOption({
    tooltip: {
        trigger: 'axis',
    },
    grid: {
        left: '10',
        right: '10',
        bottom: '0',
        top:'30',
        containLabel: true
    },
    barCategoryGap:'60%',
    xAxis: [
        {
            type: 'category',
            data: data.消费地点,
            axisPointer: {
                type: 'shadow'
            },
            splitLine:{lineStyle:{width:0}}
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '',
            min: 0,
        }
    ],
    series: [
        {
            type:'bar',
            data:data.用户人数,
        }
    ]
		})
});
 
 
 
// 商品价格区间
var pInterval = echarts.init(document.getElementById('pInterval'));
pInterval.setOption({
    grid: {
        left: '3%',
        right: '10',
        bottom: '10',
        containLabel: true
    },
    tooltip : {
        showDelay : 0,
        formatter : function (params) {
                return params.seriesName + '<br/>' + '单价：' + params.value[0] + '<br/>' + '销量：' + params.value[1];
        },
        axisPointer:{
            show: true,
            type : 'cross',
            lineStyle: {
                type : 'dashed',
                width : 1
            }
        }
    },
 
    legend: {
        type:'scroll',
    },
    xAxis :{ scale:true},
    yAxis :{ scale:true},
});
 
$.get("data/商品销量数量和价格数据.json").done(function (data) {
    //data = JSON.parse(data);
    var series=[];
    for(var i = 0;i < data.data.length;i++){
        series.push({
            name: data.data[i].name,
            type: 'scatter',
            data: [data.data[i].value],
            symbolSize:data.data[i].value[1]*2
        });
    }
    pInterval.setOption({
        series:series
    });
});
 
 
 
// 用户画像
var chart = echarts.init(document.getElementById('userHot'));
$.get("data/用户购买的商品名称和商品数量数据.json").done(function (data) {
    //data = JSON.parse(data);
    var option = {
        tooltip : {
            trigger: 'item',
            formatter:function(item){
                return item.name + "：" + item.value.toFixed(2);
            }
        },
        series: [ {
            type: 'wordCloud',
            sizeRange: [10,30],
            rotationRange: [0, 0],
            rotationStep: 180,
            gridSize: 0,
            autoSize: {enable:true, minSize:5},
            shape: 'roundRect',
            left: 'center',
            top: 'center',
            width: '100%',
            height: '100%',
            right: null,
            bottom: null,
            textStyle: {
                normal: {
                    color: function () {
                        return 'rgb(' + [
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160)
                        ].join(',') + ')';
                    }
                },
                emphasis: {
                    shadowBlur: 26,
                    color:'#333',
                    shadowColor: '#ccc',
                    fontSize:20
                }
            },
            data: data.data.sort(function (a, b) {
                return b.value  - a.value;
            })
        } ]
    };
    chart.setOption(option);
});
 
 
 
 
window.onresize = function() {
    cSorNum.resize();
    lossGrowth.resize();
    expTime.resize();
    expLoc.resize();
    pInterval.resize();
    userGroup.resize();
    chart.resize();
};

Ø 对无人售货机用户情况进行大屏可视化展示，如图所示。
Ø 由图可以看出，用户偏好的消费区域是教学楼，用户偏好的消费时段是下午，用户普遍在白天进行消费；忠诚用户占比较少，说明无人售货机的用户流动性较强，可以根据用户的喜好调整无人售货机的商品结构，吸引用户进行复购，从而提高忠诚用户的占比。

 

布丁碎
关注
  • 32
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
最新发布，2018年无人售货机十大品牌排名揭晓！
智付电子支付有限公司官方博客
12-20 8042
去年，无人货架发展火爆后快速迎来寒冬。在无人货架发展受阻下，无人售货机又在今年刮起了新一股热风。那么，无人售货机能代表未来5年新零售的潮流吗？我们或许能从十大无人售货机品牌中找到答案！ “小行业”的无人售货机为何能吸引巨头入局？   前几年在电商冲击和实体零售遇冷下，便利店逆势却迎来了高速发展期。于是，蚂蚁金服、京东、腾讯、智付、苏宁等巨头们纷纷入局，不少无人零售机创业公司也迎来了资...
无人售货机Echarts数据分析
05-13
无人售货机Echarts数据分析
bdwl:博达物联无人售货机项目源码-项目
03-24
bdwl:博达物联无人售货机项目源码
Kettle 无人售货机项目实战数据包
10-30
Kettle 无人售货机项目实战数据包
chengxusheji.rar_无人售货_自动售货机
09-21
自动售货机的C编程 可以实现自动找零 实现无人监守
ETL第八章无人售货机零售项目实践
m0_52058217的博客
11-25 3064
ETL实战项目——无人售货机
无人售货机项目分析
l15972865175的博客
05-13 877
由图可以看出，用户偏好的消费区域是教学楼，用户偏好的消费时段是下午，用户普遍在白天进行消费；忠诚用户占比较少，说明无人售货机的用户流动性较强，可以根据用户的喜好调整无人售货机的商品结构，吸引用户进行复购，从而提高忠诚用户的占比。由图可以看出，在不同区域的无人售货机中，体育馆的售货机销售金额占比最大，教学楼的售货机订单量占比最大，售货机毛利润占比最大的是操场，售货机客单价平均值最大的是田径场；单价较低的商品销量较高。无人售货机是商业自动化的常用设备，它不受时间、地点的限制，能节省人力、方便交易。
分析无人售货机项目分析
2403_83177329的博客
05-13 1153
忠诚用户占比较少，说明无人售货机的用户流动性较强，可以根据用户的喜好调整无人售货机的商品结构，吸引用户进行复购，从而提高忠诚用户的占比。由图可以看出，在不同区域的无人售货机中，体育馆的售货机销售金额占比最大，教学楼的售货机订单量占比最大，售货机毛利润占比最大的是操场，售货机客单价平均值最大的是田径场；单价较低的商品销量较高。由图可以看出，一般用户和潜力用户的消费金额、购买数量、购买频率、交易次数和客单价都比较高，其次是忠诚用户，而流失用户的消费金额、购买数量、购买频率、交易次数和客单价最低。
Kettle 无人售货机项目实战
qq_62974479的博客
10-30 2789
解决无人售货机收益无法达到最大化问题，需要分析客户每天的订单列表、订单详情和无人售货机日销售金额等数据，获取有关热销和滞销商品信息，以及无人售货机的收入和利润信息。
Echarts无人售货机代码分析
2302_81169928的博客
05-13 1023
可视化使用到的数据表如表所示。无人售货机各特征数据josn售货机销售金额及销售金额增长率数据.json商品销售金额前5名.json不同地点售货机销售数据json不同支付方式用户人数json不同区域的各指标数据.json商品销售数量前10名.json商品销量数量和价格数据.json销售金额实际值与预测值.json不同地点售货机库存数量和缺货数量.json不同类型的商品库存数量.json商品库存数量和销售数量.json商品滞销数据.json。
python数据分析项目有趣 新零售-无人智能售货机商务数据分析
06-25
python数据分析项目有趣 新零售-无人智能售货机商务数据分析 jupter格式的html 项目背景 站点选择等是自动售货机运营者需要重点关注的问题。因此，科学的商业 数据分析能够帮助经营者了解用户需求，掌握商品需求量，...
基于Python+MySQL+Pyqt5开发的自动贩卖机系统（无人售货机）
毕业作品网站
10-08 1817
另外，当前系统的维护主要是通过企业遇到问题时再外包维修完成，这可能主要是出于成本的考量。现行的系统在自助结账时采用的是按照重量进行比较，这种方法对于单重较大的物品较为有效，但对于单重较轻的商品会对重量精度要求较高，进而导致设备的成本以及后期维护成本较高。因此，我们采用的是图像识别技术进行商品识别，进而实现自动扣款。因此，我们可以通过分析该货柜的销售情况进行合理分析，找到该货柜最常见的顾客群体，进行针对性的个性化的进货、配货方案。同时，现行系统采用的登陆方式是传统的密码登陆模式，安全性不及生物识别技术。
记录一次前端页面崩溃的产生及处理
weixin_51123079的博客
05-30 606
记录一次前端页面崩溃的产生及处理
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 682
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
前端开发记录
qq_25806839的博客
05-31 231
【代码】前端开发记录。
从CSV到数据库(简易)
qq_31856061的博客
05-31 355
需求：客户上传CSV文档，要求CSV文档内容查重/插入/更新相关数据。框架：jdbcTemplate、commons-io、DB：oracle相关依赖：这里本来打算用的2.11.0，无奈正式项目那边用老版本1.3.1，新版本对类型支持和转换好一点。不过无伤大雅。
Typescript高级: 深入理解extends keyof语法
最新发布
Wang的专栏
06-02 774
在TypeScript中，extends关键字是类型系统中一个极其重要的组成部分它不仅用于类的继承，也是类型兼容性检查和泛型约束的关键机制特别是当它与keyof关键字结合，形成的结构时它为类型系统带来了强大的灵活性和表达能力，让我们能够在泛型中对对象的属性进行操作和约束。
【JS实战案例汇总——不定时更新版】
微木
05-30 360
练习JS的实用案例，倒计时算法、定时轮播图
java无人售货机项目
08-23
Java无人售货机项目是一个基于Java语言开发的自动售货机系统。这个项目可以实现无人值守的售货机销售服务，为用户提供方便、快捷的商品购买体验。 这个项目的主要功能包括商品库存管理、商品选购、支付功能和销售数据统计。首先，通过Java语言编写的程序可以对售货机中的商品进行管理，包括商品的添加、删除、修改和查询功能，保证售货机中商品的充足和更新。 其次，用户可以通过售货机的界面进行商品的选购，用户可以选择需要的商品种类和数量，并进行支付操作。这个项目使用Java语言编写的程序可以接收用户的操作指令，并根据用户的选择进行商品的出货流程，实现自动化的售货机服务。 在支付功能方面，该项目实现了多种支付方式的支持，包括现金支付和扫码支付等。用户可以通过现金投币或者使用二维码扫描支付宝、微信等支付方式完成支付操作，确保用户可以选择自己方便的支付方式进行购买。 最后，这个项目还包括对售货机销售数据的统计和分析功能，可以根据商品的销售情况生成销售报表，并实时监测售货机的库存情况，为商家提供参考依据。 总之，Java无人售货机项目通过使用Java语言编写的程序实现了无人值守的售货机服务，为用户提供方便、快捷的商品购买体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值