213 lines
4.5 KiB
Vue
213 lines
4.5 KiB
Vue
<!--
|
|
* @Author: DY
|
|
* @Date: 2021-12-13 16:39:34
|
|
* @LastEditors: DY
|
|
* @LastEditTime: 2022-03-03 15:43:32
|
|
* @Description: E10折线柱状图
|
|
-->
|
|
<template>
|
|
<div>
|
|
<div id="monitorChart" :style="{width: '1000px', height: '800px'}" style="margin-left:10%" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import echarts from 'echarts'
|
|
// import { getE10Stack } from '@/api/equipment/infoPandect'
|
|
|
|
export default {
|
|
props: {
|
|
time1: {
|
|
type: Date,
|
|
default: () => {
|
|
return ''
|
|
}
|
|
},
|
|
time2: {
|
|
type: Date,
|
|
default: () => {
|
|
return ''
|
|
}
|
|
},
|
|
name: {
|
|
type: String,
|
|
default: () => {
|
|
return ''
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
chart: null,
|
|
list: [],
|
|
xDataList: [],
|
|
engineeringList: [],
|
|
nonscheduledDownList: [],
|
|
productiveList: [],
|
|
rampUpDownList: [],
|
|
scheduledDownList: [],
|
|
standByList: [],
|
|
unscheduledDownList: []
|
|
}
|
|
},
|
|
mounted() {},
|
|
beforeDestroy() {
|
|
if (!this.chart) {
|
|
return
|
|
}
|
|
this.chart.dispose()
|
|
this.chart = null
|
|
},
|
|
methods: {
|
|
removeData() {
|
|
this.xDataList = ['ACOT1', 'ACOT2']
|
|
this.engineeringList = [20, 30]
|
|
this.nonscheduledDownList = [20, 20]
|
|
this.productiveList = [10, 2]
|
|
this.rampUpDownList = [30, 3]
|
|
this.scheduledDownList = [8, 15]
|
|
this.standByList = [2, 12]
|
|
this.unscheduledDownList = [10, 18]
|
|
},
|
|
getList() {
|
|
this.removeData()
|
|
this.init()
|
|
},
|
|
init() {
|
|
this.chart = echarts.init(document.getElementById('monitorChart'))
|
|
const that = this
|
|
that.chart.on('click', function(params) {
|
|
that.$emit('equipmentName', params.name)
|
|
})
|
|
|
|
this.chart.setOption({
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
crossStyle: {
|
|
color: '#999'
|
|
}
|
|
}
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
saveAsImage: { show: true }
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
axisLabel: {
|
|
interval: 0,
|
|
rotate: -30
|
|
},
|
|
max: 10,
|
|
data: this.xDataList
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
min: 0,
|
|
max: 100,
|
|
axisLabel: {
|
|
formatter: '{value}%'
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: 'engineering',
|
|
type: 'bar',
|
|
stack: 'total',
|
|
label: {
|
|
show: true
|
|
},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
barWidth: 40,
|
|
data: this.engineeringList
|
|
},
|
|
{
|
|
name: 'nonscheduledDown',
|
|
type: 'bar',
|
|
stack: 'total',
|
|
label: {
|
|
show: true
|
|
},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: this.nonscheduledDownList
|
|
},
|
|
{
|
|
name: 'productive',
|
|
type: 'bar',
|
|
stack: 'total',
|
|
label: {
|
|
show: true
|
|
},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: this.productiveList
|
|
},
|
|
{
|
|
name: 'rampUpDown',
|
|
type: 'bar',
|
|
stack: 'total',
|
|
label: {
|
|
show: true
|
|
},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: this.rampUpDownList
|
|
},
|
|
{
|
|
name: 'scheduledDown',
|
|
type: 'bar',
|
|
stack: 'total',
|
|
label: {
|
|
show: true
|
|
},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: this.scheduledDownList
|
|
},
|
|
{
|
|
name: 'standBy',
|
|
type: 'bar',
|
|
stack: 'total',
|
|
label: {
|
|
show: true
|
|
},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: this.standByList
|
|
},
|
|
{
|
|
name: 'unscheduledDown',
|
|
type: 'bar',
|
|
stack: 'total',
|
|
label: {
|
|
show: true
|
|
},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: this.unscheduledDownList
|
|
}
|
|
]
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|