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

已于 2024-05-13 11:15:36 修改
阅读量663 收藏 26
点赞数 31
文章标签： 零售
于 2024-05-13 11:15:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/W_051/article/details/138783605
版权

目录

本项目所需js文件：

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

1.背景

2.分析无人售货机现状

3.需要使用无人售货机的数据表

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

1.整体效果呈现：

2.代码实现

a：销售金额 & 订单量 & 毛利润 & 售货机数量 & 购买用户数

b:销售金额变化趋势（双y轴）

c：商品销售金额Top5（条形图）

d：售货机销售情况（柱状图）

e：支付方式占比（饼图）

3.所有代码

三、可视化展现销售分析

1.整体效果呈现

2.代码实现

a:销售金额&订单量&毛利润&客单价平均值（南丁格尔玫瑰图）

b：销售金额预测值与实际值（折线图）

c:商品价格区间（散点图）

d:商品销售数量Top10（条形图）

3.所有代码

四、可视化展现库存分析

1.整体效果呈现

2.代码实现

a：商品存货周转天数（矩形树图）

b：设备容量（柱状堆积）

c：存销量（条形堆积）

d：滞销商品（双y轴）

e：品类库存占比（圆环饼图）

3.所有代码

五、可视化展示用户分析

1.整体效果呈现

3.所有代码

2.代码实现

a:近5日用户人数新增和流失趋势（折线图）

b:用户类型人数（圆环图）

c: 用户分群（雷达图）

d:用户消费时段（条形图）

e:用户消费地点（柱状图）

f:商品价格区间（散点图）

g：用户画像（词云图）

3.所有代码

本项目所需js文件：

        echarts

        echarts-wordcloud.min

        jquery-3.3.1

        lossgrowth

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

1.背景

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

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

2.分析无人售货机现状

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

大量生产、大量消费以及消费模式和销售环境的变化，要求出现新的流通渠道；而相对的超市、百货购物中心等新的流通渠道的产生，人工费用也在不断上升；加上场地的局限性和购物的便利性等因素的制约，无人售货机作为一种必需的机器便应运而生。

某公司部署的无人售货机在高需求背景下，销售额提升缓慢，订单量并未达到预期。为了探究问题的具体原因，需要结合销售背景从销售、库存、用户3个方向进行分析，并利用ECharts可视化展现销售现状，从而分析问题所在。

3.需要使用无人售货机的数据表

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

1.整体效果呈现：

由以上图片可知，销售金额、订单量、毛利润、售货机数量、购买用户数这五个模块是需要仪表盘

2.代码实现

a：销售金额 & 订单量 & 毛利润 & 售货机数量 & 购买用户数

1）新建一个JavaScript的项目，命名为chart.total.js

2）插入销售金额 & 订单量 & 毛利润 & 售货机数量 & 购买用户数的数据（仪表盘）

$.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)');
});

3）初始化图表

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"));

4）完善图表内容

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

}

这个模块是涵盖了五个仪表盘的数据

b:销售金额变化趋势（双y轴）

1）初始化图表

var saleRate = echarts.init(document.getElementById('saleRate'));

2）设置图表option值

$.get("data/售货机销售金额及其环比增长率.json").done(function (data) {
    //data = JSON.parse(data);
	saleRate.setOption({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },

3）用网格定位图表四边留空及顶部避开标题位置，使坐标轴数据能完整显示

grid: {
        x: 10,
        y: 50,
        x2: 10,
        y2: 10,
        containLabel: true
    },

4）设置legend位置及数据，位于图表右上方

legend: {
        data:['销售金额','销售金额环比增长率'],
        top: 10
    },
    barCategoryGap:'40%',

5）运用eCharts内置方法格式化日期，使x轴日期数据更简洁，同时不影响原数据在鼠标交互时的完整展现

xAxis: [
        {
            type: 'category',
            //日期数据
            data: data.日期,
            axisPointer: {
                type: 'shadow'
            },
            axisLabel: {
                formatter: function(value){
                    return echarts.format.formatTime('dd', value);
                }
            }
        }
    ],

6）设置Y坐标轴最小值、最大值和坐标轴间隔值

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
        }
    ],

7）series：

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.销售金额环比增长率
        }
    ]
		})
});

