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

已于 2024-05-16 19:07:14 修改
阅读量1.4k 收藏 37
点赞数 9
文章标签： 零售
于 2024-05-13 11:27:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_80975885/article/details/136720412
版权

目录

一.了解无人售货机数据情况

1.简介

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

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

1.实现代码：

2.整体效果展示：

3.无人收货的仪表盘效果实现:

1）代码实现：

2)代码分析：

4.柱状和折线图来实现销售金额变化趋势（双y轴）

1）代码实现

2）代码分析

5.条形图来实现商品销售金额前5名

1）实现代码：

2）代码分析

6.柱状图来实现售货机销售情况。

实现代码：

代码分析

7.饼图来分析用户支付方式占比。

实现代码

代码分析

三.可视化展示销售分析

实现代码：

整体效果展示：

1无人售货的南丁格尔图的效果实现

1）实现代码

2）代码分析

2.无人售货的销售金额预测值与实际值

1）实现代码：

2）代码分析

3.用散点图来分析商品价格区间

1）实现代码

2）代码分析

 4.用条形图来分析商品销售数量前10名

1）代码实现

2）代码分析 

四、可视化展现库存分析

1.实现代码：

2.整体效果展示

​编辑1.用矩形树图来商品存货周转天数

1）实现代码

2）代码分析

2.用柱状堆积设备容量

1.实现代码：

 2）代码分析

3.存销量条形堆积

1）实现代码

2）代码分析

4.双y轴来实现滞销商品

1）实现代码

2）代码分析

5.用圆环饼图来实现品类库存占比

1）实现代码

2）代码分析

五.可视化展示用户分析

实现代码：

效果展示：

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

1）实现代码

2）代码分析：

2.用雷达图来实现用户分群

1）代码实现

2）代码分析：

3.用词云图来实现用户画像

1）实现代码：

2）代码分析：

4.用条形图来实现用户消费时段

1）代码实现

2）代码分析：

5.用散点图来实现商品价格区间

1）代码实现：

2）代码分析

6.用柱状图来实现用户消费地点

1）代码实现

2）代码分析

7.用环形图来实现用户类型人数

1）代码实现

2）代码分析

一.了解无人售货机数据情况

1.简介

目前，无人售货机后台管理系统积累了大量用户的购买记录。

在无人售货机信息表数据的预处理与建模完成后，从无人售货机销售的整体情况、销售情况、库存情况和用户情况4个方向对预处理和建模后的数据进行可视化展现与分析。

我们有4个分析方向：1.销售情况总分析，销售分析，库存分析，用户分析

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

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

1.实现代码：

// 销售金额 & 订单量 & 毛利润 & 售货机数量 & 购买用户数
$.get("data/无人售货机各特征数据.json").done(function (data) {
    //data = JSON.parse(data);
    saleT('saleM', '销售金额', 0, data.销售金额[0], data.销售金额[1], data.销售金额[2], '','#1779d9','rgba(23,121,217,0.6)');
    saleT('orderQ', '订单量', 0, data.订单量[0], data.订单量[1], data.订单量[2], '','#30b761','rgba(48,183,97,0.5)');
    saleT('grossM', '毛利润', 0, data.毛利润[0], data.毛利润[1], data.毛利润[2], '','#d04a4b','rgba(208,74,75,0.5)');
    saleT('discount', '折扣额', 0, data.折扣额[0], data.折扣额[1], data.折扣额[2], '千','#ca841e','rgba(202,132,30,0.5)');
    saleT('unitP', '客单价', 0, data.客单价[0], data.客单价[1], data.客单价[2], '','#00a7c2','rgba(0,167,194,0.5)');
});
/*
 *id: chart容器id;
 *title: 仪表盘名称
 *min: 最小值
 *max: 最大值
 *val: 当前实际值
 *tag: 目标值
 *unit: 单位符号
 *color1: 主轴颜色
 */

var saleM = echarts.init(document.getElementById("saleM"));
var orderQ = echarts.init(document.getElementById("orderQ"));
var grossM = echarts.init(document.getElementById("grossM"));
var discount = echarts.init(document.getElementById("discount"));
var unitP = echarts.init(document.getElementById("unitP"));

