<template>
	<view style="width: 100%;height: 100%;">
		<x-Echarts :options="chartOption"></x-Echarts>
	</view>
</template>

<script setup lang="ts">
	import { nextTick, ref, watch } from 'vue'
	const props = defineProps({
		total: {
			type: Number,
			default: 100
		},
		amount: {
			type: Number,
			default: 0
		},
		colourFirst: {
			type: String,
			default: 'rgba(0, 228, 255, 1)'
		},
		colourTail: {
			type: String,
			default: 'rgba(105, 255, 151, 1)'
		},
	});
	let totality = ref(0)
	const chartOption : any = ref({})
	watch(() => props.total, (newVal) => {
		if (newVal) {
			nextTick(() => {
				let rate = Math.round((props.amount * 100) / props.total);
				totality.value = props.total
				chartOption.value = {
					series: [
						{
							type: 'gauge',
							radius: '100%',
							z: 1,
							clockwise: false,//逆时针
							startAngle: -269.99,
							endAngle: 90,
							splitNumber: 0,
							splitLine: {
								show: false,
							},
							detail: {//显示详情数据
								show: true,
								color: "#fff",
								offsetCenter: [0, 0],//水平、垂直偏移
								fontSize: 18,
								formatter: (val) => [`{a|${rate}%}`].join(''),
								rich: {
									a: {
										fontSize: 18,
										fontFamily: 'DINCond-Bold, DINCond',
										fontWeight: 'bold',
										color: '#FFFFFF',
									},
								},
							},
							// 仪表盘的线，颜色值为一个数组
							axisLine: {
								show: true,
								lineStyle: {
									width: 4,
									opacity: 1,
									color: [
										[
											props.amount / totality.value,
											{
												x: 1,
												y: 1,
												x1: 0,
												y1: 0,
												colorStops: [
													{
														offset: 1,
														color: props.colourFirst,
													},
													{
														offset: 0,
														color: props.colourTail,
													},
												],
											},
										],
										[1, 'rgba(33, 44, 95,1)'],
									],
								},
							},
							axisLabel: {
								show: false
							},
							//指针
							pointer: {
								show: false,
							},
							axisTick: {
								show: true,
								splitNumber: 1,
								distance: -20,
								lineStyle: {
									color: 'rgba(3, 72, 84, 1)',
									width: 4,
								},
								length: 20,
							}, //刻度样式
							data: [{
								value: props.amount
							}]
						},
					],
				}
			})
		}
	}, { deep: true, immediate: true } // 开启深度监听
	)
</script>

<style lang="scss" scoped>
</style>