c：商品销售金额Top5（条形图）

     其实内容都大差不差，就是更改数据和图表更换

1）设置图表option值

$.get("data/售货机销售金额及其环比增长率.json").done(function (data) {
    //data = JSON.parse(data);
	saleRate.setOption({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },

2）var 初始化图表，和引用售货机金额及其环比增长率.json文件导入数据，和对标题的描写

    grid: {
        x: 10,
        y: 50,
        x2: 10,
        y2: 10,
        containLabel: true

3）用网格定位图表四边留空及顶部避开标题位

legend: {
        data:['销售金额','销售金额环比增长率'],
        top: 10
    },
    barCategoryGap:'40%',

d：售货机销售情况（柱状图）

1）我们只需要在柱状图的基础上把x轴改成数据轴即可

 xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],
        axisLine:{lineStyle:{width:0}},
    },
    yAxis: {
        type: 'category',
        splitLine:{lineStyle:{width:0}},
        data: data.商品名称

e：支付方式占比（饼图）

1）这里是设置他为饼图类型

 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)'
                }
            }
        }
    ]
		})
});

2）center设置他的饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标和显示触发显示等

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

3.所有代码

// 销售金额 & 订单量 & 毛利润 & 售货机数量 & 购买用户数
$.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();
};

三、可视化展现销售分析

1.整体效果呈现

2.代码实现

a:销售金额&订单量&毛利润&客单价平均值（南丁格尔玫瑰图）

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

1）初始化，设置option值

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}%）"
    },

2）设置了类型为饼图类型，且圆形的center设置他的饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标，和内圆心及设置为南丁格尔图然后文本标签（lable）设置为显示之后同上异步数据即可完成南丁格尔图

    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'}}]
        },
    ]

b：销售金额预测值与实际值（折线图）

     同理于销售金额变化趋势（双y轴）

c:商品价格区间（散点图）

1）设置了滚动

legend: {
        type:'scroll',

2）

xAxis：是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用

 yAxis：是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用，且只在数值轴中（type: 'value'）有效

    xAxis :{ scale:true},
    yAxis :{ scale:true},

3）异步数据同步到散点图中即可实现散点图的绘制

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

d:商品销售数量Top10（条形图）

     同理于商品销售金额Top5（条形图）

3.所有代码

// 销售金额
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();
}

四、可视化展现库存分析

1.整体效果呈现

2.代码实现

a：商品存货周转天数（矩形树图）

1）初始化图表

var formatUtil = echarts.format;
var turnaround = echarts.init(document.getElementById('turnaround'));

2）设置option值

$.get("data/各类商品存货周转天数.json").done(function (data) {
    //data = JSON.parse(data),
    turnaround.setOption({
        tooltip:{
        formatter: '{b}：{c}'
    },

3）series设置图表标题位置的属性 内边距，设置标签的填充，对齐方式以及颜色

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',
                }
            }
        },

4）创建对象的属性

roam:false,
nodeClick:false,
breadcrumb:{show:false},
itemStyle:{
gapWidth:5,
borderColor:'transparent'
        },

b：设备容量（柱状堆积）

1）初始化图表

var mVolume = echarts.init(document.getElementById('mVolume'));

2）设置option值

mVolume.setOption({
    tooltip: {
        trigger: 'axis'
    },

3）设置legend类型，调整间距和宽度

    barWidth:'35%',
    barCategoryGap:'40%',
    grid: {
        left: '10',
        right: '20',
        bottom: '10',
        containLabel: true
    },

4）设置x、y轴，并实现堆积柱状

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.缺货数量,
        }
    ]
		})
});

c：存销量（条形堆积）

      同理于设备容量（柱状堆积），只需要调换x，y轴

d：滞销商品（双y轴）

      同理于销售金额变化趋势（双y轴）

e：品类库存占比（圆环饼图）

1）初始化图表

var categoryStock = echarts.init(document.getElementById('categoryStock'));

2）设置option值

