目录
我们可以将里面的数据替换成我们项目所需要的:来编写js 文件
2019年9月的售货机销售金额及其环比增长率的部分数据如表所示。
然后让我们将其里面实战所给的数据来进行替换,让我们来编写 JS文件,代码如下所示
然后让我们将其里面实战所给的数据来进行替换,让我们来编写 JS文件,代码如下所示
然后让我们将其里面实战所给的数据来进行替换,让我们来编写 JS文件,代码如下所示
然后让我们将其里面实战所给的数据来进行替换,让我们来编写 JS文件,代码如下所示
然后让我们将其里面实战所给的数据来进行替换,让我们来编写 JS文件,代码如下所示
然后让我们将其里面实战所给的数据来进行替换,让我们来编写 JS文件,代码如下所示
然后让我们将其里面实战所给的数据来进行替换,让我们来编写 JS文件,代码如下所示
然后让我们将其里面实战所给的数据来进行替换,让我们来编写 JS文件,代码如下所示
然后让我们将其里面实战所给的数据来进行替换,让我们来编写 JS文件,代码如下所示
然后让我们将其里面实战所给的数据来进行替换,让我们来编写 JS文件,代码如下所示
然后让我们将其里面实战所给的数据来进行替换,让我们来编写 JS文件,代码如下所示
然后让我们将其里面实战所给的数据来进行替换,让我们来编写 JS文件,代码如下所示
然后让我们将其里面实战所给的数据来进行替换,让我们来编写 JS文件,代码如下所示
然后让我们将其里面实战所给的数据来进行替换,让我们来编写 JS文件,代码如下所示
然后让我们将其里面实战所给的数据来进行替换,让我们来编写 JS文件,代码如下所示
然后让我们将其里面实战所给的数据来进行替换,让我们来编写 JS文件,代码如下所示
然后让我们将其里面实战所给的数据来进行替换,让我们来编写 JS文件,代码如下所示
然后让我们将其里面实战所给的数据来进行替换,让我们来编写 JS文件,代码如下所示
经过了一段学习Echarts,我们迎来了一个结课实训项目:无人售货机,话不多说,开肝。
本实战项目所需的软件为:vose code
实战构成:
了解无人售货机零售项目背景
可视化展示销售情况总分析
可视化展现销售分析
可视化展现库存分析
可视化展示用户分析
一:了解无人售货机零售项目背景
1.1:了解无人售货机零售项目背景
1.2:分析无人售货机现状
1.3 :了解无人售货机数据情况
1.4:可视化使用到的数据表如表所示。
可视化方向 | 数据表名称 |
整体情况分析 | 无人售货机各特征数据.josn 售货机销售金额及销售金额增长率数据.json 商品销售金额前5名.json 不同地点售货机销售数据json 不同支付方式用户人数json |
销售分析 | 不同区域的各指标数据.json 商品销售数量前10名.json 商品销量数量和价格数据.json 销售金额实际值与预测值.json |
库存分析 | 不同地点售货机库存数量和缺货数量.json 不同类型的商品库存数量.json 商品库存数量和销售数量.json 商品滞销数据.json 各类商品存货周转天数.json |
用户分析 | 用户消费地点数据.json 用户消费时段数据.json 近5天新增和流失用户数据.json 用户分群数据.json 不同类型用户的人数.json 用户购买的商品名称和商品数量数据.json |
二: 可视化展示销售情况总分析
项目预览图:
2.1:绘制仪表盘展示各特征及其环比增长率
销售金额(元) | 订单量(个) | 毛利润(元) | 售货机数量(个) | 购买用户数(人) |
651400 | 18000 | 186000 | 10857 | 21 |
325700 | 8777 | 93096 | 1059 | 10 |
218590 | 790 | 25505 | 354 | 6 |
由上图可知,我们需要将其销售金额环比增长率,订单量及其环比增长率,毛利率及其环比增长率,售货机数量及其环比增长率,购买用户数及其环比增长率绘制成仪表盘。
首先让我们来了解一下仪表盘的代码
首先是他的壳子代码如下所示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--引入ECharts脚本-->
<script src="js/echarts.js"></script>
</head>
<body>
<!---为ECharts准备一个具备大小(宽高)的DOM-->
<div id="main" style="width: 600px; height: 400px"></div>
<script type="text/javascript">
//基于准备好的DOM,初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
myChart.setOption(option);
</script>
</body>
</html>
然后让我们来看看<body>里面的内容吧
var option;
option = {
series: [
{
type: 'gauge',
startAngle: 180,
endAngle: 0,
min: 0,
max: 240,
splitNumber: 12,
itemStyle: {
color: '#58D9F9',
shadowColor: 'rgba(0,138,255,0.45)',
shadowBlur: 10,
shadowOffsetX: 2,
shadowOffsetY: 2
},
progress: {
show: true,
roundCap: true,
width: 18
},
pointer: {
icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
length: '75%',
width: 16,
offsetCenter: [0, '5%']
},
axisLine: {
roundCap: true,
lineStyle: {
width: 18
}
},
axisTick: {
splitNumber: 2,
lineStyle: {
width: 2,
color: '#999'
}
},
splitLine: {
length: 12,
lineStyle: {
width: 3,
color: '#999'
}
},
axisLabel: {
distance: 30,
color: '#999',
fontSize: 20
},
title: {
show: false
},
detail: {
backgroundColor: '#fff',
borderColor: '#999',
borderWidth: 2,
width: '60%',
lineHeight: 40,
height: 40,
borderRadius: 8,
offsetCenter: [0, '35%'],
valueAnimation: true,
formatter: function (value) {
return '{value|' + value.toFixed(0) + '}{unit|km/h}';
},
rich: {
value: {
fontSize: 50,
fontWeight: 'bolder',
color: '#777'
},
unit: {
fontSize: 20,
color: '#999',
padding: [0, 0, -20, 10]
}
}
},
data: [
{
value: 100
}
]
}
]
};
我们可以将里面的数据替换成我们项目所需要的:来编写js 文件
代码如下所示:
// 销售金额 & 订单量 & 毛利润 & 售货机数量 & 购买用户数
$.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.2绘制簇状柱状-折线图展示销售金额变化趋势
2019年9月的售货机销售金额及其环比增长率的部分数据如表所示。
日期 | 销售金额 | 销售金额环比增长率 |
2019-09-01 | 12837.00 | 0 |
2019-09-02 | 10000.00 | -0.2 |
2019-09-03 | 9326 | -0.1 |
2019-09-04 | 13882 | 0.49 |
2019-09-05 | 9150 | -0.29 |
2019-09-06 | 8800 | 0 |
2019-09-07 | 13500 | 0.2 |
2019-09-08 | 11000 | 0.35 |
2019-09-09 | 7200 | -0.36 |
2019-09-10 | 7800 | 0.33 |
2019-09-11 | 9000 | 0.35 |
2019-09-12 | 3850 | -0.2 |
2019-09-13 | 5450 | -0.35 |
让我们来看一下 簇状柱状-折线图<body>部分的标准代码吧
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
legend: {
data: ['Evaporation', 'Precipitation', 'Temperature']
},
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: 'Precipitation',
min: 0,
max: 250,
interval: 50,
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
name: 'Temperature',
min: 0,
max: 25,
interval: 5,
axisLabel: {
formatter: '{value} °C'
}
}
],
series: [
{
name: 'Evaporation',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value + ' ml';
}
},
data: [
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
]
},
{
name: 'Precipitation',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value + ' ml';
}
},
data: [
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
]
},
{
name: 'Temperature',
type: 'line',
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value + ' °C';
}
},
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
};
然后让我们将其里面实战所给的数据来进行替换,让我们来编写 JS文件,代码如下所示
//销售金额变化趋势
//初始化图表
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.3: 绘制条形图展示商品销售金额前5名
对商品的销售金额进行统计后,得到销售金额排名前5名的商品数据,如表所示。
商品名称 | 销售金额 |
井水豆腐香辣味 | 570 |
沙琪玛 | 437 |
香芋面包 | 228 |
卫龙大面筋 | 207 |
营养快线 | 199 |
让我们来看一下柱状图<body>部分的标准代码吧
option = {
title: {
text: 'World Population'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
},
series: [
{
name: '2011',
type: 'bar',
data: [18203, 23489, 29034, 104970, 131744, 630230]
},
{
name: '2012',
type: 'bar',
data: [19325, 23438, 31000, 121594, 134141, 681807]
}
]
};
然后让我们将其里面实战所给的数据来进行替换,让我们来编写 JS文件,代码如下所示
//商品销售金额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.销售金额
}
]
})
});
2.4: 绘制簇状柱状图展示售货机销售情况
对不同地点的售货机的销售金额、订单量和毛利润进行统计后,得到结果如表所示。
地点 | 销售金额(元) | 订单量(个) | 毛利润(元) |
教学楼 | 228 | 160 | 245 |
食堂 | 199 | 50 | 359 |
体育馆 | 207 | 100 | 50 |
田径场 | 437 | 180 | 100 |
操场 | 570 | 200 | 260 |
让我们来看一下柱状图<body>部分的标准代码吧
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}
]
};
然后让我们将其里面实战所给的数据来进行替换,让我们来编写 JS文件,代码如下所示
//售货机销售情况
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.毛利润
}
]
})
});
2.5: 绘制饼图展示用户支付方式占比
对用户支付方式进行统计后,得到结果如表所示。
支付方式 | 用户人数 |
支付宝 | 800 |
微信 | 760 |
现金 | 234 |
让我们来看一下饼图<body>部分的标准代码吧
option = {
title: {
text: 'Referer of a Website',
subtext: 'Fake Data',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
然后让我们将其里面实战所给的数据来进行替换,让我们来编写 JS文件,代码如下所示
//支付方式占比
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.6: 销售总情况大屏可视化
完整 charts.total.js代码展示:
// 销售金额 & 订单量 & 毛利润 & 售货机数量 & 购买用户数
$.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();
};
完整 total.HTML代码展示:
<!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 class="on"><a href="total.html">总数据</a></li>
<li><a href="sale.html">销售分析</a></li>
<li class="sysnameN"></li>
<li><a href="inventory.html">库存分析</a></li>
<li><a href="user.html">用户分析</a></li>
</ul>
</div>
</div>
<div class="chartWarp toalWarp">
<div class="pure-g toal-row1">
<!-- 销售金额(元)-->
<div class="pure-u-1-5">
<div class="chartBlock">
<div class="hd">
<div class="chartTit">
<h2 class="titContent">销售金额(元)</h2>
</div>
</div>
<div class="bd">
<div id="saleM" class="chartDiv"></div>
</div>
</div>
<div class="subBlock">
<div class="subCon">
<div class="subtxt">销售金额环比增长率</div>
<div class="subNum">-1.4%</div>
</div>
</div>
</div>
<!-- 订单量(个)-->
<div class="pure-u-1-5">
<div class="chartBlock">
<div class="hd">
<div class="chartTit">
<h2 class="titContent">订单量(个)</h2>
</div>
</div>
<div class="bd">
<div id="orderQ" class="chartDiv"></div>
</div>
</div>
<div class="subBlock">
<div class="subCon">
<div class="subtxt">订单量环比增长率</div>
<div class="subNum">11.1%</div>
</div>
</div>
</div>
<!-- 毛利(元)-->
<div class="pure-u-1-5">
<div class="chartBlock">
<div class="hd">
<div class="chartTit">
<h2 class="titContent">毛利润(元)</h2>
</div>
</div>
<div class="bd">
<div id="grossM" class="chartDiv"></div>
</div>
</div>
<div class="subBlock">
<div class="subCon">
<div class="subtxt">毛利润环比增长率</div>
<div class="subNum">3.6%</div>
</div>
</div>
</div>
<!-- 售货机数量(台)-->
<div class="pure-u-1-5">
<div class="chartBlock">
<div class="hd">
<div class="chartTit">
<h2 class="titContent">售货机数量(台)</h2>
</div>
</div>
<div class="bd">
<div id="discount" class="chartDiv"></div>
</div>
</div>
<div class="subBlock">
<div class="subCon">
<div class="subtxt">售货机数量环比增长率</div>
<div class="subNum">2.99%</div>
</div>
</div>
</div>
<!-- 购买用户数(人)-->
<div class="pure-u-1-5">
<div class="chartBlock">
<div class="hd">
<div class="chartTit">
<h2 class="titContent">购买用户数(人)</h2>
</div>
</div>
<div class="bd">
<div id="unitP" class="chartDiv"></div>
</div>
</div>
<div class="subBlock">
<div class="subCon">
<div class="subtxt">购买用户数环比增长率</div>
<div class="subNum">1.77%</div>
</div>
</div>
</div>
</div>
<div class="pure-g toal-row2">
<div class="pure-u-1-1">
<div class="chartBlock">
<div class="hd">
<div class="chartTit">
<h2 class="titContent">销售金额变化趋势</h2>
</div>
</div>
<div class="bd">
<div id="saleRate" class="chartDiv"></div>
</div>
</div>
</div>
</div>
<div class="pure-g toal-row3">
<div class="pure-u-1-3">
<div class="chartBlock">
<div class="hd">
<div class="chartTit">
<h2 class="titContent">商品销售金额前5名</h2>
</div>
</div>
<div class="bd">
<div id="saleMtop5" 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="saleOrder" 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="payWay" 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.total.js"></script>
</html>
三:可视化展现销售分析
代码展示
化
3.1:绘制南丁格尔玫瑰图
不同区域的各指标数据如表所示。
地点 | 销售金额(元) | 订单量(个) | 毛利润(元) | 客单价(元) |
教学楼 | 283122 | 9097 | 146805 | 12.07 |
食堂 | 253597 | 5597 | 104936 | 9.13 |
体育馆 | 299874 | 8608 | 157321 | 11.03 |
田径场 | 260256 | 7602 | 160256 | 14.8 |
操场 | 186585 | 4865 | 186585 | 12.6 |
由上图所知:1. 销售金额,2. 订单量,3. 毛利率,4. 客单价需要绘制南丁格尔图
Ø使用南丁格尔玫瑰图展示不同地点无人售货机的总销售金额,观察不同地点售货机的比例,如图所示,绘制下图的代码详见charts.sale.js文件。
让我们来看一下南丁格尔图<body>部分的标准代码吧
option = {
title: {
text: 'Nightingale Chart',
subtext: 'Fake Data',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
left: 'center',
top: 'bottom',
data: [
'rose1',
'rose2',
'rose3',
'rose4',
'rose5',
'rose6',
'rose7',
'rose8'
]
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
series: [
{
name: 'Radius Mode',
type: 'pie',
radius: [20, 140],
center: ['25%', '50%'],
roseType: 'radius',
itemStyle: {
borderRadius: 5
},
label: {
show: false
},
emphasis: {
label: {
show: true
}
},
data: [
{ value: 40, name: 'rose 1' },
{ value: 33, name: 'rose 2' },
{ value: 28, name: 'rose 3' },
{ value: 22, name: 'rose 4' },
{ value: 20, name: 'rose 5' },
{ value: 15, name: 'rose 6' },
{ value: 12, name: 'rose 7' },
{ value: 10, name: 'rose 8' }
]
},
{
name: 'Area Mode',
type: 'pie',
radius: [20, 140],
center: ['75%', '50%'],
roseType: 'area',
itemStyle: {
borderRadius: 5
},
data: [
{ value: 30, name: 'rose 1' },
{ value: 28, name: 'rose 2' },
{ value: 26, name: 'rose 3' },
{ value: 24, name: 'rose 4' },
{ value: 22, name: 'rose 5' },
{ value: 20, name: 'rose 6' },
{ value: 18, name: 'rose 7' },
{ value: 16, name: 'rose 8' }
]
}
]
};
然后让我们将其里面实战所给的数据来进行替换,让我们来编写 JS文件,代码如下所示
// 销售金额
var saleM_Site = echarts.init(document.getElementById('saleM_Site'));
$.get("data/不同区域的各指标数据.json").done(function (data) {
//data = JSON.parse(data),
saleM_Site.setOption({
tooltip : {
trigger: 'item',
formatter: "{b}:<br/>{c} 元<br/>({d}%)"
},
legend: {
type:'scroll',
data:data.where
},
toolbox: {
show : false,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel']
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'地点',
type:'pie',
radius : ["25%", '60%'],
center : ['50%', '57%'],
roseType : 'area',
label:{
show:true,
formatter:'{c}'
},
data:data.sale
},
{
type:'pie',radius:'25%',center:['50%','57%'],
label: {normal:{position:'center',color:'#fff'}},
labelLine:{normal:{show:false}},itemStyle:{color:'transparent'},
data:[{value:1,name:'地点',tooltip:{formatter:' ',backgroundColor:'none'}}]
},
]
})
});
// 订单量
var orderQ_Site = echarts.init(document.getElementById('orderQ_Site'));
$.get("data/不同区域的各指标数据.json").done(function (data) {
//data = JSON.parse(data),
orderQ_Site.setOption({
tooltip : {
trigger: 'item',
formatter: "{b}:<br/>{c} 个<br/>({d}%)"
},
legend: {
type:'scroll',
data:data.where
},
toolbox: {
show : false,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel']
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'地点',
type:'pie',
radius : ["25%", '60%'],
center : ['50%', '57%'],
roseType : 'area',
label:{
show:true,
formatter:'{c}'
},
data:data.order
},
{
type:'pie',radius:'25%',center:['50%','57%'],
label: {normal:{position:'center',color:'#fff'}},
labelLine:{normal:{show:false}},itemStyle:{color:'transparent'},
data:[{value:1,name:'地点',tooltip:{formatter:' ',backgroundColor:'none'}}]
},
]
})
});
// 毛利润
var grossM_Site = echarts.init(document.getElementById('grossM_Site'));
$.get("data/不同区域的各指标数据.json").done(function (data) {
//data = JSON.parse(data),
grossM_Site.setOption({
tooltip : {
trigger: 'item',
formatter: "{b}:<br/>{c} 元<br/>({d}%)"
},
legend: {
type:'scroll',
data:data.where
},
toolbox: {
show : false,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel']
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'地点',
type:'pie',
radius : ["25%", '60%'],
center : ['50%', '57%'],
roseType : 'area',
label:{
show:true,
formatter:'{c}'
},
data:data.gross
},
{
type:'pie',radius:'25%',center:['50%','57%'],
label: {normal:{position:'center',color:'#fff'}},
labelLine:{normal:{show:false}},itemStyle:{color:'transparent'},
data:[{value:1,name:'地点',tooltip:{formatter:' ',backgroundColor:'none'}}]
},
]
})
});
// 客单价平均值
var unitP_Site = echarts.init(document.getElementById('unitP_Site'));
$.get("data/不同区域的各指标数据.json").done(function (data) {
//data = JSON.parse(data),
unitP_Site.setOption({
tooltip : {
trigger: 'item',
formatter: "{b}:<br/>{c} 元<br/>({d}%)"
},
legend: {
type:'scroll',
data:data.where
},
toolbox: {
show : false,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel']
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'地点',
type:'pie',
radius : ["25%", '60%'],
center : ['50%', '57%'],
roseType : 'area',
label:{
show:true,
formatter:'{c}'
},
data:data.unit
},
{
type:'pie',radius:'25%',center:['50%','57%'],
label: {normal:{position:'center',color:'#fff'}},
labelLine:{normal:{show:false}},itemStyle:{color:'transparent'},
data:[{value:1,name:'地点',tooltip:{formatter:' ',backgroundColor:'none'}}]
},
]
})
});
3.2:绘制条形图展示商品销售数量前10名
对商品销售数量进行统计后,得到销售数量前10名的商品数据,如表所示。\
商品名称 | 销售数量(个) |
井水豆腐香辣味 | 9 |
沙琪玛 | 9 |
香芋面包 | 5 |
卫龙大面筋 | 6 |
营养快线 | 3 |
小鱼仔 | 10 |
王老吉 | 13 |
旺旺牛奶 | 13 |
安慕希 | 16 |
蒙牛纯牛奶 | 21 |
使用条形图对销售数量前10名的商品进行展示,如图所示,绘制下图的代码详见charts.sale.js文件。
让我们来看一下柱状图<body>部分的标准代码吧
option = {
title: {
text: 'World Population'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
},
series: [
{
name: '2011',
type: 'bar',
data: [18203, 23489, 29034, 104970, 131744, 630230]
},
{
name: '2012',
type: 'bar',
data: [19325, 23438, 31000, 121594, 134141, 681807]
}
]
};
然后让我们将其里面实战所给的数据来进行替换,让我们来编写 JS文件,代码如下所示
// 商品销售数量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.销售数量
}
]
})
});
3.3 绘制气泡图展示商品价格区间
商品销售数量和商品价格数据如表所示。
商品名称 | 销售数量(个) | 商品价格(元) |
安慕希 | 8 | 6.5 |
井水豆腐香辣味 | 13 | 1.8 |
蒙牛纯牛奶 | 13.5 | 3.5 |
沙琪玛 | 9 | 2.6 |
王老吉 | 14 | 3.8 |
小鱼仔 | 22 | 1.5 |
优酸乳 | 10.5 | 4.5 |
咖啡 | 18 | 5.5 |
可口可乐 | 16 | 4.8 |
让我们来看一下气泡图<body>部分的标准代码吧
const data = [
[
[28604, 77, 17096869, 'Australia', 1990],
[31163, 77.4, 27662440, 'Canada', 1990],
[1516, 68, 1154605773, 'China', 1990],
[13670, 74.7, 10582082, 'Cuba', 1990],
[28599, 75, 4986705, 'Finland', 1990],
[29476, 77.1, 56943299, 'France', 1990],
[31476, 75.4, 78958237, 'Germany', 1990],
[28666, 78.1, 254830, 'Iceland', 1990],
[1777, 57.7, 870601776, 'India', 1990],
[29550, 79.1, 122249285, 'Japan', 1990],
[2076, 67.9, 20194354, 'North Korea', 1990],
[12087, 72, 42972254, 'South Korea', 1990],
[24021, 75.4, 3397534, 'New Zealand', 1990],
[43296, 76.8, 4240375, 'Norway', 1990],
[10088, 70.8, 38195258, 'Poland', 1990],
[19349, 69.6, 147568552, 'Russia', 1990],
[10670, 67.3, 53994605, 'Turkey', 1990],
[26424, 75.7, 57110117, 'United Kingdom', 1990],
[37062, 75.4, 252847810, 'United States', 1990]
],
[
[44056, 81.8, 23968973, 'Australia', 2015],
[43294, 81.7, 35939927, 'Canada', 2015],
[13334, 76.9, 1376048943, 'China', 2015],
[21291, 78.5, 11389562, 'Cuba', 2015],
[38923, 80.8, 5503457, 'Finland', 2015],
[37599, 81.9, 64395345, 'France', 2015],
[44053, 81.1, 80688545, 'Germany', 2015],
[42182, 82.8, 329425, 'Iceland', 2015],
[5903, 66.8, 1311050527, 'India', 2015],
[36162, 83.5, 126573481, 'Japan', 2015],
[1390, 71.4, 25155317, 'North Korea', 2015],
[34644, 80.7, 50293439, 'South Korea', 2015],
[34186, 80.6, 4528526, 'New Zealand', 2015],
[64304, 81.6, 5210967, 'Norway', 2015],
[24787, 77.3, 38611794, 'Poland', 2015],
[23038, 73.13, 143456918, 'Russia', 2015],
[19360, 76.5, 78665830, 'Turkey', 2015],
[38225, 81.4, 64715810, 'United Kingdom', 2015],
[53354, 79.1, 321773631, 'United States', 2015]
]
];
option = {
backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [
{
offset: 0,
color: '#f7f8fa'
},
{
offset: 1,
color: '#cdd0d5'
}
]),
title: {
text: 'Life Expectancy and GDP by Country',
left: '5%',
top: '3%'
},
legend: {
right: '10%',
top: '3%',
data: ['1990', '2015']
},
grid: {
left: '8%',
top: '10%'
},
xAxis: {
splitLine: {
lineStyle: {
type: 'dashed'
}
}
},
yAxis: {
splitLine: {
lineStyle: {
type: 'dashed'
}
},
scale: true
},
series: [
{
name: '1990',
data: data[0],
type: 'scatter',
symbolSize: function (data) {
return Math.sqrt(data[2]) / 5e2;
},
emphasis: {
focus: 'series',
label: {
show: true,
formatter: function (param) {
return param.data[3];
},
position: 'top'
}
},
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(120, 36, 50, 0.5)',
shadowOffsetY: 5,
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
{
offset: 0,
color: 'rgb(251, 118, 123)'
},
{
offset: 1,
color: 'rgb(204, 46, 72)'
}
])
}
},
{
name: '2015',
data: data[1],
type: 'scatter',
symbolSize: function (data) {
return Math.sqrt(data[2]) / 5e2;
},
emphasis: {
focus: 'series',
label: {
show: true,
formatter: function (param) {
return param.data[3];
},
position: 'top'
}
},
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(25, 100, 150, 0.5)',
shadowOffsetY: 5,
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
{
offset: 0,
color: 'rgb(129, 227, 238)'
},
{
offset: 1,
color: 'rgb(25, 183, 207)'
}
])
}
}
]
};
然后让我们将其里面实战所给的数据来进行替换,让我们来编写 JS文件,代码如下所示
// 商品价格区间
var priceRange = echarts.init(document.getElementById('priceRange'));
$.get("data/商品销量数量和价格数据.json").done(function (data) {
//data = JSON.parse(data),
priceRange.setOption({
grid: {
left: '3%',
right: '10',
bottom: '10',
containLabel: true
},
tooltip : {
showDelay : 0,
formatter : function (params) {
return params.seriesName + '<br/>'
+ '单价:' + params.value[0] + '<br/>'
+ '销量:' + params.value[1];
},
axisPointer:{
show: true,
type : 'cross',
lineStyle: {
type : 'dashed',
width : 1
}
}
},
legend: {
type:'scroll',
},
xAxis :{ scale:true},
yAxis :{ scale:true},
})
});
$.get("data/商品销量数量和价格数据.json").done(function (data) {
//data = JSON.parse(data);
var series=[];
for(var i = 0;i < data.data.length;i++){
series.push({
name: data.data[i].name,
type: 'scatter',
data: [data.data[i].value],
symbolSize:data.data[i].value[1]*2
});
}
priceRange.setOption({
series:series
});
});
3.4 绘制折线图展示销售金额实际值与预测值
销售金额实际值与预测值部分数据如表所示。
日期 | 销售金额实际值(万元) | 销售金额预测值(万元) |
1日 | 1.2 | 1 |
2日 | 1.4 | 1 |
3日 | 1.3 | 1 |
4日 | 1.1 | 1 |
5日 | 1.2 | 1 |
6日 | 0.8 | 1 |
让我们来看一下堆积折线图<body>部分的标准代码吧
option = {
title: {
text: 'Stacked Area Chart'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Direct',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Search Engine',
type: 'line',
stack: 'Total',
label: {
show: true,
position: 'top'
},
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
然后让我们将其里面实战所给的数据来进行替换,让我们来编写 JS文件,代码如下所示
// 销售金额预测值与实际值
var saleAll = echarts.init(document.getElementById('saleAll'));
$.get("data/销售金额实际值与预测值.json").done(function (data) {
//data = JSON.parse(data),
saleAll.setOption({
tooltip: {
trigger: 'axis'
},
legend: {
type:'scroll'
},
grid: {
left: '10',
right: '20',
bottom: '10',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['1日','2日','3日','4日','5日','6日','7日','8日','9日','10日',
'11日','12日','13日','14日','15日','16日','17日','18日','19日','20日','21日','22日']
},
yAxis: {
type: 'value',
name: '金额(万元)',
axisLabel: {
formatter: '{value}'
}
},
series: [
{
name:'销售金额实际值',
type:'line',
data:data.T,
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(194, 53, 49,.8)'
}, {
offset: 1,
color: 'transparent'
}])
}
},
},
{
type:'line',
name:'销售金额预测值',
data:data.Y,
areaStyle:{
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(47, 69, 84,.4)'
}, {
offset: 1,
color: 'transparent'
}])
}
}
},
]
})
});
window.onresize = function() {
saleM_Site.resize();
orderQ_Site.resize();
grossM_Site.resize();
unitP_Site.resize();
saleMtop10.resize();
priceRange.resize();
saleAll.resize();
}
3.5 销售分析大屏可视化
完整charts.sale.js代码所示
// 销售金额
var saleM_Site = echarts.init(document.getElementById('saleM_Site'));
$.get("data/不同区域的各指标数据.json").done(function (data) {
//data = JSON.parse(data),
saleM_Site.setOption({
tooltip : {
trigger: 'item',
formatter: "{b}:<br/>{c} 元<br/>({d}%)"
},
legend: {
type:'scroll',
data:data.where
},
toolbox: {
show : false,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel']
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'地点',
type:'pie',
radius : ["25%", '60%'],
center : ['50%', '57%'],
roseType : 'area',
label:{
show:true,
formatter:'{c}'
},
data:data.sale
},
{
type:'pie',radius:'25%',center:['50%','57%'],
label: {normal:{position:'center',color:'#fff'}},
labelLine:{normal:{show:false}},itemStyle:{color:'transparent'},
data:[{value:1,name:'地点',tooltip:{formatter:' ',backgroundColor:'none'}}]
},
]
})
});
// 订单量
var orderQ_Site = echarts.init(document.getElementById('orderQ_Site'));
$.get("data/不同区域的各指标数据.json").done(function (data) {
//data = JSON.parse(data),
orderQ_Site.setOption({
tooltip : {
trigger: 'item',
formatter: "{b}:<br/>{c} 个<br/>({d}%)"
},
legend: {
type:'scroll',
data:data.where
},
toolbox: {
show : false,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel']
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'地点',
type:'pie',
radius : ["25%", '60%'],
center : ['50%', '57%'],
roseType : 'area',
label:{
show:true,
formatter:'{c}'
},
data:data.order
},
{
type:'pie',radius:'25%',center:['50%','57%'],
label: {normal:{position:'center',color:'#fff'}},
labelLine:{normal:{show:false}},itemStyle:{color:'transparent'},
data:[{value:1,name:'地点',tooltip:{formatter:' ',backgroundColor:'none'}}]
},
]
})
});
// 毛利润
var grossM_Site = echarts.init(document.getElementById('grossM_Site'));
$.get("data/不同区域的各指标数据.json").done(function (data) {
//data = JSON.parse(data),
grossM_Site.setOption({
tooltip : {
trigger: 'item',
formatter: "{b}:<br/>{c} 元<br/>({d}%)"
},
legend: {
type:'scroll',
data:data.where
},
toolbox: {
show : false,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel']
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'地点',
type:'pie',
radius : ["25%", '60%'],
center : ['50%', '57%'],
roseType : 'area',
label:{
show:true,
formatter:'{c}'
},
data:data.gross
},
{
type:'pie',radius:'25%',center:['50%','57%'],
label: {normal:{position:'center',color:'#fff'}},
labelLine:{normal:{show:false}},itemStyle:{color:'transparent'},
data:[{value:1,name:'地点',tooltip:{formatter:' ',backgroundColor:'none'}}]
},
]
})
});
// 客单价平均值
var unitP_Site = echarts.init(document.getElementById('unitP_Site'));
$.get("data/不同区域的各指标数据.json").done(function (data) {
//data = JSON.parse(data),
unitP_Site.setOption({
tooltip : {
trigger: 'item',
formatter: "{b}:<br/>{c} 元<br/>({d}%)"
},
legend: {
type:'scroll',
data:data.where
},
toolbox: {
show : false,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel']
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'地点',
type:'pie',
radius : ["25%", '60%'],
center : ['50%', '57%'],
roseType : 'area',
label:{
show:true,
formatter:'{c}'
},
data:data.unit
},
{
type:'pie',radius:'25%',center:['50%','57%'],
label: {normal:{position:'center',color:'#fff'}},
labelLine:{normal:{show:false}},itemStyle:{color:'transparent'},
data:[{value:1,name:'地点',tooltip:{formatter:' ',backgroundColor:'none'}}]
},
]
})
});
// 商品销售数量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();
}
sale.HTML代码所展现
<!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 class="on"><a href="sale.html">销售分析</a></li>
<li class="sysnameN"></li>
<li><a href="inventory.html">库存分析</a></li>
<li><a href="user.html">用户分析</a></li>
</ul>
</div>
</div>
<div class="chartWarp saleWarp">
<div class="pure-g sale-row1">
<div class="pure-u-1-4">
<div class="chartBlock">
<div class="hd">
<div class="chartTit">
<h2 class="titContent">销售金额(元)</h2>
</div>
</div>
<div class="bd">
<div id="saleM_Site" class="chartDiv"></div>
</div>
</div>
</div>
<div class="pure-u-1-4">
<div class="chartBlock">
<div class="hd">
<div class="chartTit">
<h2 class="titContent">订单量(个)</h2>
</div>
</div>
<div class="bd">
<div id="orderQ_Site" class="chartDiv"></div>
</div>
</div>
</div>
<div class="pure-u-1-4">
<div class="chartBlock">
<div class="hd">
<div class="chartTit">
<h2 class="titContent">毛利润(元)</h2>
</div>
</div>
<div class="bd">
<div id="grossM_Site" class="chartDiv"></div>
</div>
</div>
</div>
<div class="pure-u-1-4">
<div class="chartBlock">
<div class="hd">
<div class="chartTit">
<h2 class="titContent">客单价(元)</h2>
</div>
</div>
<div class="bd">
<div id="unitP_Site" class="chartDiv"></div>
</div>
</div>
</div>
</div>
<div class="pure-g sale-row2">
<div class="pure-u-1-4">
<div class="chartBlock">
<div class="hd">
<div class="chartTit">
<h2 class="titContent">销售金额预测值与实际值</h2>
</div>
</div>
<div class="bd">
<div id="saleAll" class="chartDiv"></div>
</div>
</div>
</div>
<div class="pure-u-1-2">
<div class="chartBlock">
<div class="hd">
<div class="chartTit">
<h2 class="titContent">商品价格区间</h2>
</div>
</div>
<div class="bd">
<div id="priceRange" class="chartDiv"></div>
</div>
</div>
</div>
<div class="pure-u-1-4">
<div class="chartBlock">
<div class="hd">
<div class="chartTit">
<h2 class="titContent">商品销售数量前10名</h2>
</div>
</div>
<div class="bd">
<div id="saleMtop10" 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.sale.js"></script>
</html>
四: 可视化展现库存分析
4.1:绘制簇状柱状图展示售货机商品数量
分别对不同地点的售货机的库存数量和缺货数量的比例进行统计后,得到的结果如表所示。
地点 | 库存数量 | 缺货数量 |
教学楼 | 195 | 80 |
食堂 | 150 | 170 |
体育馆 | 120 | 250 |
田径场 | 110 | 50 |
操场 | 212 | 100 |
标准柱状图代码同上
然后让我们将其里面实战所给的数据来进行替换,让我们来编写 JS文件,代码如下所示
// 设备容量
var mVolume = echarts.init(document.getElementById('mVolume'));
$.get("data/不同地点售货机库存数量和缺货数量.json").done(function (data) {
//data = JSON.parse(data),
mVolume.setOption({
tooltip: {
trigger: 'axis'
},
legend: {
data:data.类型,
type:'scroll',
},
barWidth:'35%',
barCategoryGap:'40%',
grid: {
left: '10',
right: '20',
bottom: '10',
containLabel: true
},
xAxis: {
type: 'category',
data: data.地点
},
yAxis: {
type: 'value',
},
series: [
{
name:'库存总量',
type:'bar',
stack: '总量',
label:{
position:'insideTop',
padding:[5,0,0,0]
},
data:data.库存数量,
},
{
type:'line',
name:'预警线',
connectNulls: 'true',
data:[150,150,150,150,150],
},
{
name:'缺货总量',
type:'bar',
stack: '总量',
label:{
position:'insideTop',
padding:[5,0,0,0]
},
itemStyle:{
color:'#ca841e'
},
data:data.缺货数量,
}
]
})
});
window.onresize = function() {
turnaround.resize();
stockSales.resize();
unsalable.resize();
categoryStock.resize();
mVolume.resize();
}
4.2:绘制环形图展示品类库存占比
对不同类型的商品库存数量进行统计后,得到的结果如表所示。
一级商品类型 | 二级商品类型 | 库存数量 | 库存数量(总) |
饮料类 | 碳酸饮料 | 510 | 1189 |
乳类 | 310 | ||
水 | 234 | ||
茶 | 135 | ||
非饮料类 | 辣类 | 335 | 1519 |
饼干类 | 251 | ||
糖果类 | 247 | ||
油炸类 | 252 | ||
坚果类 | 202 | ||
面包类 | 232 |
标准环形图代码所示:
option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
data: [
'Direct',
'Marketing',
'Search Engine',
'Email',
'Union Ads',
'Video Ads',
'Baidu',
'Google',
'Bing',
'Others'
]
},
series: [
{
name: 'Access From',
type: 'pie',
selectedMode: 'single',
radius: [0, '30%'],
label: {
position: 'inner',
fontSize: 14
},
labelLine: {
show: false
},
data: [
{ value: 1548, name: 'Search Engine' },
{ value: 775, name: 'Direct' },
{ value: 679, name: 'Marketing', selected: true }
]
},
{
name: 'Access From',
type: 'pie',
radius: ['45%', '60%'],
labelLine: {
length: 30
},
label: {
formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}:}{c} {per|{d}%} ',
backgroundColor: '#F6F8FC',
borderColor: '#8C8D8E',
borderWidth: 1,
borderRadius: 4,
rich: {
a: {
color: '#6E7079',
lineHeight: 22,
align: 'center'
},
hr: {
borderColor: '#8C8D8E',
width: '100%',
borderWidth: 1,
height: 0
},
b: {
color: '#4C5058',
fontSize: 14,
fontWeight: 'bold',
lineHeight: 33
},
per: {
color: '#fff',
backgroundColor: '#4C5058',
padding: [3, 4],
borderRadius: 4
}
}
},
data: [
{ value: 1048, name: 'Baidu' },
{ value: 335, name: 'Direct' },
{ value: 310, name: 'Email' },
{ value: 251, name: 'Google' },
{ value: 234, name: 'Union Ads' },
{ value: 147, name: 'Bing' },
{ value: 135, name: 'Video Ads' },
{ value: 102, name: 'Others' }
]
}
]
};
然后让我们将其里面实战所给的数据来进行替换,让我们来编写 JS文件,代码如下所示
//品类库存占比
var categoryStock = echarts.init(document.getElementById('categoryStock'));
$.get("data/不同类型的商品库存数量.json").done(function (data) {
//data = JSON.parse(data),
categoryStock.setOption({
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
data:data.类型,
left: 10,
top: 20,
},
series: [
{
name:'品类',
type:'pie',
radius: [0, '40%'],
center : ['55%', '53%'],
label: {
normal: {
position: 'inner'
}
},
labelLine: {
normal: {
show: false
}
},
data:data.一级商品
},
{
name:'品类',
type:'pie',
color:['LimeGreen', 'DarkGreen', 'red', 'blue', 'Purple',
'DarkOrchid', 'Navy', '#061e42', 'black', '#4f8fa8'],
radius: ['40%', '66%'],
center : ['55%', '53%'],
selectedMode: 'multiple',
itemStyle:{
borderWidth:'2',
borderColor:'none'
},
label: {
},
data:data.二级商品
}
]
})
});
4.3:绘制堆积条形图展示商品存销量
商品库存数量和销售数量数据如表所示。
商品名称 | 库存数量 | 销售数量 |
营养快线 | 120 | 144 |
香芋面包 | 85 | 148 |
沙琪玛 | 95 | 165 |
井水豆腐香辣味 | 98 | 167 |
小鱼仔 | 100 | 168 |
王老吉 | 105 | 170 |
旺旺牛奶 | 105 | 175 |
安慕希 | 110 | 180 |
蒙牛纯牛奶 | 110 | 190 |
卫龙大面筋 | 109 | 195 |
老坛酸菜面 | 68 | 205 |
QQ糖 | 52 | 215 |
酸枣糕 | 51 | 230 |
标准堆积条形图代码所示:
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
// Use axis to trigger tooltip
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
}
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
series: [
{
name: 'Direct',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [320, 302, 301, 334, 390, 330, 320]
},
{
name: 'Mail Ad',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Affiliate Ad',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ad',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [150, 212, 201, 154, 190, 330, 410]
},
{
name: 'Search Engine',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [820, 832, 901, 934, 1290, 1330, 1320]
}
]
};
然后让我们将其里面实战所给的数据来进行替换,让我们来编写 JS文件,代码如下所示
// 存销量
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.库存数量
}
]
})
});
4.4绘制簇状柱状-折线图展示滞销商品
根据商品的存货周转天数可以计算商品的存货周转率,现有商品滞销数据如表所示。
商品名称 | 滞销金额 | 库存数量 | 存货周转率 | 商品名称 |
沙琪玛 | 310 | 90 | 0.85 | 沙琪玛 |
卫龙大面筋 | 90 | 45 | 0.7 | 卫龙大面筋 |
香芋面包 | 80 | 42 | 0.6 | 香芋面包 |
营养快线 | 270 | 90 | 0.49 | 营养快线 |
小鱼仔 | 130 | 40 | 0.18 | 小鱼仔 |
旺旺牛奶 | 450 | 95 | 0.45 | 旺旺牛奶 |
安慕希 | 305 | 90 | 0.42 | 安慕希 |
蒙牛纯牛奶 | 90 | 88 | 0.38 | 蒙牛纯牛奶 |
然后让我们将其里面实战所给的数据来进行替换,让我们来编写 JS文件,代码如下所示
// 滞销商品
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.库存数量
}
]
})
});
4.5: 绘制矩形树图展示商品存货周转天数
现有各类商品存货周转天数数据如表所示。
商品名称 | 存货周转天数 |
沙琪玛 | 9 |
香芋面包 | 9 |
井水豆腐香辣味 | 9 |
卫龙大面筋 | 6 |
蒙牛纯牛奶 | 7 |
旺旺牛奶 | 3 |
安慕希 | 3 |
小鱼仔 | 2 |
营养快线 | 4 |
王老吉 | 7 |
标准矩形树图代码展现
option = {
series: [
{
type: 'treemap',
data: [
{
name: 'nodeA',
value: 10,
children: [
{
name: 'nodeAa',
value: 4
},
{
name: 'nodeAb',
value: 6
}
]
},
{
name: 'nodeB',
value: 20,
children: [
{
name: 'nodeBa',
value: 20,
children: [
{
name: 'nodeBa1',
value: 20
}
]
}
]
}
]
}
]
};
然后让我们将其里面实战所给的数据来进行替换,让我们来编写 JS文件,代码如下所示
// 商品存货周转天数
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
}]
})
});
4.6:库存分析大屏可视化
完整 charts.int.js代码展现
// 商品存货周转天数
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();
}
inventory.html展现
<!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>
五:可视化展示用户分析
5.1:绘制簇状柱状图展示用户消费地点和时间段
簇状柱状图适合分析对比组内各项数据。通过对不同区域和时间的用户消费人数进行可视化展示,分析用户偏好的消费地点和消费时段,用户消费地点如表所示。
消费地点 | 用户人数 |
教学楼 | 35 |
食堂 | 25 |
体育馆 | 9 |
田径场 | 21 |
操场 | 18 |
用户消费时段数据如表所示。
消费时段 | 用户人数 |
早上 | 3 |
上午 | 22 |
中午 | 24 |
下午 | 28 |
晚上 | 11 |
1. 用户消费地址
Ø对不同地点售货机的用户数量进行统计后,使用簇状柱状图对用户消费地点情况进行展示,如图所示,绘制右图的代码详见charts.user.js文件。
2. 用户消费时间段
Ø对不同消费时段的售货机用户数量进行统计后,使用簇状柱状图对用户消费时段情况进行展示,如图所示,绘制右图的代码详见charts.user.js文件。
然后让我们将其里面实战所给的数据来进行替换,让我们来编写 JS文件,代码如下所示
// 用户消费时段
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.用户人数,
}
]
})
});
5.2:绘制折线图展示近5天用户人数新增和流失趋势
计算用户最后一次购买行为距观察窗口结束的天数,天数大于n天,则为流失用户。现有近5天新增和流失用户数据如表所示。
日期 | 新增人数 | 流失人数 |
9月1日 | 5 | 3 |
9月2日 | 25 | 11 |
9月3日 | 20 | 13 |
9月4日 | 22 | 4 |
9月5日 | 12 | 8 |
然后让我们将其里面实战所给的数据来进行替换,让我们来编写 JS文件,代码如下所示
// 近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'
}])
}
}
}
]
});
});
5.3: 绘制雷达图展示用户分群
根据消费金额、购买数量、购买频率、交易次数和客单价对用户进行分群后,分群结果如表所示。
用户类型 | 消费金额 | 购买数量 | 购买频率 | 交易次数 | 客单价 |
忠诚用户 | 40 | 30 | 20 | 40 | 40 |
潜力用户 | 58 | 20 | 44 | 70 | 60 |
一般用户 | 70 | 40 | 40 | 60 | 50 |
流失用户 | 8 | 9 | 10 | 7 | 8 |
标准雷达图代码所示
option = {
title: {
text: 'Basic Radar Chart'
},
legend: {
data: ['Allocated Budget', 'Actual Spending']
},
radar: {
// shape: 'circle',
indicator: [
{ name: 'Sales', max: 6500 },
{ name: 'Administration', max: 16000 },
{ name: 'Information Technology', max: 30000 },
{ name: 'Customer Support', max: 38000 },
{ name: 'Development', max: 52000 },
{ name: 'Marketing', max: 25000 }
]
},
series: [
{
name: 'Budget vs spending',
type: 'radar',
data: [
{
value: [4200, 3000, 20000, 35000, 50000, 18000],
name: 'Allocated Budget'
},
{
value: [5000, 14000, 28000, 26000, 42000, 21000],
name: 'Actual Spending'
}
]
}
]
};
然后让我们将其里面实战所给的数据来进行替换,让我们来编写 JS文件,代码如下所示
// 用户分群
var userGroup = echarts.init(document.getElementById('userGroup'));
$.get("data/用户分群数据.json").done(function (data) {
//data = JSON.parse(data);
userGroup.setOption({
tooltip: {},
legend: {
},
radar: {
name: {
textStyle: {
color: '#fff',
borderRadius: 3,
padding: [3, 5]
}
},
center: ['50%', '58%'],
splitArea: {
areaStyle: {
color:'transparent'
}
},
axisLine: { lineStyle: {color: '#061e42' }},
splitLine: { lineStyle: {color: '#061e42' }},
indicator: [
{ name: '消费金额', max: 80,color:'black'},
{ name: '购买数量', max: 80,color:'black'},
{ name: '购买频率', max: 80,color:'black'},
{ name: '交易次数', max: 80,color:'black'},
{ name: '客单价', max: 80,color:'black' }
]
},
series: [{
name: '用户分群',
type: 'radar',
areaStyle:{
show:true,
opacity:0.3
},
data : data.data
}]
})
});
5.4:绘制环形图展示用户类型人数占比
对不同类型用户的人数进行统计后,结果如表所示。
用户类型 | 用户人数 |
忠诚用户 | 234 |
潜力用户 | 800 |
一般用户 | 800 |
流失用户 | 760 |
然后让我们将其里面实战所给的数据来进行替换,让我们来编写 JS文件,代码如下所示
//用户类型人数
var cSorNum = echarts.init(document.getElementById('cSorNum'));
$.get("data/不同类型用户的人数.json").done(function (data) {
//data = JSON.parse(data);
cSorNum.setOption({
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
show:false
},
grid: {
left: '0%',
right: '0%',
bottom: '0%',
containLabel: true
},
series : [
{
name: '用户类型人数',
type: 'pie',
radius: ['40%', '70%'],
center: ['50%', '50%'],
label:{
formatter:"{b}\n{a|{d}%}",
rich: {
a: {
padding:6,
align:'left',
color:'#fff'
}
}
},
data:data.data,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
})
});
5.5:绘制字符云图展示用户画像
现有用户购买的商品名称和商品数量数据如表所示。
商品名称 | 商品数量 |
安慕希 | 22199 |
井水豆腐香辣味 | 10288 |
蒙牛纯牛奶 | 620 |
沙琪玛 | 274470 |
王老吉 | 12311 |
小鱼仔 | 1206 |
优酸乳 | 4885 |
可口可乐 | 32294 |
咖啡 | 18574 |
旺仔牛奶 | 38929 |
豆腐干 | 969 |
燕麦饼干 | 37517 |
QQ糖 | 12053 |
方便面 | 57299 |
碎碎冰 | 15418 |
矿泉水 | 22905 |
怪味豆 | 5146 |
然后让我们将其里面实战所给的数据来进行替换,让我们来编写 JS文件,代码如下所示
// 用户画像
var chart = echarts.init(document.getElementById('userHot'));
$.get("data/用户购买的商品名称和商品数量数据.json").done(function (data) {
//data = JSON.parse(data);
var option = {
tooltip : {
trigger: 'item',
formatter:function(item){
return item.name + ":" + item.value.toFixed(2);
}
},
series: [ {
type: 'wordCloud',
sizeRange: [10,30],
rotationRange: [0, 0],
rotationStep: 180,
gridSize: 0,
autoSize: {enable:true, minSize:5},
shape: 'roundRect',
left: 'center',
top: 'center',
width: '100%',
height: '100%',
right: null,
bottom: null,
textStyle: {
normal: {
color: function () {
return 'rgb(' + [
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160)
].join(',') + ')';
}
},
emphasis: {
shadowBlur: 26,
color:'#333',
shadowColor: '#ccc',
fontSize:20
}
},
data: data.data.sort(function (a, b) {
return b.value - a.value;
})
} ]
};
chart.setOption(option);
});
5.6: 用户分析大屏可视化
完整 charts.user.js代码展现
// 近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();
};
user.HTML代码展现
<!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><a href="inventory.html">库存分析</a></li>
<li class="on"><a href="user.html">用户分析</a></li>
</ul>
</div>
</div>
<div class="chartWarp userWarp">
<div class="pure-g user-row1">
<div class="pure-u-7-24 col2">
<div class="chartBlock">
<div class="hd">
<div class="chartTit">
<h2 class="titContent">近5天用户人数新增和流失趋势</h2>
</div>
</div>
<div class="bd">
<div id="lossGrowth" class="chartDiv"></div>
</div>
</div>
<div class="chartBlock">
<div class="hd">
<div class="chartTit">
<h2 class="titContent">用户类型人数</h2>
</div>
</div>
<div class="bd">
<div id="cSorNum" class="chartDiv"></div>
</div>
</div>
</div>
<div class="pure-u-10-24">
<div class="chartBlock">
<div class="hd">
<div class="chartTit">
<h2 class="titContent">用户分群</h2>
</div>
</div>
<div class="bd">
<div id="userGroup" class="chartDiv"></div>
</div>
</div>
</div>
<div class="pure-u-7-24 col2">
<div class="chartBlock">
<div class="hd">
<div class="chartTit">
<h2 class="titContent">商品价格区间</h2>
</div>
</div>
<div class="bd">
<div id="pInterval" class="chartDiv"></div>
</div>
</div>
<div class="chartBlock">
<div class="hd">
<div class="chartTit">
<h2 class="titContent">用户消费地点</h2>
</div>
</div>
<div class="bd">
<div id="expLoc" class="chartDiv"></div>
</div>
</div>
</div>
</div>
<div class="pure-g user-row2">
<!--
<div class="pure-u-7-24">
<div class="chartBlock">
<div class="hd">
<div class="chartTit">
<h2 class="titContent">会员与非会员人数</h2>
</div>
</div>
<div class="bd">
<div id="vipC" class="chartDiv"></div>
</div>
</div>
</div>
-->
<div class="pure-u-12-24">
<div class="chartBlock">
<div class="hd">
<div class="chartTit">
<h2 class="titContent">用户消费时段</h2>
</div>
</div>
<div class="bd">
<div id="expTime" class="chartDiv"></div>
</div>
</div>
</div>
<div class="pure-u-12-24">
<div class="chartBlock">
<div class="hd">
<div class="chartTit">
<h2 class="titContent">用户画像</h2>
</div>
</div>
<div class="bd">
<div id="userHot" 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/echarts-wordcloud.min.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.user.js"></script>
<!-- <script language="javascript" type="text/javascript" src="js/lossgrowth.js"></script> -->
</html>
展现销售分析
可视化展示销售情况总分析
可视化展示销售情况总分析
可视化展现销售分析
可视化展现库存分析
可视化展示用户分析
可视化展示销售情况总分析