<template>
	 <view class="charts-box">
		<qiun-data-charts
		  type="ring"
		  :opts="opts"
		  :canvas2d="true"
		  :chartData="chartData"
		/>
	 </view>
</template>

<script lang="ts" setup>
	import { reactive, ref, watch } from 'vue';
	
	const props = defineProps<{
		title?:string,
		val?:number,
		radius?:number,
		position?:string,
		chartData?:''
	}>()
	
	const chartData = ref({})
	const opts = reactive({
	    rotate: false,
	    rotateLock: false,
	    color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
	    padding: [5,5,5,5],
	    dataLabel: true,
	    enableScroll: false,
	    legend: {
	      show: true,
	      position: props.position,
	      lineHeight: 25
	    },
	    title: {
	      name: props.title,
	      fontSize: 18,
	      color: "#666666"
	    },
	    subtitle: {
	      name: props.val,
	      fontSize: 25,
	      color: "#7cb5ec"
	    },
	    extra: {
	      ring: {
			customRadius: props.radius,
	        ringWidth: 20,
	        activeOpacity: 0.5,
	        activeRadius: 10,
	        offsetAngle: 90,
	        labelWidth: 15,
	        border: true,
	        borderWidth: 3,
	        borderColor: "#FFFFFF"
	      }
	    }
	  })
	  watch(
		() => props.chartData,
		(val) => {
			chartData.value = val
		}
	  )
</script>

<style lang="scss" scoped>
	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
	  width: 100%;
	  height: 300px;
	}
</style>