function saleT(id, title, min, max, val, tag, unit, color1,  color2) {

    var myChart = echarts.init(document.getElementById(id));

    option = {
        tooltip: {
            confine:true,
            trigger: 'item',
            formatter:function(data){
                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();
};

2.整体效果展示：

3.无人收货的仪表盘效果实现:

由图可知：我们销售分析有5个框架需要仪表盘，分别是 1.销售金额 2.订单量 3 毛利润 4 售货机数量 5.购买用户 所以我们可以一起实现

1）代码实现：
// 销售金额 & 订单量 & 毛利润 & 售货机数量 & 购买用户数
$.get("data/无人售货机各特征数据.json").done(function (data) {
    //data = JSON.parse(data);
    saleT('saleM', '销售金额', 0, data.销售金额[0], data.销售金额[1], data.销售金额[2], '','#1779d9','rgba(23,121,217,0.6)');
    saleT('orderQ', '订单量', 0, data.订单量[0], data.订单量[1], data.订单量[2], '','#30b761','rgba(48,183,97,0.5)');
    saleT('grossM', '毛利润', 0, data.毛利润[0], data.毛利润[1], data.毛利润[2], '','#d04a4b','rgba(208,74,75,0.5)');
    saleT('discount', '折扣额', 0, data.折扣额[0], data.折扣额[1], data.折扣额[2], '千','#ca841e','rgba(202,132,30,0.5)');
    saleT('unitP', '客单价', 0, data.客单价[0], data.客单价[1], data.客单价[2], '','#00a7c2','rgba(0,167,194,0.5)');
});
/*
 *id: chart容器id;
 *title: 仪表盘名称
 *min: 最小值
 *max: 最大值
 *val: 当前实际值
 *tag: 目标值
 *unit: 单位符号
 *color1: 主轴颜色
 */

var saleM = echarts.init(document.getElementById("saleM"));
var orderQ = echarts.init(document.getElementById("orderQ"));
var grossM = echarts.init(document.getElementById("grossM"));
var discount = echarts.init(document.getElementById("discount"));
var unitP = echarts.init(document.getElementById("unitP"));

function saleT(id, title, min, max, val, tag, unit, color1,  color2) {

    var myChart = echarts.init(document.getElementById(id));

    option = {
        tooltip: {
            confine:true,
            trigger: 'item',
            formatter:function(data){
                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);

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

这里的代码表示异步数据同步，从无人售货机各特征数据.json文件中获取数据到销售金额saleM，订单量orederQ等，

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

这里写的框架，表示我们用的是仪表盘类型，起始位置和结束位置0-180，和宽度为20，且axisTick这里表示的把刻度关闭了，然后axisLable：这里所实现的就都是对刻度标签的一个设置

            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: [{}]
        }]
    };

这里的splitLine表达的是分割线不显示，pointer：是表示的指针不显示，title这里是对标题的设置

detail这里是详情显示，也就是对框架显示补充细节，

4.柱状和折线图来实现销售金额变化趋势（双y轴）

1）代码实现
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.销售金额环比增长率
        }
    ]
		})
});
2）代码分析
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'
        }
    },

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

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

这里是为了用网格定位图表四边留空及顶部避开标题位置，和使坐标轴数据能完整显示

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

这里是对x，y轴进行设置，把y轴设置一个双y轴，然后定义左右轴

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

这里是导入数据，导入到左y轴和有y轴，左y轴设置成柱状图，右y轴设置成折线图

5.条形图来实现商品销售金额前5名

1）实现代码：
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.销售金额
        }
    ]
		})
});
2）代码分析
 xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],
        axisLine:{lineStyle:{width:0}},
    },
    yAxis: {
        type: 'category',
        splitLine:{lineStyle:{width:0}},
        data: data.商品名称

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

6.柱状图来实现售货机销售情况。

实现代码：
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.毛利润
        }
    ]
		})
});
代码分析
    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}},
        }
    ],

这里与条状不同是y轴为数据轴，，且设置了轴线的宽度等

series: [
        {
            name:'销售金额',
            type:'bar',
            data:data.销售金额
        },
        {
            name:'订单量',
            type:'bar',
            data:data.订单量
        },
        {
            name:'毛利润',
            type:'bar',
            data:data.毛利润
        }
    ]

想要实现多个柱状，我们需要导入多个数据给他们名字，和类型，异步数据即可

7.饼图来分析用户支付方式占比。

实现代码
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)'
                }
            }
        }
    ]
		})
});
代码分析
 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)'
                }
            }
        }
    ]
		})
});

这里是设置他为饼图类型

center设置他的饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标

和显示触发显示等

三.可视化展示销售分析

实现代码：

