305 lines
4.5 KiB
Vue
305 lines
4.5 KiB
Vue
<!-- 学生老师共用雷达图 -->
|
|
<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> |