99 lines
2.0 KiB
Vue
99 lines
2.0 KiB
Vue
<template>
|
|
<div class="right-content-quality-analysis">
|
|
<div :id="id" ref="fault-pie-chart" class="fault-pie-chart" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import echarts from 'echarts'
|
|
import resize from '@/views/OperationalOverview/components/mixins/resize'
|
|
|
|
export default {
|
|
name: 'RightContentFaultAnalysis',
|
|
mixins: [resize],
|
|
props: {
|
|
id: {
|
|
type: String,
|
|
default: 'default-id'
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: 'default-title'
|
|
},
|
|
xData: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
seriesData: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
chart: null,
|
|
option: {
|
|
title: {
|
|
left: 'center',
|
|
top: '30%',
|
|
text: '总共',
|
|
textStyle: {
|
|
color: '#888',
|
|
fontSize: 10
|
|
},
|
|
subtext: 880,
|
|
subtextStyle: {
|
|
color: '#fff',
|
|
fontSize: 24
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: 'Fault Analysis Chart',
|
|
type: 'pie',
|
|
radius: ['50%', '70%'],
|
|
avoidLabelOverlap: false,
|
|
label: {},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: '12'
|
|
}
|
|
},
|
|
data: Array(7)
|
|
.fill(0)
|
|
.map((_, index) => ({ value: Math.floor(Math.random() * 100), name: '设备' + index }))
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.$nextTick(() => {
|
|
console.log('here...')
|
|
if (!this.chart) this.chart = echarts.init(this.$refs['fault-pie-chart'])
|
|
this.chart.setOption(this.option)
|
|
})
|
|
},
|
|
beforeDestroy() {
|
|
if (this.chart) this.chart.dispose()
|
|
this.chart = null
|
|
},
|
|
methods: {}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.right-content-quality-analysis {
|
|
height: calc(100% - 32px);
|
|
}
|
|
|
|
.fault-pie-chart {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.fault-pie-chart >>> div {
|
|
width: 100% !important;
|
|
}
|
|
</style>
|