/*大屏*/
(function () {
var chart1 = echarts.init(document.getElementById('bchart1'));
var chart2 = echarts.init(document.getElementById('bchart2'));
var chart3 = echarts.init(document.getElementById('bchart3'));
var chart4 = echarts.init(document.getElementById('bchart4'));
var chart5 = echarts.init(document.getElementById('bchart5'));
var option = [{
//故障代码
title: {
textStyle: {
color: '#2b8fff',
fontSize: 14,
fontWeight: 'bold'
}
},
tooltip: {},
legend: {
show: false
},
xAxis: {
data: ["74", "729", "1308", "1405", "247", "613", "87"],
axisLabel: {
// X 轴标签
rotate: 40,
fontSize: 10
},
// 坐标轴线相关设置设置
axisLine: {
show: true,
lineStyle: {
color: '#1eb0dc'
}
},
axisTick: {
show: false
}
},
yAxis: {
show:false,
type: 'value',
axisLine: {
show: false,
lineStyle: {
color: '#1eb0dc'
}
},
axisTick: {
show: false
}
},
grid: {
left: '2%',
right: '2%',
bottom: '2%',
top: '10%',
containLabel: true
},
series: [{
name: '浅蓝',
type: 'bar',
data: [30, 50, 70, 30, 40, 50, 60],
itemStyle: {
color: '#19ffe9'
},
barWidth: 15,
label: {
show: true,
position: 'top',
fontSize: 10,
color: '#19ffe9'
}
},
{
name: '折线',
type: 'line',
smooth: true,
data: [30, 50, 70, 30, 40, 50, 60],
itemStyle: {
color: '#19ffe9'
},
}
],
textStyle: {
color: "#1eb0dc"
}
},
//酒机停机趋势
{
title: {
textStyle: {
color: '#2b8fff',
fontSize: 14,
fontWeight: 'bold'
}
},
tooltip: {},
legend: {
show: false
},
xAxis: {
data: ["3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"],
axisLabel: {
// X 轴标签
// rotate: 30,
fontSize: 10
},
// 坐标轴线相关设置设置
axisLine: {
show: true,
lineStyle: {
color: '#1eb0dc'
}
},
axisTick: {
show: false
}
},
yAxis: {
show:false,
type: 'value',
axisLine: {
show: false,
lineStyle: {
color: '#1eb0dc'
}
},
axisTick: {
show: false
}
},
grid: {
left: '2%',
right: '2%',
bottom: '2%',
top: '24%',
containLabel: true
},
series: [{
name: '浅蓝',
type: 'bar',
data: [30, 50, 70, 30, 40, 50, 60, 30, 50, 70, 30, 40, 50, 60, 30, 10, 60],
itemStyle: {
color: '#19ffe9'
},
barWidth: 10,
label: {
show: true,
position: 'top',
fontSize: 10,
color: '#19ffe9'
}
},
{
name: '折线',
type: 'line',
smooth: true,
data: [30, 50, 70, 30, 40, 50, 60, 30, 50, 70, 30, 40, 50, 60, 30, 10, 60],
itemStyle: {
color: '#19ffe9'
},
}
],
textStyle: {
color: "#1eb0dc"
}
},
//当班TOP状态
{
title: {
textStyle: {
color: '#2b8fff',
fontSize: 14,
fontWeight: 'bold'
}
},
tooltip: {},
legend: {
show: false
},
xAxis: {
data: ["137", "120", "83", "75", "73", "45", "129", "87", "56", "11", "128", "48", "48", "28", "65"],
axisLabel: {
// X 轴标签
// rotate: 30,
fontSize: 10
},
// 坐标轴线相关设置设置
axisLine: {
show: false,
lineStyle: {
color: '#1eb0dc'
}
},
axisTick: {
show: false
}
},
yAxis: {
type: 'value',
axisLine: {
show: false,
lineStyle: {
color: '#1eb0dc'
}
},
axisTick: {
show: false
}
},
grid: {
left: '2%',
right: '2%',
bottom: '2%',
top: '20%',
containLabel: true
},
series: [{
name: '浅蓝',
type: 'bar',
data: [30, 50, 70, 30, 40, 50, 60, 30, 50, 70, 30, 40, 50, 60, 30],
itemStyle: {
color: '#19ffe9'
},
barWidth: 10,
label: {
show: true,
position: 'top',
fontSize: 10,
color: '#19ffe9'
}
}
],
textStyle: {
color: "#1eb0dc"
}
},
//当班液位状态
{
title: {
textStyle: {
color: '#2b8fff',
fontSize: 14,
fontWeight: 'bold'
}
},
tooltip: {},
legend: {
show: false
},
xAxis: {
data: ["3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19","20","21","22","23","24","25"],
axisLabel: {
// X 轴标签
// rotate: 30,
fontSize: 10
},
// 坐标轴线相关设置设置
axisLine: {
show: false,
lineStyle: {
color: '#1eb0dc'
}
},
axisTick: {
show: false
}
},
yAxis: {
type: 'value',
axisLine: {
show: false,
lineStyle: {
color: '#1eb0dc'
}
},
axisTick: {
show: false
}
},
grid: {
left: '2%',
right: '2%',
bottom: '2%',
top: '20%',
containLabel: true
},
series: [{
name: '浅蓝',
type: 'bar',
data: [550, 605, 556, 570, 584, 556, 587,594, 578, 571, 560, 569, 574, 566, 577,550, 605, 556, 570, 584, 556, 587,594, 578, 571],
itemStyle: {
color: '#19ffe9'
},
barWidth: 10,
label: {
show: true,
position: 'top',
fontSize: 10,
color: '#19ffe9'
}
}
],
textStyle: {
color: "#1eb0dc"
}
},
//酒机费用趋势
{
title: {
textStyle: {
color: '#2b8fff',
fontSize: 14,
fontWeight: 'bold'
}
},
tooltip: {},
legend: {
show: false
},
xAxis: {
data: ["18", "20", "24", "30", "35", "25", "38", "40", "42", "44", "43", "45", "47", "49", "50"],
axisLabel: {
// X 轴标签
// rotate: 30,
fontSize: 10
},
// 坐标轴线相关设置设置
axisLine: {
show:true,
lineStyle: {
color: '#1eb0dc'
}
},
axisTick: {
show: false
}
},
yAxis: {
show:false,
type: 'value',
axisLine: {
show: false,
lineStyle: {
color: '#1eb0dc'
}
},
axisTick: {
show: false
}
},
grid: {
left: '2%',
right: '2%',
bottom: '2%',
top: '29%',
containLabel: true
},
series: [{
name: '浅蓝',
type: 'bar',
data: [0, 30, 20, 15, 30, 10, 20, 30, 28, 20, 22, 27, 16, 18, 0],
itemStyle: {
color: '#19ffe9'
},
barWidth: 10,
label: {
show: true,
position: 'top',
fontSize: 10,
color: '#19ffe9'
}
}
],
textStyle: {
color: "#1eb0dc"
}
},
];
// 使用刚指定的配置项和数据显示图表
chart1.setOption(option[0])
chart2.setOption(option[1])
chart3.setOption(option[2])
chart4.setOption(option[3])
chart5.setOption(option[4])
window.addEventListener('resize', function () {
chart1.resize();
chart2.resize();
chart3.resize();
chart4.resize();
chart5.resize();
})
// 屏幕适配
})()