整体文件
1.框架——分析平台的界面布局
页面包括一个顶部的标题和菜单栏,以及几个不同的图表块,用于展示库存相关的数据分析结果
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 数据中的缺货数量
}
]
});
});
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 数据中的二级商品
}
]
});
});
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
}]
});
});
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.库存数量 // 数据
}
]
});
});
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'}}] // 数据
},
]
});
});
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
});
});