|
|
@@ -0,0 +1,98 @@ |
|
|
|
<!-- |
|
|
|
filename: pieChart.vue |
|
|
|
author: liubin |
|
|
|
date: 2023-09-06 15:02:49 |
|
|
|
description: 饼图 |
|
|
|
--> |
|
|
|
|
|
|
|
<template> |
|
|
|
<div class="pie-chart" :data-eqname="value.equipmentName || 'Default'"></div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import * as echarts from 'echarts'; |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'pieChart', |
|
|
|
components: {}, |
|
|
|
props: ['value'], |
|
|
|
data() { |
|
|
|
return { |
|
|
|
chart: null, |
|
|
|
config: { |
|
|
|
grid: { |
|
|
|
top: 0, |
|
|
|
left: 0, |
|
|
|
right: 0, |
|
|
|
bottom: 0, |
|
|
|
}, |
|
|
|
tooltip: { |
|
|
|
trigger: 'item', |
|
|
|
}, |
|
|
|
legend: { |
|
|
|
top: '0%', |
|
|
|
left: 'center', |
|
|
|
textStyle: { |
|
|
|
fontSize: 10, |
|
|
|
}, |
|
|
|
itemWidth: 10, |
|
|
|
itemHeight: 10, |
|
|
|
}, |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
name: this.value.equipmentName || 'Default', |
|
|
|
type: 'pie', |
|
|
|
radius: ['40%', '75%'], |
|
|
|
avoidLabelOverlap: false, |
|
|
|
label: { |
|
|
|
show: false, |
|
|
|
position: 'center', |
|
|
|
}, |
|
|
|
data: ['workTime', 'stopTime', 'downTime'].map((v, index) => ({ |
|
|
|
name: ['工作时长', '停机时长', '故障时长'][index], |
|
|
|
value: this.value[v], |
|
|
|
})), |
|
|
|
// data: [ |
|
|
|
// { value: 1048, name: 'Search Engine' }, |
|
|
|
// { value: 735, name: 'Direct' }, |
|
|
|
// { value: 580, name: 'Email' }, |
|
|
|
// { value: 484, name: 'Union Ads' }, |
|
|
|
// { value: 300, name: 'Video Ads' }, |
|
|
|
// ], |
|
|
|
}, |
|
|
|
], |
|
|
|
}, |
|
|
|
}; |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
if (!this.chart) { |
|
|
|
this.chart = echarts.init(this.$el); |
|
|
|
this.$nextTick(() => { |
|
|
|
this.chart.setOption(this.config); |
|
|
|
}); |
|
|
|
} |
|
|
|
}, |
|
|
|
beforeDestroy() { |
|
|
|
if (this.chart) this.chart.dispose(); |
|
|
|
}, |
|
|
|
methods: {}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
.pie-chart { |
|
|
|
padding: 12px; |
|
|
|
min-height: 320px; |
|
|
|
background: #f1f1f1; |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
|
|
|
|
.pie-chart::before { |
|
|
|
content: attr(data-eqname); |
|
|
|
font-size: 16px; |
|
|
|
line-height: 1; |
|
|
|
position: absolute; |
|
|
|
top: -16px; |
|
|
|
left: 0; |
|
|
|
} |
|
|
|
</style> |