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

</template>

<script>
	import {
		ref,
		reactive,
		toRefs,
		toRef,
		getCurrentInstance,
		watch,
		computed,
		onMounted,
	} from "vue";
	export default {
		props: {ModuleList:[]},
		setup(props) {
			let data = reactive({
				chartData: {},
				
				opts: {
					color: ["#FFF","#E53F4E", "#282828"],
					padding: [0, 0, 0, 0],
					dataLabel: false,
					dataPointShape: false,
					legend: {
						show: true,
						position: "top",
						lineHeight: 25,
						fontColor:"#282828",
						itemGap:30
					},
					extra: {
						radar: {
							gridType: "radar",
							gridCount: 3,
							opacity: 0.8,
							max: 100,
							gridColor:"#fcebed",
							labelColor:'#CE8086',
						}
					}
				},
			})
			let methods = {
				getServerData() {
					//模拟从服务器获取数据时的延时
					setTimeout(() => {
						//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
						let cate = [];//模块名称
						let grRate =[];//个人得分率
						let avgRate =[];//平均得分率
						props.ModuleList && props.ModuleList.forEach(item=>{
							cate.push(item.Module);
							grRate.push((item.ScoreRate * 100).toFixed(0));
							avgRate.push((item.AvgScoreRate * 100).toFixed(0));
						});
						let res = {
							categories: cate,
							series: [
								{
									name: "",
									legendShape:'none',
									data: [100,100,100,100,100,100,100]
								},
								{
									name: "平均得分率",
									data: avgRate
								},
								{
									name: "个人得分率",
									data: grRate
								},
								
							]
						};
						data.chartData = JSON.parse(JSON.stringify(res));
					}, 500);
				}
			}
			onMounted(()=>{
				methods.getServerData()
			})
			return {
				...toRefs(data),
				...methods
			};
		},
	};
</script>

<style scoped>
	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		width: 100%;
		height: 555rpx;
		background-image: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653555146000_297.png');
		    background-position: 0px 0rpx;
		background-repeat: no-repeat;
		background-size: 100% auto;
	}
</style>