$.get("data/不同类型的商品库存数量.json").done(function (data) {
	//data = JSON.parse(data),
	categoryStock.setOption({
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },

3）设置图例legend

   legend: {
        orient: 'vertical',
        data:data.类型,
        left: 10,
        top: 20,
    },

4）设置series设置图表标题位置的属性 内边距，设置标签的填充，对齐方式以及颜色，实则就是圆环和饼图的结合

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.二级商品
        }
    ]
		})
});

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

五、可视化展示用户分析

1.整体效果呈现

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

2.代码实现

a:近5日用户人数新增和流失趋势（折线图）

同理于销售金额变化趋势（双y轴）

b:用户类型人数（圆环图）

同理于品类库存占比（圆环饼图）

c: 用户分群（雷达图）

1）设置了center即的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标

center: ['50%', '58%'],
        splitArea: {
            areaStyle: {
                color:'transparent'
            }
        },

2）indicator设置了雷达图的五个点的名称和最大值及颜色

type：设置了为雷达图的类型

data：异步数据同步完成雷达图的设置

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

d:用户消费时段（条形图）

同理于商品销售金额Top5（条形图）

e:用户消费地点（柱状图）

同理于售货机销售情况（柱状图）

f:商品价格区间（散点图）

同理于商品价格区间（散点图）

g：用户画像（词云图）

1）这里设置了type类型为词云图和大小区间为10到30，词云词语位置居中，宽度和高度都100%

right和bottom为空

            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,

2）设置的文字样式，颜色和字体大小等等

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

3.所有代码

// 近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();
};

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

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

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