// 销售金额
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无人售货的南丁格尔图的效果实现

1）实现代码
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'}}]
        },
    ]
		})
});
2）代码分析
    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'}}]
        },
    ]

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

2.无人售货的销售金额预测值与实际值

1）实现代码：
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'
                    }])
                }
            }
        },
    ]
		})
});
2）代码分析

由于这是折线图我们可以同理柱状和折线图来实现销售金额变化趋势

3.用散点图来分析商品价格区间

1）实现代码
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
    });
});
2）代码分析
legend: {
        type:'scroll',

这里与之前不同的是我们的图例设置了滚动 

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

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

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

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

这里我们异步数据同步到散点图中即可实现散点图的绘制

 4.用条形图来分析商品销售数量前10名

1）代码实现
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.销售数量
        }
    ]
		})
});
2）代码分析 

同理：条形图来实现商品销售金额前5名分析

四、可视化展现库存分析

1.实现代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>售货机大数据分析平台</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
</head>
<body>
<div class="header">
  <div class="sysName">
    <h1 class="tit">售货机大数据分析平台</h1>
  </div>
  <div class="menu">
    <ul>
      <li><a href="total.html">总数据</a></li>
      <li><a href="sale.html">销售分析</a></li>
      <li class="sysnameN"></li>
      <li class="on"><a href="inventory.html">库存分析</a></li>
      <li><a href="user.html">用户分析</a></li>
    </ul>
  </div>
</div>
<div class="chartWarp inventoryWarp">

  <div class="pure-g int-row1"> 
    <!-- 存销量 -->
    <div class="pure-u-1-3">
      <!-- 设备容量 -->
      <div class="chartBlock h55">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">设备容量</h2>
          </div>
        </div>
        <div class="bd">
          <div id="mVolume" class="chartDiv"></div>
        </div>
      </div>
      <!-- 品类库存占比 -->
      <div class="chartBlock h45">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">品类库存占比</h2>
          </div>
        </div>
        <div class="bd">
          <div id="categoryStock" class="chartDiv"></div>
        </div>
      </div>
    </div>
    <div class="pure-u-1-3">
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">存销量</h2>
          </div>
        </div>
        <div class="bd">
          <div id="stockSales" class="chartDiv"></div>
        </div>
      </div>
    </div>
    <div class="pure-u-1-3"> 
      <!-- 商品存货周转天数 -->
      <div class="chartBlock h55">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">商品存货周转天数</h2>
          </div>
        </div>
        <div class="bd">
          <div id="turnaround" class="chartDiv"></div>
        </div>
      </div>
      <!-- 滞销商品 -->
      <div class="chartBlock h45">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">滞销商品</h2>
          </div>
        </div>
        <div class="bd">
          <div id="unsalable" class="chartDiv"></div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
<script language="javascript" type="text/javascript" src="js/echarts.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script language="javascript" type="text/javascript" src="js/charts.int.js"></script>
</html>

2.整体效果展示


1.用矩形树图来商品存货周转天数


1）实现代码
$.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
    }]
        })
});
2）代码分析
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',
                }
            }
        },

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

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


2.用柱状堆积设备容量

1.实现代码：
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.库存数量
		}
	]
		})
});
 2）代码分析
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.缺货数量,
        }
    ]
        })
});

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

3.存销量条形堆积

1）实现代码
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.库存数量
        }
    ]
		})
});
2）代码分析

同理与用柱状堆积设备容量
      

4.双y轴来实现滞销商品

1）实现代码
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.库存数量
        }
    ]
		})
});
2）代码分析

同理于4.柱状和折线图来实现销售金额变化趋势（双y轴）

5.用圆环饼图来实现品类库存占比

1）实现代码
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.二级商品
        }
    ]
		})
});
2）代码分析
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.二级商品
        }
    ]
        })
});

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

五.可视化展示用户分析

实现代码：

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

效果展示：

 可化展示用户分

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

1）实现代码
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'
                        }])
                    }
                }
            }
        ]
	});
});
2）代码分析：

同理.柱状和折线图来实现销售金额变化趋势，不过多分析

2.用雷达图来实现用户分群

1）代码实现
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
    }]
		})
});
2）代码分析：
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
    }]
		})
});

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

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

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

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

3.用词云图来实现用户画像

1）实现代码：
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);
});
2）代码分析：
            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,

这里设置了type类型为词云图

和大小区间为10到30

和词云词语位置居中

宽度和高度都是100%

