136 lines
3.4 KiB
Vue
136 lines
3.4 KiB
Vue
<template>
|
|
<e-chart
|
|
ref="historyPrinttimeAvg"
|
|
:option="chartOptions"
|
|
:init-options="{ renderer: 'svg' }"
|
|
style="height: 175px; width: 100%"
|
|
v-observe-visibility="visibilityChanged"></e-chart>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import Component from 'vue-class-component'
|
|
import { Mixins, Watch } from 'vue-property-decorator'
|
|
import BaseMixin from '../mixins/base'
|
|
import type { ECharts } from 'echarts/core'
|
|
|
|
@Component({
|
|
components: {},
|
|
})
|
|
export default class HistoryPrinttimeAvg extends Mixins(BaseMixin) {
|
|
declare $refs: {
|
|
historyPrinttimeAvg: any
|
|
}
|
|
|
|
private chartOptions: any = {
|
|
darkMode: true,
|
|
animation: false,
|
|
grid: {
|
|
top: 25,
|
|
right: 40,
|
|
bottom: 30,
|
|
left: 40,
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
borderWidth: 0,
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: ['0-2h', '2-6h', '6-12h', '12-24h', '>24h'],
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: 'rgba(255, 255, 255, 0.06)',
|
|
},
|
|
},
|
|
axisLabel: {
|
|
color: 'rgba(255, 255, 255, 0.24)',
|
|
margin: 10,
|
|
},
|
|
},
|
|
yAxis: {
|
|
name: this.$t('History.HistoryPrinttimeAVG'),
|
|
type: 'value',
|
|
minInterval: 10,
|
|
maxInterval: 100,
|
|
nameLocation: 'end',
|
|
nameGap: 5,
|
|
nameTextStyle: {
|
|
color: 'rgba(255, 255, 255, 0.24)',
|
|
align: 'left',
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: 'rgba(255, 255, 255, 0.12)',
|
|
},
|
|
},
|
|
axisLabel: {
|
|
color: 'rgba(255, 255, 255, 0.24)',
|
|
formatter: '{value}',
|
|
//rotate: 90,
|
|
//showMaxLabel: false,
|
|
showMinLabel: true,
|
|
margin: 5,
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: 'rgba(255, 255, 255, 0.12)',
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
type: 'bar',
|
|
data: [],
|
|
itemStyle: {
|
|
color: '#BDBDBD',
|
|
},
|
|
},
|
|
],
|
|
}
|
|
|
|
get printtimeAvgArray() {
|
|
return this.$store.getters['server/history/getPrinttimeAvgArray']
|
|
}
|
|
|
|
get chart(): ECharts | null {
|
|
const historyPrinttimeAvg = this.$refs.historyPrinttimeAvg
|
|
return historyPrinttimeAvg?.inst ?? null
|
|
}
|
|
|
|
mounted() {
|
|
this.chartOptions.series[0].data = this.printtimeAvgArray
|
|
this.chart?.setOption(this.chartOptions)
|
|
|
|
window.addEventListener('resize', this.eventListenerResize)
|
|
}
|
|
|
|
destroyed() {
|
|
window.removeEventListener('resize', this.eventListenerResize)
|
|
}
|
|
|
|
beforeDestroy() {
|
|
if (typeof window === 'undefined') return
|
|
if (this.chart) this.chart.dispose()
|
|
}
|
|
|
|
@Watch('printtimeAvgArray')
|
|
printtimeAvgArrayChanged(newVal: any) {
|
|
this.chart?.setOption({
|
|
series: {
|
|
data: newVal,
|
|
},
|
|
})
|
|
}
|
|
|
|
visibilityChanged(isVisible: boolean) {
|
|
if (isVisible) this.chart?.resize()
|
|
}
|
|
|
|
eventListenerResize() {
|
|
this.chart?.resize()
|
|
}
|
|
}
|
|
</script>
|