<template>
	<div :id="'chart-liquid' + id" style="width: 100%; height: 100%"></div>
</template>

<script setup name="chartLiquid">
	import * as echarts from 'echarts'
	import 'echarts-liquidfill'
	const props = defineProps({
		id: {
			type: Number,
			default: 0
		},
		list: {
			type: Object,
			default: () => {
				return {
					name: '',
					unit: '',
					formColor: '#3699FD',
					toColor: '#3BA3F9',
					nameColor: '#00FFFF',
					value: 0,
				}
			}
		}
	})

	let myChart = null

	const init = () => {
		let options = {
			series: [
				{
					// value: 50, //  内容 配合formatter
					type: 'liquidFill',
					radius: '80%', // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
					center: ['50%', '50%'],
					data: [
						0.4,
						{
							value: 0.2,
							direction: 'left', //波浪方向
						},
					], // data个数代表波浪数
					backgroundStyle: {
						borderWidth: 1,
						color: 'transparent', // 球体本景色
					},
					label: {
						normal: {
							formatter: function () {
								let str = `${props.list.name}\n\n${props.list.value} ${props.list.unit}`
								// return  `${props.list.value}`
								return str;
							},
							textStyle: {
								fontSize: 24,
								color: props.list.nameColor
							},
							position: ['50%', '40%'],
						},
					},
					amplitude: '8  %', //波浪的振幅
					// 修改波浪颜色
					// color: ['#0286ea', 'l#0b99ff'], // 每个波浪不同颜色，颜色数组长度为对应的波浪个数
					color: [
						{
							type: 'linear',
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [
								{
									offset: 1,
									color: props.list.toColor,
								},
								{
									offset: 0,
									color: props.list.formColor,
								},
							],
							globalCoord: false,
						},
					],
					outline: {
						show: false,
					},
				},
				{
					type: 'pie',
					z: 1,
					center: ['50%', '50%'],
					radius: ['80%', '82%'], // 控制外圈圆的粗细
					hoverAnimation: false,
					data: [
						{
							name: '',
							value: 500,
							labelLine: {
								show: false,
							},
							itemStyle: {
								color: props.list.toColor,
							},
							// emphasis: {
							//   labelLine: {
							//     show: false,
							//   },
							//   itemStyle: {
							//     color: '#00AFFF',
							//   },
							// },
						},
					],
				},

			]
		}
		myChart.setOption(options)
	}

	onMounted(() => {
		myChart = echarts.init(document.getElementById('chart-liquid' + props.id))
		init()
		window.addEventListener('resize', () => {
			myChart.resize()
		})
	})

	watch(() => props.list, () => {
		myChart.clear()
		init()
	}, { deep: true })

	onBeforeUnmount(() => {
		window.removeEventListener('resize', () => {
			myChart.resize()
		})

	})
</script>

<style scoped>

</style>
