<!-- 
    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>
