目录
1.南丁格尔玫瑰图 (type: 'pie') 展示不同地点无人售货机的总销售金额
2.条形图 (type: 'bar')展示商品销售数量前10
3.气泡图 (type: 'scatter')展示商品价格区间
4. 折线图 (type:'line')展示销售金额实际值与预测值
1.仪表盘 (type: 'gauge')展示各特征及其环比增长率
2.簇状柱状-折线图(type:'bar','line’)展示销售金额变化趋势
一、简介
在无人售货机信息表数据的预处理与建模完成后,从无人售货机销售的整体情况、销售情况、库存情况和用户情况4个方向对预处理和建模后的数据进行可视化展现与分析。
- 首先,我们在js文件夹下,放入所需js文件,创建四个对应大屏的js文件
总数据:charts.total.js
销售分析:charts.sale.js
库存分析:charts.int.js
用户分析:charts.user.js
- 然后创建四个html文件,里面写入大屏壳子
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>
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>
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>
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>
- data文件夹中放入异步数据加载的数据
二、销售分析大屏可视化 charts.sale.js
1.南丁格尔玫瑰图 (type: 'pie') 展示不同地点无人售货机的总销售金额
以下以销售金额(元)为例,进行异步数据加载
var saleM_Site = echarts.init(document.getElementById('saleM_Site'));
$.get("data/不同区域的各指标数据.json").done(function (data) {
saleM_Site.setOption({
tooltip: {
trigger: 'item',
formatter: '{a}:{d}%'
},
grid: {
left: '0%',
top:'60',
right:'10%',
bottom: '10',
containLabel: true
},
legend: {
type:'scroll',
data:data.where,
},
series: [
{
name: '销售金额',
type: 'pie',
radius: [20, 40],
roseType: 'radius',
itemStyle: {
borderRadius: 5
},
label: {
// show: false 指向数据,默认为开启
formatter: '{c}' //指向数据
},
emphasis: {
label: {
show: true
}
},
data: data.sale
}],
})
});
//订单量
var orderQ_Site = echarts.init(document.getElementById('orderQ_Site'));
$.get("data/不同区域的各指标数据.json").done(function (data) {
orderQ_Site.setOption({
tooltip: {
trigger: 'item',
formatter: '{a}:{d}%'
},
legend: {
type:'scroll',
data:data.where,
},
grid: {
left: '0%',
top:'60',
right:'10%',
bottom: '10',
containLabel: true
},
series: [
{
name: '订单量',
type: 'pie',
radius: [20, 40],
roseType: 'radius',
itemStyle: {
borderRadius: 5
},
label: {
// show: false 指向数据,默认为开启
formatter: '{c}' //指向数据
},
emphasis: {
label: {
show: true
}
},
data: data.order
}],
})
});
//毛利润
var grossM_Site = echarts.init(document.getElementById('grossM_Site'));
$.get("data/不同区域的各指标数据.json").done(function (data) {
grossM_Site.setOption({
tooltip: {
trigger: 'item',
formatter: '{a}:{d}%'
},
legend: {
type:'scroll',
data:data.where,
},
grid: {
left: '0%',
top:'60',
right:'10%',
bottom: '10',
containLabel: true
},
series: [
{
name: '毛利润',
type: 'pie',
radius: [20, 40],
roseType: 'radius',
itemStyle: {
borderRadius: 5
},
label: {
// show: false 指向数据,默认为开启
formatter: '{c}' //指向数据
},
emphasis: {
label: {
show: true
}
},
data: data.gross
}],
})
});
//客单价
var unitP_Site = echarts.init(document.getElementById('unitP_Site'));
$.get("data/不同区域的各指标数据.json").done(function (data) {
unitP_Site.setOption({
tooltip: {
trigger: 'item',
formatter: '{a}:{d}%'
},
legend: {
type:'scroll',
data:data.where,
},
grid: {
left: '0%',
top:'60',
right:'10%',
bottom: '10',
containLabel: true
},
series: [
{
name: '售货机数量',
type: 'pie',
radius: [20, 40],
roseType: 'radius',
itemStyle: {
borderRadius: 5
},
label: {
// show: false 指向数据,默认为开启
formatter: '{c}' //指向数据
},
emphasis: {
label: {
show: true
}
},
data: data.unit
}],
})
});
window.onresize = function() {
turnaround.resize();
stockSales.resize();
unsalable.resize();
categoryStock.resize();
mVolume.resize();
}
2.条形图 (type: 'bar')展示商品销售数量前10
//商品销售数量前10名
var saleMtop10 = echarts.init(document.getElementById('saleMtop10'));
$.get("data/商品销售数量前10.json").done(function (data){
saleMtop10.setOption({
tooltip: {
trigger: 'axis',
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
},
yAxis: {
name: '商品名称',
data: data.商品名称
},
series: [
{
name: '销售数量',
type: 'bar',
data: data.销售数量
},
]
})
});
3.气泡图 (type: 'scatter')展示商品价格区间
//商品价格区间
var priceRange = echarts.init(document.getElementById('priceRange'));
$.get("data/商品销量数量和价格数据.json").done(function (data){
var series=[];
for (var i=0;i< data.data.length;i++) {
series.push({
name:data.data[i].name,
type: 'scatter',
symbolSize:data.data[i].value[1]*2.4,
data: [data.data[i].value]
});
}
priceRange.setOption({
legend: {
type:'scroll',
left: 10,
top: 20,
},
tooltip: {
confine:true,
enterable:true,
},
yAxis: [
{
scale:true,
},
],
xAxis: [
{
scale:true,
},
],
series:series
})
});
4. 折线图 (type:'line')展示销售金额实际值与预测值
//销售金额预测值与实际值
var saleAll = echarts.init(document.getElementById('saleAll'));
$.get("data/不同区域的各指标数据.json").done(function (data){
saleAll.setOption({
tooltip: {
trigger: 'axis'
},
legend: {
type:'scroll'
},
xAxis:{
type: 'category',
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:[1.2, 1.4, 1.3, 1.1, 1.2, 0.8, 1.2, 1.1, 1.4, 1.7, 1.3,1.2, 1.4, 1.5, 1.1, 1.2, 0.9, 1.2, 1.1, 1.4, 1.5, 1.3],
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:[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
areaStyle:{
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(47, 69, 84,.4)'
}, {
offset: 1,
color: 'transparent'
}])
}
}
},
]
})
})
三、总数据大屏可视化 charts.total.js
1.仪表盘 (type: 'gauge')展示各特征及其环比增长率
// 销售金额 & 订单量 & 毛利润 & 售货机数量 & 购买用户数
$.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.簇状柱状-折线图(type:'bar','line’)展示销售金额变化趋势
3.条形图(type: 'bar')展示商品销售金额前5名
//商品销售金额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.销售金额
}
]
})
});
4.簇状柱状图展示售货机销售情况
//售货机销售情况
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.毛利润
}
]
})
});
5.饼图展示用户支付方式占比
//支付方式占比
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();
};
四、库存分析大屏可视化 charts.int.js
1.簇状柱状图展示售货机商品数量
// 设备容量
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.缺货数量,
}
]
})
});
2.环形图展示品类库存占比
//品类库存占比
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.二级商品
}
]
})
});
3.堆积条形图展示商品存销量
// 存销量
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.簇状柱状-折线图展示商品的存货周转天数
// 商品存货周转天数
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
}]
})
});
5.矩形树图展示滞销商品
// 滞销商品
var unsalable = echarts.init(document.getElementById('unsalable'));
$.get("data/商品滞销数据.json").done(function (data) {
//data = JSON.parse(data),
unsalable.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
grid: {
left: '10',
right: '10',
bottom: '10',
containLabel: true
},
toolbox: {
show:false,
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
legend: {
data:data.name
},
barGap:'10%',
barCategoryGap:'25%',
xAxis: [
{
type: 'category',
data: data.商品名称,
axisPointer:{type:'shadow'},
splitLine:{lineStyle:{width:0}},
axisLabel:{rotate:30}
}
],
yAxis: [
{
type: 'value',
name: '',
min: 0,
max: 500,
interval: 100,
axisLabel: {
formatter: '{value}'
},
axisLine:{lineStyle:{width:0}},
},
{
type: 'value',
name: '',
min: 0,
max: 1,
interval: 0.2,
axisLabel: {
formatter: '{value} '
},
axisLine:{lineStyle:{width:0}},
}
],
series: [
{
name:'滞销金额',
type:'bar',
data:data.滞销金额
},
{
name:'存货周转率',
type:'line',
yAxisIndex: 1,
label:{
show:'true',
color:'#fff',
backgroundColor:'rgba(235,48,48,0.8)',
verticalAlign:'middle',
padding:[2,4,0,4],
borderRadius:4,
position:'inside'
},
data:data.存货周转率
},
{
name:'库存数量',
type:'bar',
data:data.库存数量
}
]
})
});
代码详见charts.int.js文件:
五、用户分析可视化展示 charts.user.js
1.折线图展示近7天用户人数新增和流失趋势
// 近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'
}])
}
}
}
]
});
});
2.环形图展示用户类型人数占比
//用户类型人数
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)'
}
}
}
]
})
});
3.簇状柱状图展示用户消费地点和消费时段
// 用户消费时段
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.用户人数,
}
]
})
});
4.雷达图展示用户分群
// 用户分群
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.气泡图展示商品价格区间
// 商品价格区间
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
});
});
6.字符云图展示用户画像
// 用户画像
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);
});