132 lines
3.1 KiB
Vue
132 lines
3.1 KiB
Vue
<template>
|
||
<div>
|
||
<div
|
||
id="main"
|
||
style="width: 100%"
|
||
:style="{ height: chartHeight + 'px' }"
|
||
></div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import * as echarts from 'echarts'
|
||
import { tableHeight } from '@/utils/index'
|
||
import resize from '@/utils/chartMixins/resize'
|
||
export default {
|
||
name: 'deviceOeeLine',
|
||
mixins: [resize],
|
||
props: {
|
||
chartMsg: {
|
||
type: Array,
|
||
required: true,
|
||
default: () => {
|
||
return []
|
||
}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
chartDom: '',
|
||
chart: '',
|
||
chartHeight: tableHeight(214) / 2 - 35
|
||
}
|
||
},
|
||
mounted() {
|
||
this.$nextTick(() => {
|
||
this.getChart()
|
||
})
|
||
window.addEventListener('resize', () => {
|
||
this.chartHeight = tableHeight(214) / 2 - 35
|
||
})
|
||
},
|
||
watch: {
|
||
chartMsg: function () {
|
||
this.getChart()
|
||
}
|
||
},
|
||
beforeDestroy() {
|
||
if (!this.chart) {
|
||
return
|
||
}
|
||
this.chart.dispose()
|
||
this.chart = null
|
||
},
|
||
methods: {
|
||
getChart() {
|
||
if (
|
||
this.chart !== null &&
|
||
this.chart !== '' &&
|
||
this.chart !== undefined
|
||
) {
|
||
this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
|
||
}
|
||
this.chartDom = document.getElementById('main')
|
||
this.chart = echarts.init(this.chartDom)
|
||
let dateList = []
|
||
let activationList = []
|
||
let performanceList = []
|
||
let failurePercentList = []
|
||
let combinedEfficiencyList = []
|
||
for (let i = 0; i < this.chartMsg.length; i++) {
|
||
dateList.push(new Date(this.chartMsg[i].date).getDate())
|
||
activationList.push(this.chartMsg[i].activation)
|
||
performanceList.push(this.chartMsg[i].performance)
|
||
failurePercentList.push(this.chartMsg[i].failurePercent)
|
||
combinedEfficiencyList.push(this.chartMsg[i].combinedEfficiency)
|
||
}
|
||
var option = {
|
||
color: ['#5B8FF9', '#5AD8A6', '#5D7092', '#F6BD16'],
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
data: ['时间开动率', '性能开动率', '设备故障率', '综合效率'],
|
||
left: 30
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: dateList
|
||
},
|
||
yAxis: {
|
||
type: 'value'
|
||
},
|
||
series: [
|
||
{
|
||
name: '时间开动率',
|
||
type: 'line',
|
||
stack: 'Total',
|
||
data: activationList
|
||
},
|
||
{
|
||
name: '性能开动率',
|
||
type: 'line',
|
||
stack: 'Total',
|
||
data: performanceList
|
||
},
|
||
{
|
||
name: '设备故障率',
|
||
type: 'line',
|
||
stack: 'Total',
|
||
data: failurePercentList
|
||
},
|
||
{
|
||
name: '综合效率',
|
||
type: 'line',
|
||
stack: 'Total',
|
||
data: combinedEfficiencyList
|
||
}
|
||
]
|
||
}
|
||
|
||
option && this.chart.setOption(option)
|
||
}
|
||
}
|
||
}
|
||
</script>
|