<template>
	<div>
		<div :class="name" :style="{ 'height': height }" />
	</div>
</template>

<script setup>
	import * as echarts from "echarts";
	import useResize from "@/hooks/useResize";
	const {
		proxy
	} = getCurrentInstance();
	var echartInstance = null;
	var _color = "#72819f";
	const props = defineProps({
		height: {
			type: String,
			default: '100%'
		},
		name: {
			type: String,
			default: 'echart'
		},
		data: {
			type: Array,
			default: [{
				value: 0,
				name: "data 1"
			}, {
				value: 0,
				name: "data 2"
			}]
		}
	});
	const {
		height,
		name,
		data
	} = toRefs(props);
	watch(data, (newValue) => {
		if (echartInstance != null) {
			echartInstance.setOption(getOption(newValue));
		}
	}, {
		deep: true
	});
	const getOption = function(_data) {
		let option = {
			legend: {
				bottom: "3%",
				itemWidth: 15,
				itemHeight: 7,
				itemGap: 5,
				textStyle: {
					color: _color,
					fontSize: 10
				}
			},
			color: ["#009dff","#22e4ff","#3bffd0","#04e38a","#9dff86","#fee588","#fea844","#fe7044","#fe4444","#ff7c8c"],
			toolbox: {
				show: false
			},
			tooltip: {
				trigger: "item",
				formatter: "{b} : {c} ({d}%)",
			},
			series: [{
				name: "Nightingale Chart",
				type: "pie",
				radius: ['40%', '60%'],
				center: ["50%", "50%"],
				label: {
					formatter: '{d}%',
					color: _color
				},
				data: data.value,
			}],
		};
		return option;
	};
	onMounted(() => {
		nextTick(() => {
			echartInstance = echarts.init(document.getElementsByClassName(name.value)[0]);
			echartInstance.setOption(getOption(data.value));
			echartInstance.resize();
		})
	})

	function resize() {
		echartInstance.resize();
	}
	// 暴露函数 （供hook调用）
	defineExpose({
		resize,
	});
	useResize();
</script>

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

