<!-- 学生老师共用雷达图 -->
<template>
	<view class="content">
	  <uniChart :option="person.option" />
	  <view class="cont_text">超过<text>{{props.rate}}%</text>该年龄段的学生</view>
	</view>
</template>

<script setup>
import { reactive, shallowRef, onMounted } from 'vue'
import * as echarts from "@/components/uniapp-echarts/static/echarts.min.js";
import uniChart from "@/components/uniapp-echarts/components/uni-chart/uni-chart.vue";

const props = defineProps({
    percentage:{
        type: Number,
        required: true
    },
    Title:{
        type: String,
        required: true
    },
	rate:{
        type: Number,
        required: true
    }
})

let person=reactive({
	option:{}
})

onMounted(()=>{
    GetEchar()
})

const GetEchar = () => {
	person.option = {
	  series: [
		{
		  type: 'gauge',
		  min: 0,
		  max: 100,
		  splitNumber: 10,
		  radius: '99%',
		  endAngle: -270,
		  axisLine: {
			lineStyle: {
			  width: '100%',
			  color: [[1, {
				  type: 'radial',
				  x: .5,
				  y: .5,
				  x2: 1,
				  y2: 1,
				  colorStops: [{
					  offset: .5, color: 'rgba(105, 132, 255, 1)' // 0% 处的颜色
				  }, {
					  offset: 1, color: 'rgba(107, 134, 255, 0.25)' // 100% 处的颜色
				  }],
				  globalCoord: false
			  }]]
			}
		  },
		  splitLine: {
			show: false
		  },
		  axisTick: {
			show: false
		  },
		  axisLabel: {
			show: false
		  },
		  pointer: {
			show: false
		  },
		  title: {
			show: false
		  },
		  anchor: {
			show: false
		  }
		},
		{
		  type: 'gauge',
		  radius: '60%',
		  endAngle: -270,
		  axisLine: {
			lineStyle: {
			  width: '100%',
			  color: [[1, '#fff']]
			}
		  },
		  splitLine: {
			show: false
		  },
		  axisTick: {
			show: false
		  },
		  axisLabel: {
			show: false
		  },
		  pointer: {
			show: false
		  },
		  title: {
			show: false
		  },
		  anchor: {
			show: false
		  }
		},
		{
		  type: 'gauge',
		  min: 0,
		  max: 100,
		  splitNumber: 10,
		  radius: '85%',
		  endAngle: -270,
		  axisLine: {
			lineStyle: {
			  width: 110,
			  color: [
				[0.75, '#6984FF'],
				[1, '#7A9CFF']
			  ]
			}
		  },
		  splitLine: {
			show: false
		  },
		  axisTick: {
			show: false
		  },
		  axisLabel: {
			show: false
		  },
		  pointer: {
			show: false
		  },
		  title: {
			show: false
		  },
		  anchor: {
			show: false
		  }
		},
		{
		  type: 'gauge',
		  min: 0,
		  max: 100,
		  splitNumber: 10,
		  radius: '80%',
		  progress: {
			show: true,
			width: 30
		  },
		  itemStyle: {
			color: '#57DCFF'
		  },
		  axisLine: {
			distance: 50,
			length: 18,
			lineStyle: {
			  color: [[1, '#fff']],
			  width: 30
			}
		  },
		  splitLine: {
			show: false
		  },
		  axisTick: {
			show: false
		  },
		  axisLabel: {
			distance: -100,
			color: '#ffffff',
			fontSize: 40
		  },
		  anchor: {
			show: false
		  },
		  pointer: {
			show: false
		  },
		  detail: {
			offsetCenter: [0, '-22px'],
			fontSize: 150,
			color: '#6B86FF'
		  },
		  title: {
			// 设置仪表盘中间显示文字样式
			offsetCenter: [0, '30%'],
			textStyle: {
			  fontSize: 40,
			  color: '#3E4E96'
			}
		  },
		  data: [
			{
			  value: props.percentage,
			  name: props.Title.split('测评')[0]+'\n测评指数'
			}
		  ]
		},
		{
		  type: 'gauge',
		  min: 0,
		  max: 100,
		  radius: '85%',
		  splitNumber: 10,
		  axisLine: {
			lineStyle: {
			  color: [[1, '#57DCFF']],
			  width: 3
			}
		  },
		  splitLine: {
			distance: -12,
			length: 12,
			lineStyle: {
			  color: '#57DCFF'
			}
		  },
		  axisTick: {
			show: false
		  },
		  axisLabel: {
			show: false
		  },
		  pointer: {
			show: false
		  },
		  title: {
			show: false
		  },
		  anchor: {
			show: false
		  }
		},
		{
		  type: 'gauge',
		  min: 0,
		  max: 100,
		  radius: '60%',
		  splitNumber: 21,
		  startAngle: 200,
		  endAngle: -270,
		  axisLine: {
			lineStyle: {
			  color: [[1, '#194280']],
			  width: 3
			}
		  },
		  splitLine: {
			distance: 0,
			length: 10,
			lineStyle: {
			  color: '#18EFE2'
			}
		  },
		  axisTick: {
			show: false
		  },
		  axisLabel: {
			show: false
		  },
		  pointer: {
			show: false
		  },
		  title: {
			show: false
		  },
		  anchor: {
			show: false
		  }
		}
	  ]
	};
}
</script>

<style lang="scss" scoped>
.content {
    width: 220px;
    height: 220px;
	position: relative;
	left: 50%;
	transform: translate(-50%);
	border-radius: 50%;
	margin-bottom: 50rpx;
	.cont_text{
		position: absolute;
		bottom: -60rpx;
		left: 0;
		width: 100%;
		text-align: center;
		color: #414F8E;
		font-size: 28rpx;
		text{
			color: #FFA755;
		}
	}
}
</style>