<!--
 * @Author: zwq
 * @Date: 2023-06-01 10:47:42
 * @LastEditors: zwq
 * @LastEditTime: 2023-08-31 16:23:08
 * @Description:
-->
<template>
	<div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons'); // echarts theme
import resize from '../mixins/resize';

export default {
	mixins: [resize],
	props: {
		className: {
			type: String,
			default: 'chart',
		},
		title: {
			type: String,
			default: 'chart',
		},
		width: {
			type: String,
			default: '100%',
		},
		height: {
			type: String,
			default: '300px',
		},
		occupancyData: {
			type: Number,
			default: 0,
		},
	},
	name: 'echarts',
	data() {
		return {
			echart: '',
		};
	},
	beforeDestroy() {
		if (!this.chart) {
			return;
		}
		this.chart.dispose();
		this.chart = null;
	},
	methods: {
		initChart() {
			this.chart = echarts.init(this.$el, 'macarons');

			this.chart.setOption({
				title: {
					text: '{space|}{tip|}{space|}{value|' + this.title + '}',
					left: '0%',
					top: '2%',
					textStyle: {
						rich: {
							tip: {
								width: 4,
								height: 16,
								backgroundColor: '#1FC495',
								marginRight: 6,
							},
							space: {
								width: 8,
							},
							value: {
								fontSize: 16,
								fontWeight: 'bold',
							},
						},
					},
				},
				series: [
					{
						type: 'gauge',
						startAngle: 180,
						endAngle: 0,
						min: 0,
						max: 100,
						splitNumber: 5,
						itemStyle: {
							color: '#47E282',
							shadowColor: 'rgba(0,138,255,0.45)',
							shadowBlur: 10,
							shadowOffsetX: 2,
							shadowOffsetY: 2,
						},
						pointer: {
							itemStyle: {
								color: 'auto',
							},
						},
						axisLine: {
							roundCap: true,
							lineStyle: {
								width: 16,
							},
						},
						axisTick: {
							distance: 5,
							splitNumber: 2,
							lineStyle: {
								width: 2,
								color: '#999',
							},
						},
						splitLine: {
							distance: 6,
							length: 14,
							lineStyle: {
								width: 4,
								color: '#999',
							},
						},
						axisLabel: {
							distance: -55,
							color: '#999',
							fontSize: 15,
						},
						title: {
							show: false,
						},
						detail: {
							backgroundColor: '#fff',
							width: '80%',
							lineHeight: 15,
							height: 15,
							offsetCenter: [0, '20%'],
							valueAnimation: true,
							formatter: function (value) {
								return '{side| }{value|' + value + '}{unit|%}{side1| }';
							},
							rich: {
								value: {
									fontSize: 18,
									color: '#1FC495',
									padding: [0, 0, 0, 16],
								},
								side: {
									width: 35,
									height: 5,
									backgroundColor: '#fff',
									opacity: 0.5,
									shadowColor: '#43E084',
									shadowOffsetX: 10,
								},
								side1: {
									width: 35,
									height: 5,
									backgroundColor: '#fff',
									opacity: 0.5,
									shadowColor: '#43E084',
									shadowOffsetX: -10,
								},
								unit: {
									fontSize: 12,
									color: '#999',
									padding: [0, 16, 0, 0],
								},
							},
						},
						data: [
							{
								value: this.occupancyData * 100,
							},
						],
						radius: '90%',
						center: ['50%', '70%'],
					},
				],
			});
		},
	},
};
</script>

<style scoped></style>
