931 lines
27 KiB
Vue
931 lines
27 KiB
Vue
<template>
|
||
<div class='mod-demo-echarts' :style="`height: ${winHeight}px`">
|
||
<!-- <div :style="`font-size: ${60 * beilv}px`" style="margin-left:30%;color:white;margin-bottom:10px"><img :height="`${60 * beilv}px`" src="../../assets/img/title.png"> 奔一电气立体库展示屏</div> -->
|
||
<!-- <el-card class="titleClass">
|
||
<el-tag class="tagClass" :style="`font-size: ${30 * beilv}px`" type='success' color="#E9EAEF" effect="dark">一二层空余库位:{{firstPointList.notOccupy12}}</el-tag>
|
||
<el-tag class="tagClass" :style="`font-size: ${30 * beilv}px`" type='success' color="#E9EAEF" effect="dark">三四五六层空余库位:{{firstPointList.notOccupy3456}}</el-tag>
|
||
<el-tag class="tagClass" :style="`font-size: ${30 * beilv}px`" type='success' color="#E9EAEF" effect="dark">七八层空余库位:{{firstPointList.notOccupy78}}</el-tag>
|
||
<el-tag class="tagClass" :style="`font-size: ${30 * beilv}px`" type='warning' color="#E9EAEF" effect="dark">当前任务编码:{{sTaskInfo.taskDetCode}} 类型:{{sTaskInfo.taskType === 0 ? '出库' : sTaskInfo.taskType === 1 ?'入库' : '无'}} </el-tag>
|
||
</el-card>
|
||
<hr /> -->
|
||
<el-row class="mod-demo-echarts-title">
|
||
<el-col class="mod-demo-echarts-title-logo" :offset="6" :span="1"></el-col>
|
||
<el-col class="mod-demo-echarts-title-font" :span="10">云 洁 科 技 展示屏</el-col>
|
||
<el-col class="mod-demo-echarts-title-icon" :span="4">
|
||
<el-row>
|
||
<el-col :offset="1" :span="5">
|
||
<img style="width: 100%;" src="../../assets/img/bigLed/icon1.png" alt="">
|
||
</el-col>
|
||
<el-col :offset="1" :span="5">
|
||
<img style="width: 100%;" src="../../assets/img/bigLed/icon2.png" alt="">
|
||
</el-col>
|
||
<el-col :offset="1" :span="5">
|
||
<img style="width: 100%;" src="../../assets/img/bigLed/icon3.png" alt="">
|
||
</el-col>
|
||
<el-col :offset="1" :span="5">
|
||
<img style="width: 100%;" src="../../assets/img/bigLed/icon4.png" alt="">
|
||
</el-col>
|
||
</el-row>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row class="mod-demo-echarts-secondtitle">
|
||
<!-- <el-card class="titleClass">
|
||
<el-tag class="tagClass" :style="`font-size: ${30 * beilv}px`">一二层空余库位:{{firstPointList.notOccupy12}}</el-tag>
|
||
<el-tag class="tagClass" :style="`font-size: ${30 * beilv}px`">三四五六层空余库位:{{firstPointList.notOccupy3456}}</el-tag>
|
||
<el-tag class="tagClass" :style="`font-size: ${30 * beilv}px`">七八层空余库位:{{firstPointList.notOccupy78}}</el-tag>
|
||
<el-tag class="tagClass" :style="`font-size: ${30 * beilv}px`">当前任务编码:{{sTaskInfo.taskDetCode}} 类型:{{sTaskInfo.taskType === 0 ? '出库' : sTaskInfo.taskType === 1 ?'入库' : '无'}} </el-tag>
|
||
</el-card> -->
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span='11' style="margin-left:2%">
|
||
<div class="chart-box chart-box-bg1">
|
||
<div class="chart-box-title">
|
||
库位使用情况，共：{{firstPointList.all}}
|
||
</div>
|
||
<div id='J_chartPieBox' class='chart-box-pie'></div>
|
||
</div>
|
||
<div class="chart-br"></div>
|
||
<div class="chart-box">
|
||
<div class="chart-box-title">
|
||
产品类别库位数量情况(外圈总量，内圈库存)
|
||
</div>
|
||
<div id='J_chartScatterBox' class='chart-box-pie'></div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span='11' :offset='1'>
|
||
<div class="chart-box chart-box-bg2">
|
||
<div class="chart-box-title">
|
||
产品型号库位数量情况
|
||
</div>
|
||
<div id='J_category' class='chart-box-bar'></div>
|
||
<div id='J_axis' class='chart-box-bar'></div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import echarts from 'echarts'
|
||
const colorOptions = ['#ec6942', '#f4b485', '#88abda']
|
||
export default {
|
||
data () {
|
||
return {
|
||
chartCate: null,
|
||
chartAxis: null,
|
||
chartBar: null,
|
||
chartPie: null,
|
||
firstPointList: [],
|
||
secondPointList: [],
|
||
sTaskInfo: {},
|
||
coverList: [],
|
||
smallList: [],
|
||
winHeight: 0,
|
||
beilv: 1
|
||
}
|
||
},
|
||
mounted () {
|
||
this.init()
|
||
this.winHeight = window.innerHeight
|
||
this.beilv = window.innerWidth / 1920
|
||
console.log(this.beilv)
|
||
window.addEventListener('resize', () => {
|
||
this.winHeight = window.innerHeight
|
||
this.beilv = window.innerWidth / 1920
|
||
this.chartCate.dispose()
|
||
this.chartAxis.dispose()
|
||
this.chartBar.dispose()
|
||
this.chartPie.dispose()
|
||
this.initChartPie()
|
||
this.initChartScatter()
|
||
this.initCate()
|
||
this.initAxis()
|
||
})
|
||
setInterval(() => {
|
||
this.chartCate.dispose()
|
||
this.chartAxis.dispose()
|
||
this.chartBar.dispose()
|
||
this.chartPie.dispose()
|
||
this.init()
|
||
}, 60000)
|
||
},
|
||
computed: {
|
||
documentClientHeight: {
|
||
get () { return this.$store.state.common.documentClientHeight }
|
||
}
|
||
},
|
||
activated () {
|
||
// 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
|
||
if (this.chartPie) {
|
||
this.chartPie.resize()
|
||
}
|
||
if (this.chartScatter) {
|
||
this.chartScatter.resize()
|
||
}
|
||
},
|
||
methods: {
|
||
init () {
|
||
this.$http({
|
||
url: this.$http.adornUrl('/generator/screen/countModel'),
|
||
method: 'get'
|
||
}).then(({ data }) => {
|
||
if (data && data.code === 0) {
|
||
this.secondPointList = data.data
|
||
this.initChartScatter()
|
||
} else {
|
||
this.secondPointList = []
|
||
}
|
||
})
|
||
this.$http({
|
||
url: this.$http.adornUrl('/generator/screen/countPosition'),
|
||
method: 'get'
|
||
}).then(({ data }) => {
|
||
if (data && data.code === 0) {
|
||
this.firstPointList = data.data
|
||
this.initChartPie()
|
||
} else {
|
||
this.firstPointList = []
|
||
}
|
||
})
|
||
this.$http({
|
||
url: this.$http.adornUrl('/generator/screen/coverAndBase'),
|
||
method: 'get'
|
||
}).then(({ data }) => {
|
||
if (data && data.code === 0) {
|
||
this.coverList = data.data
|
||
this.initCate()
|
||
} else {
|
||
this.coverList = []
|
||
}
|
||
})
|
||
this.$http({
|
||
url: this.$http.adornUrl('/generator/screen/smallModel'),
|
||
method: 'get'
|
||
}).then(({ data }) => {
|
||
if (data && data.code === 0) {
|
||
let arr1 = []
|
||
let arr2 = []
|
||
let arr3 = []
|
||
data.data.forEach(item => {
|
||
arr1.push(item.categoryName)
|
||
arr2.push(item.quantity)
|
||
arr3.push(item.position)
|
||
})
|
||
let obj = {
|
||
categoryName: arr1,
|
||
quantity: arr2,
|
||
position: arr3
|
||
}
|
||
this.smallList = obj
|
||
this.initAxis()
|
||
} else {
|
||
this.smallList = []
|
||
}
|
||
})
|
||
this.$http({
|
||
url: this.$http.adornUrl('/generator/mtcctaskruninfodet/taskruninfodetlist'),
|
||
method: 'post'
|
||
}).then(({data}) => {
|
||
if (data && data.code === 0) {
|
||
this.sTaskInfo = data.list[0]
|
||
if (!this.sTaskInfo.taskDetCode) {
|
||
this.sTaskInfo.taskDetCode = ''
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 饼状图
|
||
initChartPie () {
|
||
var option = {
|
||
title: {
|
||
// text: `库位使用情况:共${this.firstPointList.all}`,
|
||
left: 'center',
|
||
top: 20 * this.beilv,
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 25 * this.beilv
|
||
}
|
||
},
|
||
legend: {
|
||
orient: 'vertical',
|
||
right: 20 * this.beilv,
|
||
top: 40 * this.beilv,
|
||
itemWidth: 40 * this.beilv,
|
||
itemHeight: 40 * this.beilv,
|
||
itemGap: 80 * this.beilv,
|
||
icon: 'rect',
|
||
data: [
|
||
'已占用',
|
||
'未占用'
|
||
],
|
||
textStyle: {
|
||
fontSize: 16 * this.beilv,
|
||
color: '#fff',
|
||
padding: [0, 0, 0, 10 * this.beilv]
|
||
}
|
||
},
|
||
color: colorOptions,
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{a} <br/>{b} : {c} ({d}%)',
|
||
textStyle: {
|
||
fontSize: 20 * this.beilv,
|
||
lineHeight: 22 * this.beilv
|
||
}
|
||
},
|
||
visualMap: {
|
||
show: false,
|
||
min: 80,
|
||
max: 600,
|
||
inRange: {
|
||
colorLightness: [0, 1]
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: '库位数',
|
||
type: 'pie',
|
||
radius: '55%',
|
||
center: ['39%', '50%'],
|
||
data: [
|
||
{ value: this.firstPointList.isOccupy, name: `已占用` },
|
||
{ value: this.firstPointList.notOccupy, name: `未占用` }
|
||
].sort(function (a, b) {
|
||
return a.value - b.value
|
||
}),
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c|{c}} {per|{d}%} ',
|
||
backgroundColor: '#ced0ff',
|
||
borderColor: '#aaa',
|
||
borderWidth: 1,
|
||
borderRadius: 4,
|
||
// shadowBlur:3,
|
||
// shadowOffsetX: 2,
|
||
// shadowOffsetY: 2,
|
||
// shadowColor: '#999',
|
||
// padding: [0, 7],
|
||
rich: {
|
||
a: {
|
||
color: '#fff',
|
||
lineHeight: 26 * this.beilv,
|
||
backgroundColor: '#8e60f0',
|
||
align: 'center',
|
||
fontSize: 20 * this.beilv
|
||
},
|
||
abg: {
|
||
backgroundColor: '#8e60f0',
|
||
width: '100%',
|
||
align: 'right',
|
||
height: 26 * this.beilv,
|
||
borderRadius: [4, 4, 0, 0],
|
||
fontSize: 20 * this.beilv
|
||
},
|
||
hr: {
|
||
borderColor: '#aaa',
|
||
width: '100%',
|
||
borderWidth: 0.5 * this.beilv,
|
||
height: 0 * this.beilv,
|
||
fontSize: 18 * this.beilv
|
||
},
|
||
b: {
|
||
fontSize: 18 * this.beilv,
|
||
lineHeight: 33 * this.beilv,
|
||
color: '#8e60f0'
|
||
},
|
||
per: {
|
||
color: '#fff',
|
||
padding: [2 * this.beilv, 4 * this.beilv],
|
||
borderRadius: 2 * this.beilv,
|
||
fontSize: 18 * this.beilv
|
||
},
|
||
c: {
|
||
fontSize: 18 * this.beilv,
|
||
color: '#8e60f0'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
labelLine: {
|
||
normal: {
|
||
lineStyle: {
|
||
color: 'rgba(255, 255, 255, 0.3)'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
this.chartPie = echarts.init(document.getElementById('J_chartPieBox'))
|
||
this.chartPie.setOption(option)
|
||
window.addEventListener('resize', () => {
|
||
this.chartPie.resize()
|
||
})
|
||
},
|
||
initChartScatter () {
|
||
var option = {
|
||
// backgroundColor: '#0079BA',
|
||
color: colorOptions,
|
||
title: {
|
||
// text: '大系列库位数量情况(外圈总量，内圈库存)',
|
||
left: 'center',
|
||
top: 0,
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 25 * this.beilv
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{a} <br/>{b}: {c} ({d}%)',
|
||
textStyle: {
|
||
fontSize: 20 * this.beilv,
|
||
lineHeight: 22 * this.beilv
|
||
}
|
||
},
|
||
legend: {
|
||
orient: 'vertical',
|
||
right: 20 * this.beilv,
|
||
top: 40 * this.beilv,
|
||
itemWidth: 40 * this.beilv,
|
||
itemHeight: 40 * this.beilv,
|
||
itemGap: 30 * this.beilv,
|
||
icon: 'rect',
|
||
data: [
|
||
'成品',
|
||
'半成品',
|
||
'原材料'
|
||
],
|
||
textStyle: {
|
||
fontSize: 16 * this.beilv,
|
||
color: '#fff',
|
||
padding: [0, 0, 0, 10 * this.beilv]
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: '库位数',
|
||
type: 'pie',
|
||
radius: [0, '35%'],
|
||
center: ['39%', '50%'],
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
position: 'inner',
|
||
fontSize: 12 * this.beilv,
|
||
formatter: '{b}: {c}'
|
||
}
|
||
}
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: [
|
||
{ value: this.secondPointList.countPositionFinishedProduct, name: `成品` },
|
||
{ value: this.secondPointList.countPositionSemiFinishedProduct, name: `半成品` },
|
||
{ value: this.secondPointList.countPositionRawMaterials, name: `原材料` }
|
||
]
|
||
},
|
||
{
|
||
name: '数量',
|
||
type: 'pie',
|
||
radius: ['45%', '55%'],
|
||
center: ['39%', '50%'],
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c|{c}} {per|{d}%} ',
|
||
backgroundColor: '#ced0ff',
|
||
borderColor: '#aaa',
|
||
borderWidth: 1,
|
||
borderRadius: 4,
|
||
// shadowBlur:3,
|
||
// shadowOffsetX: 2,
|
||
// shadowOffsetY: 2,
|
||
// shadowColor: '#999',
|
||
// padding: [0, 7],
|
||
rich: {
|
||
a: {
|
||
color: '#fff',
|
||
lineHeight: 26 * this.beilv,
|
||
backgroundColor: '#8e60f0',
|
||
align: 'center',
|
||
fontSize: 20 * this.beilv
|
||
},
|
||
abg: {
|
||
backgroundColor: '#8e60f0',
|
||
width: '100%',
|
||
align: 'right',
|
||
height: 26 * this.beilv,
|
||
borderRadius: [4, 4, 0, 0],
|
||
fontSize: 20 * this.beilv
|
||
},
|
||
hr: {
|
||
borderColor: '#aaa',
|
||
width: '100%',
|
||
borderWidth: 0.5 * this.beilv,
|
||
height: 0 * this.beilv,
|
||
fontSize: 18 * this.beilv
|
||
},
|
||
b: {
|
||
fontSize: 18 * this.beilv,
|
||
lineHeight: 33 * this.beilv,
|
||
color: '#8e60f0'
|
||
},
|
||
per: {
|
||
color: '#fff',
|
||
padding: [2 * this.beilv, 4 * this.beilv],
|
||
borderRadius: 2 * this.beilv,
|
||
fontSize: 18 * this.beilv
|
||
},
|
||
c: {
|
||
fontSize: 18 * this.beilv,
|
||
color: '#8e60f0'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
data: [
|
||
{ value: this.secondPointList.countQuantityFinishedProduct, name: `成品` },
|
||
{ value: this.secondPointList.countQuantitySemiFinishedProduct, name: `半成品` },
|
||
{ value: this.secondPointList.countQuantityRawMaterials, name: `原材料` }
|
||
]
|
||
}
|
||
]
|
||
}
|
||
this.chartBar = echarts.init(
|
||
document.getElementById('J_chartScatterBox')
|
||
)
|
||
this.chartBar.setOption(option)
|
||
window.addEventListener('resize', () => {
|
||
this.chartBar.resize()
|
||
})
|
||
},
|
||
initCate () {
|
||
let [max, beilv] = [0, 0]
|
||
const kwArr = [this.coverList.basePosition, this.coverList.coverPosition]
|
||
kwArr.map(item => {
|
||
if (max < item) {
|
||
beilv = Math.ceil(item / 50)
|
||
max = beilv * 50
|
||
}
|
||
})
|
||
let option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'cross',
|
||
crossStyle: {
|
||
color: '#999'
|
||
},
|
||
label: {
|
||
textStyle: {
|
||
fontSize: 16 * this.beilv
|
||
}
|
||
}
|
||
},
|
||
textStyle: {
|
||
fontSize: 20 * this.beilv,
|
||
lineHeight: 22 * this.beilv
|
||
}
|
||
},
|
||
legend: {
|
||
show: true,
|
||
orient: 'vertical',
|
||
right: 70 * this.beilv,
|
||
top: 60 * this.beilv,
|
||
itemWidth: 40 * this.beilv,
|
||
itemHeight: 40 * this.beilv,
|
||
itemGap: 80 * this.beilv,
|
||
icon: 'rect',
|
||
data: [
|
||
'数量',
|
||
'库位数量'
|
||
],
|
||
textStyle: {
|
||
fontSize: 16 * this.beilv,
|
||
color: '#fff',
|
||
padding: [0, 0, 0, 10 * this.beilv]
|
||
}
|
||
},
|
||
color: ['#FFCD42', '#87cefa'],
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
data: ['成品', '半成品'],
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#fff',
|
||
type: 'dashed'
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
fontSize: 18 * this.beilv,
|
||
color: '#fff'
|
||
},
|
||
axisPointer: {
|
||
type: 'shadow',
|
||
label: {
|
||
color: '#666'
|
||
}
|
||
}
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
name: '数量',
|
||
nameTextStyle: {
|
||
fontSize: 20 * this.beilv,
|
||
color: '#fff'
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#fff',
|
||
type: 'dashed'
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
fontSize: 18 * this.beilv,
|
||
color: '#fff'
|
||
},
|
||
axisPointer: {
|
||
label: {
|
||
color: '#666'
|
||
}
|
||
}
|
||
},
|
||
{
|
||
type: 'value',
|
||
name: '库位数量',
|
||
min: 0,
|
||
max,
|
||
nameTextStyle: {
|
||
fontSize: 20 * this.beilv,
|
||
color: '#fff'
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#fff',
|
||
type: 'dashed'
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
fontSize: 18 * this.beilv,
|
||
color: '#fff'
|
||
},
|
||
axisPointer: {
|
||
label: {
|
||
color: '#666'
|
||
}
|
||
}
|
||
}
|
||
],
|
||
grid: {
|
||
left: '15%',
|
||
right: '40%'
|
||
},
|
||
series: [
|
||
{
|
||
name: '数量',
|
||
type: 'bar',
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: true,
|
||
position: 'inside',
|
||
fontSize: 18 * this.beilv
|
||
}
|
||
}
|
||
},
|
||
data: [this.coverList.baseQuantity, this.coverList.coverQuantity]
|
||
},
|
||
{
|
||
name: '库位数量',
|
||
type: 'bar',
|
||
data: [this.coverList.basePosition, this.coverList.coverPosition],
|
||
yAxisIndex: 1,
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: true,
|
||
position: 'inside',
|
||
fontSize: 18 * this.beilv
|
||
}
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
this.chartCate = echarts.init(document.getElementById('J_category'))
|
||
this.chartCate.setOption(option)
|
||
window.addEventListener('resize', () => {
|
||
this.chartCate.resize()
|
||
})
|
||
this.chartCate.on('legendselectchanged', res => {
|
||
this.chartAxis.dispatchAction({
|
||
type: 'legendToggleSelect',
|
||
// 图例名称
|
||
name: res.name
|
||
})
|
||
})
|
||
},
|
||
initAxis () {
|
||
let [max, beilv] = [0, 0]
|
||
const kwArr = this.smallList.position
|
||
kwArr.map(item => {
|
||
if (max < item) {
|
||
beilv = Math.ceil(item / 50)
|
||
max = beilv * 50
|
||
}
|
||
})
|
||
let option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'cross',
|
||
crossStyle: {
|
||
color: '#999'
|
||
},
|
||
label: {
|
||
textStyle: {
|
||
fontSize: 16 * this.beilv
|
||
}
|
||
}
|
||
},
|
||
textStyle: {
|
||
fontSize: 20 * this.beilv,
|
||
lineHeight: 22 * this.beilv
|
||
}
|
||
},
|
||
legend: {
|
||
show: false,
|
||
data: [
|
||
'数量',
|
||
'库位数量'
|
||
],
|
||
textStyle: {
|
||
fontSize: 16 * this.beilv,
|
||
color: '#fff'
|
||
},
|
||
top: 27 * this.beilv
|
||
},
|
||
title: {
|
||
// text: '成品小系列库位数量情况',
|
||
left: 'center',
|
||
top: 0,
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 25 * this.beilv
|
||
}
|
||
},
|
||
grid: {
|
||
top: 60 * this.beilv,
|
||
left: '15%'
|
||
},
|
||
color: ['#FFCD42', '#87cefa'],
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
data: this.smallList.categoryName,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#fff',
|
||
type: 'dashed'
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
fontSize: 18 * this.beilv,
|
||
color: '#fff',
|
||
interval: 0,
|
||
// formatter:function (value,index) {
|
||
// debugger
|
||
// if (index % 2 != 0) {
|
||
// return '\n' + value
|
||
// }
|
||
// else {
|
||
// return value
|
||
// }
|
||
// }
|
||
rotate: 40
|
||
},
|
||
axisPointer: {
|
||
type: 'shadow',
|
||
label: {
|
||
color: '#666'
|
||
}
|
||
}
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
name: '数量',
|
||
nameTextStyle: {
|
||
fontSize: 20 * this.beilv,
|
||
color: '#fff'
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#fff',
|
||
type: 'dashed'
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
fontSize: 18 * this.beilv,
|
||
color: '#fff'
|
||
},
|
||
axisPointer: {
|
||
label: {
|
||
color: '#666'
|
||
}
|
||
}
|
||
},
|
||
{
|
||
type: 'value',
|
||
name: '库位数量',
|
||
min: 0,
|
||
max,
|
||
nameTextStyle: {
|
||
fontSize: 20 * this.beilv,
|
||
color: '#fff'
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#fff',
|
||
type: 'dashed'
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
fontSize: 16 * this.beilv,
|
||
color: '#fff'
|
||
},
|
||
axisPointer: {
|
||
label: {
|
||
color: '#666'
|
||
}
|
||
}
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '数量',
|
||
type: 'bar',
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
fontSize: 12 * this.beilv
|
||
}
|
||
}
|
||
},
|
||
data: this.smallList.quantity
|
||
},
|
||
{
|
||
name: '库位数量',
|
||
type: 'bar',
|
||
data: this.smallList.position,
|
||
yAxisIndex: 1,
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
fontSize: 12 * this.beilv
|
||
}
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
this.chartAxis = echarts.init(document.getElementById('J_axis'))
|
||
this.chartAxis.setOption(option)
|
||
window.addEventListener('resize', () => {
|
||
this.chartAxis.resize()
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang='scss'>
|
||
.mod-demo-echarts {
|
||
background-color: #0079ba;
|
||
background: url('../../assets/img/bigLed/background.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
overflow:hidden;
|
||
padding: 0 5%;
|
||
> .el-alert {
|
||
margin-bottom: 10px;
|
||
}
|
||
.mod-demo-echarts-title{
|
||
position: relative;
|
||
top: 2vh;
|
||
width: 100%;
|
||
height: 13vh;
|
||
line-height: 13vh;
|
||
.mod-demo-echarts-title-logo{
|
||
min-width: 80px;
|
||
margin-top: 3vh;
|
||
height: 7vh;
|
||
background: url('../../assets/img/logo.png') no-repeat;
|
||
background-size: auto 100%;
|
||
}
|
||
.mod-demo-echarts-title-font{
|
||
font-weight: bold;
|
||
color: #fff;
|
||
font-size: 7vh;
|
||
}
|
||
}
|
||
.mod-demo-echarts-secondtitle{
|
||
margin-bottom: 1vh;
|
||
width: 100%;
|
||
height: 12vh;
|
||
.titleClass{
|
||
width: 100%;
|
||
line-height: 12vh;
|
||
background: transparent;
|
||
text-align: center;
|
||
box-shadow: 0 0 0 0 rgba(0,0,0,0);
|
||
border: 0;
|
||
.el-card__body{
|
||
padding: 0;
|
||
}
|
||
.tagClass{
|
||
height: 7vh;
|
||
line-height: 7vh;
|
||
background-color: rgba(255, 255, 255, .3) !important;
|
||
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .2);
|
||
border: 1px dashed #fff;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
.chart-box{
|
||
border-radius: 5px;
|
||
padding: 20px 5px 10px 5px;
|
||
border: 2px dashed #fff;
|
||
position: relative;
|
||
text-align: center;
|
||
.chart-box-pie {
|
||
min-height: 27vh;
|
||
}
|
||
.chart-box-bar {
|
||
min-height: 32vh;
|
||
}
|
||
.chart-box-title{
|
||
display: inline-block;
|
||
position: relative;
|
||
top: -4vh;
|
||
width: auto;
|
||
height: 4vh;
|
||
line-height: 4vh;
|
||
padding: 0 2.5vh;
|
||
margin: 0 auto;
|
||
border-radius: 5px;
|
||
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .2);
|
||
font-size: 2.5vh;
|
||
color: #fff;
|
||
font-weight: bold;
|
||
background-color: #8e60f0;
|
||
}
|
||
}
|
||
// .chart-box-bg1{
|
||
// background: url('../../assets/img/bigLed/round.png') no-repeat;
|
||
// background-size: 31px 31px;
|
||
// background-position: 98% 4%;
|
||
// }
|
||
// .chart-box-bg2{
|
||
// background: url('../../assets/img/bigLed/line-round.png') no-repeat;
|
||
// background-size: 35px 35px;
|
||
// background-position: 98% 2%;
|
||
// }
|
||
.chart-br{
|
||
width: 100%;
|
||
height: calc(6vh - 35px);
|
||
}
|
||
}
|
||
</style>
|