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


<script lang="ts" setup>
	import { reactive, ref, watch } from 'vue';

	const props = defineProps<{
		chartData ?: Object,
		position ?: '',
		radius?:0,
		label?:true
	}>()

	const chartData = ref({})
	const opts = reactive({
		color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
		padding: [5, 5, 5, 5],
		enableScroll: false,
		dataLabel: props.label,
		legend: {
		  show: true,
		  position: props.position,
		  lineHeight: 18
		},
		extra: {
			pie: {
				customRadius: props.radius,
				activeOpacity: 0.5,
				activeRadius: 10,
				offsetAngle: 0,
				labelWidth: 10,
				border: true,
				borderWidth: 2,
				borderColor: "#FFFFFF"
			}
		}
	})
	watch(
		() => props.chartData,
		(val) => {
			chartData.value = val
		}
	)
</script>

<style scoped>
	.charts-box {
	  width: 100%;
	  height: 100%;
	}
</style>