right和bottom为空

            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;

异步数据和函数的引用即可使词云图实现显示

4.用条形图来实现用户消费时段

1）代码实现
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.用户人数
        }
    ]
		})
});
2）代码分析：

同理5.条形图来实现商品销售金额前5名不过多分析

5.用散点图来实现商品价格区间

1）代码实现：

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},
});
2）代码分析

同理.用散点图来分析商品价格区间

6.用柱状图来实现用户消费地点

1）代码实现
2）代码分析

同理6.柱状图来实现售货机销售情况。

7.用环形图来实现用户类型人数

1）代码实现
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)'
                }
            }
        }
    ]
		})
});
2）代码分析

同理与5.用圆环饼图来实现品类库存占比

IDEA设置JDK版本和修改Maven工程运行环境的方法
AlianBlank的博客
08-17 1476
通过按照上述步骤进行操作，你可以灵活地切换不同的JDK版本，并且能够确保Maven项目使用相应的Java版本。在使用IDEA进行大数据项目开发时，常常需要设置特定的JDK版本和修改Maven工程的运行环境。在IDEA的右侧工具栏中，点击"Maven Projects"面板，展开你的项目，右键点击项目名称，选择"Reimport"选项，等待Maven重新导入项目并刷新依赖。至此，你已成功修改了Maven工程的运行环境。在IDEA中打开你的Maven项目，找到项目根目录下的pom.xml文件，并双击打开。
Mac 环境配置jdk、Maven
weixin_42416791的博客
08-25 3320
3、终端打开配置jdk时候建好的脚本文件： open -e .bash_profile。4、查看maven是否安装成功和系统能不能识别maven/mvn命令：⬇️。输入⬇️并保存： 其中第一行JAVA_HOME替换为自己下的jdk路径。，安装编译好的二进制版本，具体安装zip还是tar.gz我看的。5、查看jdk是否安装成功和系统能不能识别java命令：⬇️。至此，我的Mac系统的环境配置jdk、Maven完成！然后就发现我的maven命令还是没作用，不识别，下载后直接安装即可，很快，点几下就OK了。
IDEA的配置JDK,Tomcat,Maven
lingmao555的博客
09-18 5401
IDEA的配置JDK,Tomcat,Maven，先下载安装jdk,其中JDK为安装版，tomcat，和maven为非安装版。JDK安装完成后要设置3个坏境变量，tomcat和maven好像不设置也行，就下载下来解压就行了。maven最好还是设置一下，有些用途在IDE中没法完成，必须要到命定行下面。本篇主要配置： 先配置JDK，我的安装在C:\Program Files\Java\jdk1.8.0
idea更换jdk版本
m0_74036731的博客
03-30 3687
idea更换jdk的版本
idea下jdk和maven配置
WooHuPoself#5029的博客
06-28 1114
1.jdk安装 jdk1.8官网下载：https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html 下载后直接双击运行，只点下一步就行， 过程中有两个地方让选择安装路径，默认c盘就好， （这么一丁点能对c盘有什么影响，少花心思躺平就好） 2.jdk配置 此电脑—>右键属性—>高级系统设置—>环境变量 在系统变量里修改这三个： 1新建JAVA_HOME 变量名：JAVA_HOME 变量值：C:\Pr
idea配置jdk与maven
keerpt的博客
10-23 528
1、配置maven 当前项目配置maven 为以后项目设置maven 设置界面如下： 2、配置java
如何配置开发环境（JDK、Maven、IDEA)
Wxlxunxuan的博客
10-23 5240
验证安装：打开命令提示符或终端窗口，并运行以下命令来验证JDK是否正确安装：（1）.java -version （2）.javac -version。1.下载Maven:从Apache Maven官方网站下载最新版本的Maven。(2).在Maven home directory中选择你安装的Maven路径。(4).在“环境变量”窗口中，找到“系统变量”部分，点击“新建”按钮。(1).打开“控制面板” -> “系统和安全” -> “系统”。(6).找到“系统变量”中的“Path”变量，点击“编辑”按钮。
IDEA 设置JDK、Maven
qq_23021275的博客
01-05 742
JDK File—Project Structure—SDK 点击+sdk Maven File——Setting——Build,Exception,Deployment——Build Tools——maven
Tomcat安装教程：含JDK配置与IDEA打包解析
总结来说，安装和配置Tomcat涉及的关键点包括：确保先安装JDK，选择合适的安装方式，正确配置环境变量，以及理解IDEA中的Maven项目打包选项。了解这些基本操作后，开发者便能顺利地在本地环境中运行和测试Java Web...
maven的安装配置与idea基于maven构建项目
qq_46079450的博客
05-25 528
文章目录前言一、认识Maven目录结构二、Maven安装三、Maven设置本地仓库配置中央仓库镜像四、IDEA 中 Maven 的配置五、搭建基于 Maven 构建的 JavaSE 项目pom.xml 文件添加依赖六、搭建基于 Maven 构建的 JavaWeb 项目总结 前言 提示：maven项目的构建 提示：以下是本篇文章正文内容，下面案例可供参考 一、认识Maven maven是一个跨平台的项目管理工具，主要用作基于 Java 平台的项目（Maven 本身也是 Java 编写的）的构建、依赖包管
Java开发必知：JDK安装、环境变量配置与IDE内置机制全解析
最新发布
工一木子
04-29 854
1. JDK一定要有！即使IDE帮你管理了，它背后一定要有一份真正的JDK安装。2. 命令行开发，需要配置环境变量。否则无法直接使用javacjava等基本命令。3. IDE内部可以单独管理JDK。所以在IDE中开发，即使不配置环境变量也可以运行，但建议仍养成配置JAVA_HOME的好习惯，避免未来遇到复杂场景（如Maven、Gradle构建）出错。4. 注意JDK版本兼容问题。比如Java 8项目，用Java 17的JDK可能出现编译错误；需要针对项目指定正确的JDK版本。
【Java项目构建流程全解析】：IntelliJ IDEA中的Maven配置与调试
[【Java项目构建流程全解析】：IntelliJ IDEA中的Maven配置与调试](https://i0.wp.com/digitalvarys.com/wp-content/uploads/2019/11/image-1.png?fit=1024%2C363&ssl=1) # 摘要 本文详细介绍了Java项目构建流程...
【开发工具】idea配置全局变量Jdk、maven仓库、maven（全文图解）
DreamSun的博客
03-16 6313
下图可以看到JDK已经在IDEA中配置好了。
IDEA中JDK的配置与Maven的配置详解
热门推荐
m0_53328194的博客
08-17 1万+
1.在项目结构中配置JDK的版本。 2.在设置-构建-构建工具-Maven中配置Maven。 3.在设置-构建-构建工具-Maven-Importing中配置Maven的自动导入与JDK的版本(注意：Import Maven projects automatically项勾上)。
IDEA配置jdk,maven与tomcat
qq_40022860的博客
05-13 587
@[TOC] 文章目录 所需要准备的软件及配置 JDK MySQL Maven idea tomcat 基础知识：环境变量配置：我的电脑-右键-“属性”-（左侧）高级系统设置-（弹窗右下角）环境变量配置-系统变量 所需要准备的软件及配置 软件准备 序号 软件名称 1 jdk 2 mysql 3 maven 4 idea 5 tomcat 1.jdk的安装与配置 官网地址：https...
2024年Java常见面试题目，java集合框架面试
2401_84413490的博客
04-20 744
1.1 传统应用架构的问题1.2 微服务架构是什么1.3 微服务架构有哪些特点和挑战1.4 如何搭建微服务架构2.1 Spring Boot 是什么2.2 如何使用Spring Boot框架2.3 Spring Boot生产级特性3.1 Node.js 是什么3.2 如何使用 Node.js3.3 使用Node.js搭建微服务网关4.1 ZooKeeper 是什么4.2 如何使用 ZooKeeper4.3 实现服务注册组件4.4 实现服务发现组件5.1 Docker 是什么5.2 如何使用 Docker5.
IDEA配置Maven、配置JDK
weixin_45636446的博客
08-16 480
IDEA安装lombok插件、配置Maven、配置JDK 1、IDEA配置JDK 2、IDEA配置Maven
IDEA全局设置JDK、Maven、编码格式
weixin_44341110的博客
06-14 6479
IDEA全局设置java开发相关配置
IDEA 安装破解以及 jdk和maven配置
Phoenix_smf的博客
08-10 760
IDEA下载: http://www.jetbrains.com/idea/download/#section=windows 如图选择企业版本的根据自己的系统选择64位还是32位 下载好后安装，破解码： 打开连接 http://idea.lanyus.com/ 复制注册码即可破解，然后配置一下Maven file&gt;右键setting&gt; 这里设置一下Sett...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值