<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: {},
		setup() {
			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 res = {
							categories: ["化学与生活", "物质分类", "物质的量综合", "离子反应", "氧还原反应", "化学实验","元素及其化合物"],
							series: [
								{
									name: "",
									legendShape:'none',
									data: [100,100,100,100,100,100,100]
								},
								{
									name: "平均得分率",
									data: [80,66,50,90,53,60,20]
								},
								{
									name: "个人得分率",
									data: [74, 87, 69, 97, 16, 16,88]
								},
								
							]
						};
						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>
