<template>
<div className="chart" style="height: 250px;width: 100%">
</div>
</template>
<script>
import echarts from 'echarts'
import resize from '@/utils/mixins/resize'
export default {
mixins: [resize],
props: ['ppp'],
data() {
return {
chart: null,
generated_energy: 0
}
},
watch: {
ppp() {
this.generated_energy = this.ppp
this.$nextTick(() => {
this.initChart()
})
}
},
mounted() {
this.generated_energy = this.ppp
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(this.$el)
this.setOptions(this.generated_energy)
},
setOptions(data) {
this.chart.setOption({
series: [
{
type: 'gauge',
axisLine: {
lineStyle: {
width: 15,
color: [
[0.3, '#1F8921'],
[0.7, '#4588BC'],
[1, '#FE4600']
]
}
},
pointer: {
width: 4,
itemStyle: {
color: 'auto'
}
},
axisTick: {
distance: -30,
length: 4,
lineStyle: {
color: '#fff',
width: 1
}
},
splitLine: {
distance: 20,
length: 30,
lineStyle: {
color: '#fff',
width: 4
}
},
axisLabel: {
color: 'auto',
distance: 0,
fontSize: 12
},
detail: {
valueAnimation: true,
fontSize: 16,
formatter: '{value}kW',
color: 'auto',
borderType: [5, 10]
},
data: [
{
value: data
}
]
}
]
})
}
}
}
</script>