yu:
关注
  • 31
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
web数据可视化（echarts版）代码3-2
x15207439871的博客
06-07 836
echarts代码
web数据可视化（echarts版）代码3-7
x15207439871的博客
06-07 785
echarts代码
应用实战：无人售货机零售项目ECharts展现
2301_77281478的博客
05-13 741
2.可视化展示销售情况总分析了解无人售货机零售项目背景可视化使用到的数据表如表所示。2.可视化展示销售情况总分析。
应用实战：无人售货机零售项目ECharts展现及分析
2301_80975885的博客
05-13 757
目前，无人售货机后台管理系统积累了大量用户的购买记录。在无人售货机信息表数据的预处理与建模完成后，从无人售货机销售的整体情况、销售情况、库存情况和用户情况4个方向对预处理和建模后的数据进行可视化展现与分析。我们有4个分析方向：1.销售情况总分析，销售分析，库存分析，用户分析2.可视化使用到的数据表如表所示。
应用实战：无人售货机零售项目ECharts展现（解析项目）
xidiexi的博客
05-13 1043
经过了一段学习Echarts，我们迎来了一个结课实训项目：无人售货机，话不多说，开肝。本实战项目所需的软件为：vose code。
第八章案例（1）：无人售货机零售项目实战
qq_51477731的博客
11-02 2829
无人售货机零售项目实战
无人售货机
weixin_52954183的博客
04-14 513
* * 案例：无人售货机 * 有橙汁和啤酒两种饮品，每种饮品价值5毛钱，现在用户可以通过一块钱硬币或者五毛钱硬币进行购买， * 如果用户通过一块钱硬币进行购买，无人售货机需要进行找零操作，如果有零钱，指示灯灭，找出零钱 * 如果没有，指示灯亮，退回硬币 * 没有零钱，用户还可以通过五毛钱硬币购买 */ #include<iostream> using namespace std; int buy();//函数声明,主要针对需要找零操作的用户，非找零也可以使用，但如果售货机内没有零钱就无法操作 .
Echarts 异步请求不能加载本地JSON数据解决方案，以及Http-Server安装与使用
Nick.Peng's Blogs
02-25 3585
文章目录一、前言二、分析&解决方案三、Http-Server简介&安装方法四、启动http本地服务方法五、附：Http-Server可选配置 一、前言 最近学习eharts制作图表，异步请求获取本地*.json数据，html文件都写好了，右击文件用浏览器直接打开时， 制作的图表并没有渲染出来，这是因为使用异步请求加载数据时，由于cors跨域资源共享问题导致的不能读取json数据；...
web数据可视化（echarts版）代码4-4
x15207439871的博客
06-07 712
echarts代码
无人售货机零售项目ECharts展现(最全！！)
05-13
运行即可
ECharts Web数据可视化教案-基于ECharts的大数据分析可视化平台实现无人售货机用户分析教案.docx
12-16
ECharts Web数据可视化教案-基于ECharts的大数据分析可视化平台实现无人售货机用户分析教案.docx
《Web数据可视化（ECharts版）》_PPT课件.rar
07-04
《Web数据可视化（ECharts版）》_PPT课件.rar
《Web数据可视化（ECharts版）》--教案.rar
07-04
《Web数据可视化（ECharts版）》--教案.rar
新零售数据中台：打造智能商业运营的核心引擎_光点科技
gdkj20110411的博客
05-28 311
随着数字化转型的浪潮席卷全球，新零售行业正在经历一场前所未有的革新。在这一过程中，“新零售数据中台”逐渐成为企业构建智能商业运营的核心引擎。本文将重点介绍新零售数据中台的概念、其在新零售中的作用，以及如何通过数据中台实现商业价值最大化。
半藏酒业新零售分红制度拆解，起盘运营服务商
2401_84115648的博客
05-28 243
半藏酱酒的DTC模式，即直接面向消费者，通过线上线下的结合，实现产品的快速销售和品牌的广泛传播。在这一模式下，半藏酱酒巧妙地运用了私域流量的概念，通过社群营销、股权众筹等方式，吸引了大量核心消费者和投资者，从而实现了销售额的快速增长。易创客社交新零售，运营+工具双管齐下，旨在通过技术加持，解决实体店门店营销难、获客成本高、用户维护成本高三大难题，打造一个新零售会员运营平台，还有分销系统 , 拼团系统 , 抽奖系统等营销系统工具，让商家经营更轻松。半藏酱酒招商模式，白酒合伙人模式，顶层模式设计。
零售EDI：Target DVS EDI项目案例
EDI电子数据交换 | 知行软件
05-27 817
Target塔吉特是美国一家巨型折扣零售百货集团，与全球供应商建立长远深入的合作关系，目前国内越来越多的零售产品供应商计划入驻Target。完成入驻资格审查之后，Target会向供应商提出EDI对接邀请，企业需要根据指示完成供应商EDI信息注册。Target主要有三种业务类型，分别为Domestic Business、International Business、DVS Business。本文将为大家讲解Target DVS（Direct Vendor Ship）业务的EDI项目案例。
POLARDB：新零售用户MySQL上云最佳选择
最新发布
colorfulyan的博客
05-28 303
POLARDB是阿里云自主研发的最新一代RDS关系型数据库，是特别针对互联网场景设计的Cloud-Native 云原生数据库。POLARDB for MySQL版本，在提供100%兼容MySQL5.6/8.0的关系型事务处理ACID特性之上，能够提供完全满足新零售、电商场景下的高并发结构化数据处理的SQL系统能力和完全云托管能力。既融合了商业数据库稳定可靠、高性能、高可用、可扩展的特征，又具有开源数据库简洁开放的优势。
无人售货机零售项目echarts展现
04-27
好的，我了解了您的要求，下面是我对此问题的回答： 首先，无人售货机零售项目可以使用echarts来展现数据和图表，echarts是一个基于JavaScript的开源可视化库，可以用于各种数据可视化的场景。 在无人售货机零售项目中，可以使用echarts来展现以下数据和图表： 1.销售数据可视化：通过echarts展现每台售货机的销售情况、销售额、销售量等数据，可以更直观地观察售货机的运营情况。 2.库存数据可视化：通过echarts展现每台售货机的库存情况，包括商品种类、库存量、补货频率等数据，可以更好地管理售货机的库存。 3.用户数据可视化：通过echarts展现用户的购买习惯、消费金额、消费频率等数据，可以更好地了解用户需求和行为，为售货机的经营提供参考。 以上是我对无人售货机零售项目中使用echarts展现数据和图表的建议，希望能对您有所帮助。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值