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

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

	const props = defineProps<{
		position?:'',
		chartData?:''
	}>()
	
	const chartData = ref({});
	
	const opts = reactive({
		color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
		padding: [5,5,5,5],
		enableScroll: false,
		tooltipShow:true,
		legend: {
		  show: true,
		  position: props.position,
		  lineHeight: 25
		},
		extra: {
		  rose: {
		    type: "radius",
		    minRadius: 50,
		    activeOpacity: 0.5,
		    activeRadius: 10,
		    offsetAngle: 0,
		    labelWidth: 15,
		    border: true,
		    borderWidth: 2,
		    borderColor: "#FFFFFF",
		    linearType: "custom"
		  },
		}
	})
	watch(
		() => props.chartData,
		(val) => {
			chartData.value = val
		}
	)

</script>

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