目录
整体文件
1.框架——分析平台的界面布局
页面包括一个顶部的标题和菜单栏，以及几个不同的图表块，用于展示库存相关的数据分析结果
以其中一个为例：
链接到一个名为"reset.css"的外部CSS文件,为后续的内容和样式提供了基础
<head>
<meta charset="utf-8">
<title>售货机大数据分析平台</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
</head>
页面包括了一个标题栏（.header）、一个导航栏（.menu）和一个图表区域（.chartWarp.inventoryWarp）
标题栏（.header）：包含了平台的名称（“售货机大数据分析平台”）。
导航栏（.menu）：包含了五个链接，分别指向总数据、销售分析、库存分析、用户分析页面。其中“库存分析”链接处于选中状态（.on）。
图表区域（.chartWarp.inventoryWarp）：包含了几个图表块，用于展示库存分析结果，包括：
- 设备容量（
.chartBlock.h55）- 品类库存占比（
.chartBlock.h45） - 存销量（
.chartBlock） - 商品存货周转天数（
.chartBlock.h55） - 滞销商品（
.chartBlock.h45）
- 品类库存占比（
<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>echarts.js：一个用于创建交互式可视化图表库
jquery-3.3.1.js：一个用于处理异步数据同步
charts.int.js：一个包含特定于库存分析页面的图表创建和操作逻辑的自定义JavaScript文件
<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>2.各个——图表区域分析与应用场景
2.1堆叠条形图和折线图组合图像
var mVolume = echarts.init(document.getElementById('mVolume'));
作用：初始化一个 ECharts 实例并将其附加到具有 ID 为“mVolume”的 DOM 元素上。这将创建一个用于创建和操作图表的可视化容器
$.get("data/不同地点售货机库存数量和缺货数量.json").done(function (data) {
作用：使用 jQuery 发起异步请求以获取包含售货机库存数量和缺货数量数据的 JSON 文件
对应——inventory.html文件
<!-- 设备容量 -->
<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>对应——charts.int.js
// 设备容量
var mVolume = echarts.init(document.getElementById('mVolume')); // 初始化 ECharts 实例
$.get("data/不同地点售货机库存数量和缺货数量.json").done(function (data) { // 获取 JSON 数据
//data = JSON.parse(data), // 解析 JSON 数据（此行已注释掉，因为 jQuery 会自动解析 JSON 响应）
mVolume.setOption({ // 配置 ECharts 实例
tooltip: { // 设置提示框
trigger: 'axis' // 提示框由坐标轴触发
},
legend: { // 设置图例
data: data.类型, // 图例数据为 JSON 数据中的类型
type: 'scroll', // 图例可滚动
},
barWidth: '35%', // 柱状图宽度
barCategoryGap: '40%', // 柱状图分类间隙
grid: { // 设置绘图区域
left: '10', // 距左 10px
right: '20', // 距右 20px
bottom: '10', // 距下 10px
containLabel: true // 包含标签
},
xAxis: { // 设置 X 轴
type: 'category', // 分类轴
data: data.地点 // X 轴数据为 JSON 数据中的地点
},
yAxis: { // 设置 Y 轴
type: 'value' // 值轴
},
series: [ // 设置系列
{ // 第一个系列（库存总量）
name: '库存总量', // 系列名称
type: 'bar', // 柱状图类型
stack: '总量', // 堆叠组：总量
label: { // 设置标签
position: 'insideTop', // 标签位置：柱状图内部顶部
padding: [5, 0, 0, 0] // 标签内边距
},
data: data.库存数量 // 柱状图数据为 JSON 数据中的库存数量
},
{ // 第二个系列（预警线）
type: 'line', // 折线图类型
name: '预警线', // 系列名称
connectNulls: 'true', // 连接空值
data: [150, 150, 150, 150, 150] // 折线图数据：固定值 150
},
{ // 第三个系列（缺货总量）
name: '缺货总量', // 系列名称
type: 'bar', // 柱状图类型
stack: '总量', // 堆叠组：总量
label: { // 设置标签
position: 'insideTop', // 标签位置：柱状图内部顶部
padding: [5, 0, 0, 0] // 标签内边距
},
itemStyle: { // 设置数据项样式
color: '#ca841e' // 数据项颜色：橙色
},
data: data.缺货数量 // 柱状图数据为 JSON 数据中的缺货数量
}
]
});
});
详情见：ECharts实训
堆叠条形图和折线图组合图像应用场景：
1.比较不同类别的数据：堆叠条形图可以显示不同类别数据的总和，而折线图可以显示单个类别数据的趋势。这使得可以轻松比较不同类别的绩效或增长率
2.显示数据与目标的比较：折线图可以绘制一条水平线或区域，表示目标或阈值。这使得可以轻松查看数据是否达到或超过目标
3.突出显示异常值或趋势：折线图可以清楚地显示数据中的趋势和异常值。这使得可以快速识别需要进一步调查或采取行动的领域
4.监控关键指标：堆叠条形图和折线图组合图像可用于监控关键指标，例如销售额、客户数量或网站流量。这有助于快速识别趋势和模式，以便及时采取纠正措施
5.展示复合数据：堆叠条形图可以显示复合数据，其中每个条形图代表多个数据点。折线图可以叠加在条形图上，以显示这些数据点的总和或平均值
2.2双层饼图
// 品类库存占比
var categoryStock = echarts.init(document.getElementById('categoryStock')); // 初始化 ECharts 实例
$.get("data/不同类型的商品库存数量.json").done(function (data) { // 获取 JSON 数据
//data = JSON.parse(data), // 解析 JSON 数据（此行已注释掉，因为 jQuery 会自动解析 JSON 响应）
categoryStock.setOption({ // 配置 ECharts 实例
tooltip: { // 设置提示框
trigger: 'item', // 提示框由数据项触发
formatter: "{a} <br/>{b}: {c} ({d}%)" // 提示框内容格式化函数
},
legend: { // 设置图例
orient: 'vertical', // 图例垂直排列
data: data.类型, // 图例数据为 JSON 数据中的类型
left: 10, // 图例距左 10px
top: 20, // 图例距上 20px
},
series: [ // 设置系列
{ // 第一个饼图（内部饼图）
name: '品类', // 系列名称
type: 'pie', // 饼图类型
radius: [0, '40%'], // 饼图半径范围
center: ['55%', '53%'], // 饼图中心点
label: { // 设置标签
normal: { // 标签的常规状态
position: 'inner' // 标签位置：内部
}
},
labelLine: { // 设置标签线
normal: { // 标签线的常规状态
show: false // 标签线不显示
}
},
data: data.一级商品 // 饼图数据为 JSON 数据中的一级商品
},
{ // 第二个饼图（外部饼图）
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.二级商品 // 饼图数据为 JSON 数据中的二级商品
}
]
});
});
双层饼图应用场景：
1.市场份额分析：双层饼图可用于展示不同产品或品牌在市场中的份额分布。外层饼图表示整体市场，内层饼图表示特定市场细分中的产品或品牌份额。
2.人口结构分析：在人口统计学中，双层饼图可以用来显示不同年龄段和性别的人口比例。外层表示总人口，内层表示特定年龄段或性别的比例。
3.销售渠道分析：双层饼图可以用于展示产品销售的渠道分布情况。外层饼图表示总销售量，内层饼图表示不同销售渠道的销售比例。
4.投资组合分析：在金融领域，双层饼图可以用来显示投资组合中不同资产类别的分布情况。外层表示总投资组合价值，内层表示各个资产类别的比例。
5.资源分配分析：在项目管理中，双层饼图可用于显示项目资源的分配情况。外层表示总资源量，内层表示不同资源类型的分配比例。
2.3 树图（Treemap）
// 导入 ECharts 的格式化工具
var formatUtil = echarts.format;
// 初始化商品存货周转天数的 ECharts 实例，并将其绑定到 HTML 中的一个元素上
var turnaround = echarts.init(document.getElementById('turnaround'));
// 从 JSON 文件中获取各类商品存货周转天数的数据
$.get("data/各类商品存货周转天数.json").done(function (data) {
// 设置图表的配置项和数据
turnaround.setOption({
// 设置提示框的格式
tooltip: {
formatter: '{b}：{c}'
},
// 设置系列（Treemap 图表）
series: [{
// 图表类型为 Treemap
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
}]
});
});
树图（Treemap）通常用于展示层次结构数据，并通过矩形面积的大小来表示数据的相对比例
树图（Treemap）应用场景：
1.存货管理：在商业领域中，树图可用于展示不同类别或类型的存货的数量、价值或其他指标。通过树图，管理者可以直观地了解存货的分布情况，从而进行合理的库存管理和优化。
2.金融市场分析：树图可用于展示金融市场中不同行业、板块或资产类别的市场份额或资金分布情况。投资者可以通过树图快速识别市场上的主要参与者和资产配置情况，从而指导其投资决策。
3.组织架构展示：树图可用于展示企业或组织的组织架构和层级关系。通过树图，员工可以清晰地了解组织内部的部门、岗位和人员分布情况，从而促进沟通和协作。
4.站访问分析：树图可用于展示网站的页面结构和访问流量。通过树图，网站管理员可以了解各个页面的访问情况和用户流量分布，从而优化网站结构和改进用户体验。
2.4柱状图和折线图的混搭图表
// 初始化 ECharts 实例，用于展示滞销商品数据的图表
var unsalable = echarts.init(document.getElementById('unsalable'));
// 从 JSON 文件中获取商品滞销数据
$.get("data/商品滞销数据.json").done(function (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%',
// 设置 X 轴
xAxis: [{
type: 'category',
data: data.商品名称, // X 轴数据
// 设置坐标轴指示器类型
axisPointer: { type: 'shadow' },
// 设置分割线样式
splitLine: { lineStyle: { width: 0 } },
// 设置坐标轴标签旋转角度
axisLabel: { rotate: 30 }
}],
// 设置 Y 轴
yAxis: [{
type: 'value',
name: '', // Y 轴名称
min: 0, // 最小值
max: 500, // 最大值
interval: 100, // 刻度间隔
axisLabel: {
formatter: '{value}' // 刻度标签格式
},
axisLine: { lineStyle: { width: 0 } }, // 坐标轴线样式
},
{
type: 'value',
name: '', // Y 轴名称
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, // 使用右侧 Y 轴
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.库存数量 // 数据
}
]
});
});
柱状图和折线图的混搭图表可以在许多场景中提供更全面的数据分析和可视化效果
柱状图和折线图的混搭图表应用场景：
1.销售数据分析：柱状图可以展示每个时间段或区域的销售额，而折线图可以展示同期利润的变化趋势。这样的混搭图表可以帮助企业管理者更好地了解销售情况和利润状况之间的关系。
2.生产效率监控：柱状图可以显示每个工作班组或工序的产量，而折线图则可以展示相同时间段内的生产效率变化。通过这样的混搭图表，生产管理者可以及时发现生产瓶颈并进行调整。
3.市场份额比较：柱状图可以展示不同品牌或产品在市场上的份额，而折线图可以展示同期市场份额的变化趋势。这样的混搭图表有助于企业了解自身在市场上的竞争地位及其变化情况。
4.用户行为分析：柱状图可以展示每个用户行为的数量或频率，例如点击次数或购买量，而折线图可以展示这些行为随时间的变化趋势。通过混搭图表，企业可以更好地了解用户行为的发展趋势。
5.资源利用率监测：柱状图可以显示各种资源的利用率，如人力资源或设备利用率，而折线图可以展示这些利用率随时间的变化情况。这样的混搭图表可以帮助企业管理者及时调整资源配置，提高资源利用效率。
无论是哪个领域，柱状图和折线图的混搭图表都可以提供更全面、更直观的数据展示，帮助用户更好地理解数据背后的信息和趋势。
2.5南丁格尔图，也称为玫瑰图
// 初始化 ECharts 实例，用于展示销售金额数据的饼图
var saleM_Site = echarts.init(document.getElementById('saleM_Site'));
// 从 JSON 文件中获取不同区域的各指标数据
$.get("data/不同区域的各指标数据.json").done(function (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'}}] // 数据
},
]
});
});
南丁格尔图，又称为玫瑰图（Rose Chart），是一种用来可视化数据分布的图表类型，特点是以半径和角度的方式呈现数据，通常用来展示周期性或频率分布的数据。
南丁格尔图应用场景：
1.气候数据分析：南丁格尔图可用于展示气候数据的季节性或年度变化。通过将一年中每个月的平均温度或降水量表示为不同的扇形，可以直观地比较不同月份的气候情况。
2.经济指标展示：在经济学领域，南丁格尔图可以用来展示经济指标的季节性波动或周期性变化。例如，展示每个季度或每年的国内生产总值（GDP）增长率，以及不同产业的贡献比例。
3.市场份额比较：南丁格尔图适合用于比较不同产品或品牌的市场份额，特别是在周期性市场调查中。通过将不同产品或品牌的销售额或市场份额表示为不同扇形，可以清晰地看出它们在市场中的相对位置。
4.人口结构分析：类似于双层饼图，南丁格尔图也可用于展示人口结构的分布情况，例如不同年龄段或性别的比例。每个扇形代表一个年龄段或性别群体，其大小和角度表示其在整体人口中的比例。
2.6气泡图
// 初始化 ECharts 实例，用于展示商品价格区间数据的散点图
var priceRange = echarts.init(document.getElementById('priceRange'));
// 设置图表的基本配置项
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', // 图例类型为滚动
},
// X 轴配置
xAxis :{
scale:true // X 轴刻度自适应
},
// Y 轴配置
yAxis :{
scale:true // Y 轴刻度自适应
}
});
// 从 JSON 文件中获取商品销量数量和价格数据
$.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', // 系列类型为散点图
data: [data.data[i].value], // 系列数据
symbolSize:data.data[i].value[1]*2 // 散点大小
});
}
// 设置散点图的系列数据
priceRange.setOption({
series:series
});
});
气泡图适用于展示变量之间的关联性、异常检测、趋势分析、分类聚类以及空间分布等场景，是一种简单而有效的数据可视化工具。
散点图应用场景：
1. 关联性分析：气泡图可以用来展示两个变量之间的关联性，例如销售额和广告投入之间的关系，或者学习时间和考试成绩之间的关系。通过观察散点图的分布情况，可以直观地判断出变量之间的相关性。
2. 异常检测：气泡图可以帮助用户发现数据中的异常值或离群点。通过观察散点图中是否存在偏离主体分布的点，可以及时发现数据中的异常情况，并进行进一步的分析和处理。
3. 趋势分析：气泡图可以展示数据的趋势和分布情况，例如随着时间推移，某个指标的变化趋势如何。通过观察散点图中点的分布情况，可以推断出数据的整体趋势，进而做出相应的决策。
4. 空间分布：对于地理数据或空间数据，气泡图可以展示不同地点或区域之间的分布情况。例如，城市人口密度的分布情况或者地震发生的位置分布等，都可以通过散点图来展示。
3.效果展示
1.总数据
2.销售分析
3.库存分析
4.用户分析
1085
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
