<template>
  <div style="background-color: #FFFFFF;width:100%;height:100%;">
    <div ref="chartsRef" style="width:100%;height:100%;"></div>
  </div>
</template>
    
  <script lang="ts" setup="">
import { ref, watch, onMounted } from 'vue';
import * as echarts from 'echarts';
import 'echarts-wordcloud';
const chartsRef = ref();
var props = defineProps({
	dataArr: {
		type: String,
	},
});
const initCharts = () => {
	const myChart = echarts.init(chartsRef.value);
	const option = {
		series: [
			{
				type: 'gauge',
				axisLine: {
					lineStyle: {
						width: 12,
						color: [
							[0.3, '#fd666d'],
							[0.7, '#37a2da'],
							[1, '#67e0e3'],
						],
					},
				},
				pointer: {
					itemStyle: {
						color: 'auto',
					},
					width: 3,
				},
				axisTick: {
					distance: -29,
					length: 20,
					lineStyle: {
						color: '#fff',
						width: 0.5,
					},
				},
				splitLine: {
					distance: -30,
					length: 30,
					lineStyle: {
						color: '#fff',
						width: 1,
					},
				},
				axisLabel: {
					color: 'inherit',
					distance: 15,
					fontSize: 7,
				},
				detail: {
					valueAnimation: true,
					offsetCenter: [0, 40],
					formatter: '{value}%',
					color: 'inherit',
					fontSize: 15,
				},
				data: [
					{
						value: (parseFloat(props.dataArr)*100).toFixed(2),
					},
				],
			},
		],
	};
	myChart.clear();
	myChart.setOption(option);
	window.addEventListener('resize', () => {
		myChart.resize();
	});
};
watch(
	() => props.dataArr,
	(newValue, oldValue) => {
		initCharts();
	}
);
onMounted(() => {
	initCharts();
});
</script>
    
    <style lang="scss" scoped>
</style>